我需要在我的图表上添加一些额外的标签，所以我正在使用形状。下面是结果： http://jsfiddle.net/z3n3qobm/91/ZingChart - 作为标签的形状
但我需要从与X轴的标签的例子对准圆。图表必须具有响应性，标签总数取决于数据库。
我有生成“％”的形状的初始位置的功能，但是当我改变窗口的大小它产生位置偏移。
我做了一些计算，但是当图表调整大小时，它并不保持固定的比例。
有人有一个想法如何在X轴标签的相同位置使用形状？
不幸的是，ZingChart没有提供基于尺寸调整形状和标签的方法。挂钩可用于在节点上放置标签，但不能放在标尺项目上。
现在有我有一个解决您的问题，但仅仅是明确的，这是更多的利用与ZingChart和多个图表技巧黑客攻击的。我删除了图表中的形状，并决定使用第二个图表复制这些圆圈。 这个主要目标是利用散点图，修改每个散点节点的外观以复制您试图实现的内容，并隐藏所有不必要的表面项目（缩放，删除plotarea边距）。请注意，我正在使用混合图表，一个系列用于散点图，另一个用于虚拟条形图来强制缩放以匹配上图显示的方式。
http://jsfiddle.net/mikeschultz/q6arebsu/1/
（摘录下面柜面的jsfiddle在将来删除）。
这可以通过两个图表合并成一个单一的graphset也完成，但我觉得有独立的图表工作更加灵活。
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>