javascript - 如何在 google chart api 中实现以下图表？

Question

我想在 google chart api 中实现以下图表。我怎么才能得到它。我想在两个数据点之间分隔 4 个季度，每个季度需要显示的指标。带数字的垂直线是该点有注释。我怎样才能在谷歌图表 API 中得到这个。

Answer 1

您可以使用“注释” Angular 色列来创建您想要的行。这是一个例子:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Year');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');

    data.addRows([
        [2009, null, 5],
        [2010, '1', 4],
        [2011, null, 7],
        [2011.25, '2', null],
        [2011.5, '3', null],
        [2012, null, 7]
    ]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        interpolateNulls: true,
        annotation: {
            1: {
                style: 'line'
            }
        },
        hAxis: {
            format: '#',
            minorGridlines: {
                count: 3
            },
            ticks: [2009, 2010, 2011, 2012]
        },
        vAxis: {
            textPosition: 'none',
            minValue: 0,
            maxValue: 10
        },
        legend: {
            position: 'none'
        }
    });
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

在这里查看它的工作情况:http://jsfiddle.net/asgallant/H5K29/