在Google Charts中绘制视觉线条

Question

我正在写一张谷歌图表.它有堆叠的列.最重要的是,我想绘制2行,表示最小和最大允许值.

我想出的唯一解决方案是修改ComboCharts的第一个例子.我的结果如下:

这还不够.图形是可变的,因此如果仅显示1个Quartal,则该线将仅为点.我的问题是:

• 有没有办法进一步绘制线条,因此它会触及图形的左右边界？
• 我可以在图表中绘制标记线,而不是假装它是另一个数据点吗？

如果你愿意,你可以在这里摆弄一个ComboChart .

Answer 1

您无法使用离散(基于字符串的)x轴进行边对边.如果切换到连续(数字,日期,日期时间,时间)轴,则可以在实际数据之前添加一行,之后添加一行包含目标行(以及其他数据系列的空值):

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/