如何在谷歌列图表中添加目标行？

Posted 2021-04-09

如何在Google柱形图中添加目标行，如下所示。

答案

如果您想要组合柱形图和折线图，请使用ComboChart。文档和示例如下：https://developers.google.com/chart/interactive/docs/gallery/combochart

基本上，将折线图的数据点作为DataTable中的一列，并将此列指定为“series”=“line”，而其他列则在ColumnChart中可视化。

另一答案

您可以使用Stepped Area系列来实现这一目标。这有点尴尬，但运作良好。

var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
    ['2004/05',  165,      938,         522,             998,           450,      250],
    ['2005/06',  135,      1120,        599,             1268,          288,      250],
    ['2006/07',  157,      1167,        587,             807,           397,      250],
    ['2007/08',  139,      1110,        615,             968,           215,      250],
    ['2008/09',  136,      691,         629,             1026,          366,      250]
]);

var options = {
    seriesType: "line",
    series: {5: {
      type: "steppedArea", 
      color: '#FF0000', 
      visibleInLegend: false, 
      areaOpacity: 0}
    }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));    
chart.draw(data, options);

例

Stepped Area Google Chart Example

另一答案

要避免丑陋的轮廓，只需使用：enableInteractivity: false

另一答案

为了使上面建议的阶梯区域@Ryan稍微不那么笨拙，可以设置第二个（右）轴并将基线设置为目标线所需的值。将为seppedArea数据设置第二个轴。当您将指针悬停在图表上和线下时，这可以避免uggly轮廓效应。在选项中执行以下操作：

var options = {
    seriesType: "line",
    series: {5: {
        type: "steppedArea", 
        color: '#FF0000', 
        visibleInLegend: false, 
        areaOpacity: 0,
        targetAxisIndex: 1 } //tell the series values to be shown in axe 1 bellow
    },
    vAxes: [  //each object in this array refers to one axe setup
        {},  //axe 0 without any special configurations
        {
            ticks: [250], //use this if you want to show the target value
            baseline: 250 //this shifts the base line to 250
        }
    ]
};