google-visualization - 在Google图表中绘制视线

Question

我正在写一个Google图表。它具有堆叠的列。最重要的是，我想绘制2条线，指示最小和最大允许值。

我想到的唯一解决方案是修改ComboCharts的第一个示例。我的结果看起来像这样:

这还不够。该图是可变的，因此，如果仅显示1个夸脱，则该线将仅是一个点。我的问题是:

是否有进一步画线的方法，所以它会触及图的左右边界？

我可以在不假装它是另一个数据点的情况下将标记线绘制到图形中吗？

如果需要，您可以摆弄ComboChart here。

Answer 1

您无法使用离散的(基于字符串的)x轴使线条边缘到边缘。如果您切换到连续轴(数字，日期，日期时间，每日时间)，则可以在实际数据之前添加一行，在其后包含目标行的另一行(其他数据系列为null):

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Quarter');
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addColumn('number', 'Value 3');
    data.addColumn('number', 'Goal 1');
    data.addColumn('number', 'Goal 2');
    data.addRows([
        [0, null, null, null, 10, 14],
        [1, 5, 4, 7, null, null],
        [2, 6, 9, 6, null, null],
        [3, 2, 6, 4, null, null],
        [5, null, null, null, 10, 14]
    ]);

    var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        isStacked: true,
        legend: {
            position: 'top'
        },
        seriesType: 'bars',
        interpolateNulls: true,
        series: {
            3: {
                type: 'line'
            },
            4: {
                type: 'line'
            }
        },
        hAxis: {
            format: 'Q#',
            ticks: [1, 2, 3, 4],
            viewWindow: {
                min: 0.5,
                max: 4.5
            }
        },
        chartArea: {
            left: '10%',
            width: '80%'
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

请参见工作示例: http://jsfiddle.net/asgallant/W67qU/