我有三条曲线,我在左侧y轴上可视化。但我还要比较其他三条曲线,这些曲线的值非常不同,右边的y轴必须是可视的。我怎么能这样做?
由于
答案 0 :(得分:1)
不确定您的问题是关于某个图书馆还是一般的图表。
最容易阅读的事情是制作两张图表。
但如果两个数据集绝对必须位于同一图表区域,那么解决此问题的一种方法是将轴着色以与绘图线协调。要了解我所描述的内容,请查看此演示(点击代码片段上的运行):
var chartJSON = {
"type":"line",
"plotarea":{
},
"scaleX":{
"offset-start":20,
"offset-end":20,
"line-color":"black",
"line-width":4,
"tick":{
"line-color":"black"
}
},
"scaleY":{
"line-color":"rgb(54,208,38)",
"line-width":4,
"tick":{
"line-color":"rgb(54,208,38)"
}
},
"scaleY2":{
"line-color":"rgb(14,73,207)",
"line-width":4,
"tick":{
"line-color":"rgb(14,73,207)"
}
},
"plot":{
"aspect":"spline"
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69],
"text":"Apple",
"line-color":"rgb(54,208,38)",
"scales":"scale-x,scale-y",
"marker":{
"background-color":"rgb(54,208,38)",
"border-color":"black"
}
},
{
"values":[51,53,47,60,48,52,75,52,55,47,60,48],
"text":"Microsoft",
"line-color":"rgb(101,189,82)",
"scales":"scale-x,scale-y",
"marker":{
"background-color":"rgb(101,189,82)",
"border-color":"black"
}
},
{
"values":[42,43,30,40,31,48,55,46,48,32,38,38],
"text":"Oracle",
"line-color":"rgb(164,188,157)",
"scales":"scale-x,scale-y",
"marker":{
"background-color":"rgb(164,188,157)",
"border-color":"black"
}
},
{
"values":[1550,1520,560,1000,1830,1620,950,900,1790,800,1830,1620],
"text":"Dell",
"line-color":"rgb(14,73,207)",
"scales":"scale-x,scale-y-2",
"marker":{
"background-color":"rgb(14,73,207)",
"border-color":"black"
}
},
{
"values":[1760,780,1110,1670,860,1400,1980,1230,1740,660,1670,860],
"text":"Apple",
"line-color":"rgb(47,97,207)",
"scales":"scale-x,scale-y-2",
"marker":{
"background-color":"rgb(47,97,207)",
"border-color":"black"
}
},
{
"values":[1660,1700,1060,1590,800,960,580,1020,690,1580,1590,800],
"text":"Microsoft",
"line-color":"rgb(122,148,203)",
"scales":"scale-x,scale-y-2",
"marker":{
"background-color":"rgb(122,148,203)",
"border-color":"black"
}
}
]
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
&#13;