我需要在我的图表上添加一些额外的标签,所以我使用的是形状。结果如下: http://jsfiddle.net/z3n3qobm/91/
但我需要将示例中的圆圈与X轴的标签对齐。图表必须是响应式的,标签总数取决于数据库。
我有一个函数可以在'%'中生成形状的初始位置,但是当我更改窗口的大小时它会不对齐。
我做了一些计算,但是当图表调整大小时,它并没有保持固定的比例。
有人知道如何在X轴标签的相同位置使用形状吗?
答案 0 :(得分:4)
不幸的是,ZingChart没有提供基于大小调整来缩放形状和标签的方法。挂钩可用于在节点上定位标签,但不能在缩放项本身上定位。
现在我确实有一个问题的解决方案,但是要明确这更多是利用ZingChart和多个图表的技巧。我删除了图表中的形状,并决定使用第二个图表复制这些圆圈。 这样做的主要目的是利用散点图,修改每个散布节点的外观以复制您想要实现的内容,并隐藏所有不必要的表面项(缩放,删除plotarea边距)。请注意,我使用的是混合图表,一个系列用于散点图,另一个用于虚拟条形图,以强制缩放与上面的图表显示方式相匹配。
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(下面的片段将在未来删除jsfiddle。)
这也可以通过将两个图表组合成一个图表集来实现,但我发现使用单独的图表更灵活。
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>
&#13;