シェイプを使用しているため、グラフにラベルを追加する必要があります。ここでの結果である： http://jsfiddle.net/z3n3qobm/91/ZingChart - ラベルとしての形状
しかし、私はX軸のラベルを持つ例から円を整列させる必要があります。グラフは応答性が高く、ラベルの合計はデータベースによって異なります。
私は、 '％'で図形の初期位置を生成する関数を持っていますが、ウィンドウのサイズを変更すると位置がずれます。
私はいくつかの計算を行いましたが、グラフのサイズが変更されても一定の比率を維持しません。
X軸ラベルの同じ位置にどのようにシェイプを使用するか考えている人はいますか？
残念ながら、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({
\t id : 'myChart',
\t data : myData,
\t 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({
\t id : 'myBubbles',
\t data : bubbleConfig,
\t 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>