多个Y轴上的多个曲线

时间:2014-08-22 09:39:43

标签: charts line

我有三条曲线,我在左侧y轴上可视化。但我还要比较其他三条曲线,这些曲线的值非常不同,右边的y轴必须是可视的。我怎么能这样做?

由于

1 个答案:

答案 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;
&#13;
&#13; 我是ZingChart团队的成员,所以如果您对图表的制作方式有任何疑问,请随时与我们联系。