谷歌折线图划分网格线

时间:2013-11-14 18:33:58

标签: javascript google-api google-visualization

我创建了一个谷歌折线图,其中包含多个值,如此

I have this

数据是指历史数据,并且从某个时间点开始是预测数据。我想划分(拆分)图表以区分预测信息的历史信息。 得到一个这样的图表:

I wan to do this

有办法吗?

1 个答案:

答案 0 :(得分:2)

您可以通过向DataTable中的域(x轴)列添加'annotation'角色列,并将annotation.<annotation column index>.style选项设置为'line'来获得这样的垂直线。这是一个例子:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');
    data.addRows([
        ['Jun', null, 3],
        ['Jul', null, 5],
        ['Aug', null, 4],
        ['Sep', null, 4],
        ['Oct', null, 8],
        ['Nov', 'this month', 6],
        ['Dec', null, 2]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        annotation: {
            1: {
                style: 'line'
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

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