如何绘制带有垂直分隔线的谷歌折线图？

Question

我有几个谷歌折线图（实际上是包含折线图和区域图的组合图表），需要有一个垂直的“之前和之后”类型的标记，就像这样： 我该怎么做呢？

我在文档中看到，我可以自定义线条中的单个点（例如将其制作成大星星）以用作标记，但如果有一种方法可以使用垂直线来完成这项工作，那将更好。

- kurtgn

---

你可以使用另一个系列作为柱形图来绘制垂直线。 - WhiteHat

Answer 1

在某个地方发现了这个

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    data.addColumn('number', 'Blanket 2');
    data.addRow(["A", null, null, 1, 1, 0.5]);
    data.addRow(["B", null, null, 2, 0.5, 1]);
    data.addRow(["C", null, null, 4, 1, 0.5]);
    data.addRow(["D", null, null, 8, 0.5, 1]);
    data.addRow(["E", null, null, 7, 1, 0.5]);
    data.addRow(["F", null, null, 7, 0.5, 1]);
    data.addRow(["G", 'Foo', 'Foo annotation', 8, 1, 0.5]);
    data.addRow(["H", null, null, 4, 0.5, 1]);
    data.addRow(["I", null, null, 2, 1, 0.5]);
    data.addRow(["J", null, null, 3.5, 0.5, 1]);
    data.addRow(["K", 'Bar', 'Bar annotation', 3, 1, 0.5]);
    data.addRow(["L", null, null, 3.5, 0.5, 1]);
    data.addRow(["M", null, null, 1, 1, 0.5]);
    data.addRow(["N", null, null, 1, 0.5, 1]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        curveType: 'function',
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line'
        }
    });
}

http://jsfiddle.net/NC37X/

这个回答了我的问题。

- kurtgn

---

提供的 jsfiddle 对我来说无法工作，但是经过一番摆弄后，我终于让它工作了：https://jsfiddle.net/6zahewst/6/ - Petri