在Google图表中绘制视觉线条 [英] Drawing visual Lines in Google Charts

问题描述

我正在写一个Google Chart。它堆积了柱子。最重要的是，我想画两条线，表示最小和最大允许值。

我想出的唯一解决方案是修改。

让线条与离散的（基于字符串的）x轴边缘对边。如果您切换到连续（数字，日期，日期时间，timeofday）轴，那么您可以在实际数据之前添加一行，之后添加一行包含目标行（以及其他数据系列的空值）：

 函数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：{
格式：'Q＃'，$ $ b $ 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/

I'm writing a Google Chart. It has stacked columns. On top of that I want to draw 2 lines, which indicate min and max allowed value.

The only solution I came up with, was modifying the first example of ComboCharts. My result looks like this:

Which isn't sufficient. The graph is variable, so if there's only 1 Quartal shown, the line will solely be a dot. My Questions are:

• Is there a way to draw the line further, so it hits the left and right boundary of the Graph?
• Can I draw markup lines into the graph, without pretending it's another datapoint?

You can fiddle with a ComboChart here if you want.

解决方案

You can't get the lines to go edge-to-edge with a discrete (string-based) x-axis. If you switch to a continuous (number, date, datetime, timeofday) axis, then you can add one row before your real data and one row after that contain the goal lines (and nulls for the other data series):

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});

See working example: http://jsfiddle.net/asgallant/W67qU/

这篇关于在Google图表中绘制视觉线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！