jQuery图形库:两个Y轴点对应于单个X轴

时间:2014-03-08 06:40:29

标签: jquery graph highcharts jqplot

我想制作如下图表:

enter image description here

如果我们查看紫色线,它在相同的数据集(紫色线)中有一个sinle x轴的两个Y轴点。

如何使用jQuery图表库实现此目的。我已准备好所有的网络服务并等待这一点。 :(

1 个答案:

答案 0 :(得分:2)

再现该图表没有什么特别或困难。这是highcharts

$(function () {
    $('#container').highcharts({
        xAxis: {
            title: {
                text: 'Quantity'
            },
            min: -0.1,
            max: 16,
            tickInterval: 2,
            gridLineColor: 'transparent',
            minorGridLineColor: '#E0E0E0',
            minorTickInterval: 0.2
        },
        yAxis: {
            title: {
                text: 'Price'
            },
            min: 0,
            max: 6,
            tickInterval: 1,
            gridLineColor: 'transparent',
            minorGridLineColor: '#E0E0E0',
            minorTickInterval: 0.2
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        series: [{
            name: 'AD',
            data: [[0,6],[0,5],[8,4],[15,4],[15,0]],
            color: 'rgb(120,96,160)'
        }, {
            name: 'AS',
            data: [[0,0],[0,3],[10,3],[10,3.5],[15,3.5],[15,6]],
            color: 'rgb(152,184,80)'
        }]
    });
});

小提琴here

enter image description here