需要谷歌图表帮助，需求和帮助提供额外垂直线的图表

Question

See this link for chart type

实际上，我想创建一个需求＆amp;供应图表（使用谷歌图表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/