4

グラフにラベルを追加する必要があるため、図形を使用しています。結果は次のとおりです。 http://jsfiddle.net/z3n3qobm/91/

 

ただし、例の円を X 軸のラベルに揃える必要があります。グラフはレスポンシブである必要があり、ラベルの合計はデータベースによって異なります。

「%」で形状の初期位置を生成する関数がありますが、ウィンドウのサイズを変更するとずれます。

いくつかの計算を行いましたが、グラフのサイズを変更すると、一定の比率が維持されません。

X 軸ラベルの同じ位置で図形を使用する方法を知っている人はいますか?

4

1 に答える 1

4

残念ながら、ZingChart は、サイズに基づいて形状やラベルをスケーリングする方法を提供していません。フックは、ノードにラベルを配置するために使用できますが、スケール アイテム自体には使用できません。

これで問題の解決策が見つかりましたが、明確にするために、これは ZingChart と複数のチャートを使用したトリックを利用したハックです。グラフの図形を削除し、2 番目のグラフを使用してそれらの円を複製することにしました。これの主な目的は、散布図を利用し、各散布ノードの外観を変更して達成しようとしているものを再現し、不要なすべての表面的な項目 (スケール、プロット領域の余白を削除) を非表示にすることでした。散布図用に 1 つのシリーズ、ダミーの棒グラフ用に別のシリーズを使用して、上記のグラフの表示方法とスケールを一致させるために、混合グラフを使用していることに注意してください。

http://jsfiddle.net/mikeschultz/q6arebsu/1/

(jsfiddle が将来削除される場合に備えて、以下のスニペット)。

これは、2 つのグラフを 1 つのグラフセットに結合することによっても達成できますが、個別のグラフで作業する方がより柔軟であることがわかります。

var myData = {
"graphset":[
    {
        "globals":{
            "overflow":"visible"
        },
        "plot":{
            "animation":{
                "effect":"ANIMATION_EXPAND_BOTTOM",
                "sequence":null,
                "speed":10
            },
            "aspect":"jumped"
        },
        "plotarea": {
          "margin-bottom": 30
        },
        "type":"mixed",
        "series":[
            {
                "type":"bar",
                "values":[46,46,53,50],
                "background-color":"#5e36e6",
                "value-box":{
                    "placement":"bottom-in",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":".",
                    "font-color":"#fff"
                },
                "palette":0
            },
            {
                "type":"bar",
                "values":[52,53,61,58],
                "background-color":"#0099cd",
                "value-box":{
                    "placement":"top",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":".",
                    "font-color":"#fff"
                },
                "palette":1
            },
            {
                "type":"line",
                "values":[150,105,399,159],
                "marker":{
                    "size":0,
                    "border-width":0,
                    "background-color":"transparent"
                },
                "line-color":"#99cc33",
                "line-width":3,
                "value-box":{
                    "placement":"top",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":"."
                },
                "palette":2
            }
        ],
        "background-color":"#3F0767",
        "scale-x":{
            "tick":{
                "alpha":0
            },
            "zooming":false,
            "labels":["AB","CDE","FG","HI JKL"],
            "line-width":0,
            "zoom-to":null
        },
        "scale-y":{
            "guide":{
                "alpha":0.25,
                "line-style":"solid",
                "line-color":"#5a3b77"
            },
            "short":true,
            "tick":{
                "alpha":0
            },
            "line-width":0
        },
        "scroll-x":false
    },
]
};

zingchart.render({ 
	id : 'myChart', 
	data : myData, 
	height: 400
});

var bubbleConfig = {
  type: 'mixed',
  backgroundColor:"#3F0767",
  scaleX: {
    visible: false
  },
  scaleY: {
    visible: false
  },
  plotarea: {
    marginTop : 0,
    marginBottom: 0,
    maskTolerance: [0,0]
  },
  plot: {
    marker: {
      size: 30,
      borderColor: '#371876',
      borderWidth: 3,
      backgroundColor: 'transparent'
    },
    tooltip: {
      visible: false
    }
  },
  scaleY: {
    values: "0:2:1",
    visible: false
  },
  series: [
    {
      type:'scatter',
      values: [
        [0,1],
        [1,1],
        [2,1],
        [3,1]
      ],
      valueBox: {
        visible: true,
        text: 'foobar',
        fontColor: '#fff',
        fontSize: '15px',
        fontWeight: 'normal',
        placement: 'over',
        rules: [
          {
            rule: '%i == 0',
            text: '35%'
          },
          {
            rule: '%i == 1',
            text: '51%'
          },
          {
            rule: '%i == 2',
            text: '15%'
          },
          {
            rule: '%i == 3',
            text: '36%'
          }
        ]
      }
    },
        {
      type:'bar',
      values: []
    }
  ]
}
zingchart.render({ 
	id : 'myBubbles', 
	data : bubbleConfig, 
	height: 80
});
<html>
  <head>
    <script src="http://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id="myChart"></div>
    <div id='myBubbles'></div>
  </body>
</html>

于 2016-04-30T07:41:59.267 に答える