javascript - 需要谷歌图表帮助，用于带有额外垂直线的需求和供应图表

Question

有关图表类型，请参阅此链接

实际上，我想创建一个供需图表（使用 Google Charts API），这将是一个带有区域线的简单区域图（一个用于需求，另一个用于供应），但我也想显示第三条线（不是区域仅行）例如，请参见上面的链接。

任何想法如何绘制这样的图表，我只能设法在没有中心线部分的情况下绘制。

图片 ：

谢谢

Answer 1

您可以使用 ComboChart 来做到这一点。诀窍在于创建中间线 - 通常，您使用 (x, y) 坐标对水平绘制线条；要垂直绘制，请将这些对反转为 (y, x)，但您必须让它们按 x 值排序（否则线条会变得混乱）。这是一些示例代码：

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'demand');
    data.addColumn('number', 'supply');
    data.addColumn('number', 'other');
    data.addRows([
        [0, 100, null, null],
        [1, 95, null, null],
        [2, 93, null, null],
        [3, 84, null, null],
        [4, 79, null, null],
        [5, 70, null, null],
        [6, 63, null, null],
        [7, 52, null, null],
        [8, 47, null, null],
        [9, 38, null, null],
        [10, 34, null, null],
        [11, 31, null, null],
        [12, 29, null, null],
        [13, 22, null, null],
        [14, 19, null, null],
        [15, 17, null, null],
        [16, 11, null, null],
        [17, 9, null, null],
        [18, 5, null, null],
        [19, 2, null, null],
        [20, 0, 0, null],
        [21, 0, 0, null],
        [22, 0, 0, null],
        [23, null, 4, null],
        [24, null, 8, null],
        [25, null, 11, null],
        [26, null, 16, null],
        [27, null, 22, null],
        [28, null, 27, null],
        [29, null, 35, null],
        [30, null, 43, null],
        [31, null, 44, null],
        [32, null, 51, null],
        [33, null, 55, null],
        [34, null, 62, null],
        [35, null, 69, null],
        [36, null, 73, null],
        [37, null, 77, null],
        [38, null, 81, null],
        [39, null, 88, null],
        [40, null, 94, null],
        [41, null, 99, null],
        [42, null, 100, null],
        /* add the middle line series here
         * invert the normal (x, y) relationship that would draw the line horizontally
         * input as [y, null, null, x]
         * order the input by the x value, otherwise the line will be screwed up
         */
        [21, null, null, 0],
        [23, null, null, 5],
        [26, null, null, 10],
        [17, null, null, 15],
        [19, null, null, 20],
        [23, null, null, 25],
        [18, null, null, 30],
        [20, null, null, 35],
        [24, null, null, 40],
        [22, null, null, 45],
        [16, null, null, 50],
        [21, null, null, 55],
        [29, null, null, 60],
        [24, null, null, 65],
        [21, null, null, 70],
        [17, null, null, 75],
        [19, null, null, 80],
        [18, null, null, 85],
        [23, null, null, 90],
        [21, null, null, 95],
        [24, null, null, 100]
    ]);

    var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        series: {
            0: {
                // demand series
                type: 'area'
            },
            1: {
                // supply series
                type: 'area'
            },
            2: {
                // other series
                type: 'line'
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

看到它在这里工作：http: //jsfiddle.net/asgallant/dfGth/