如何添加目标线在谷歌柱形图？(How to add target line in google co

How to add the target line in google column chart like this.

Answer 1:

如果您想将ColumnChart和线型图结合起来，用ComboChart。 文档和例子在这里： https://developers.google.com/chart/interactive/docs/gallery/combochart

基本上，具有用于线图表为在数据表中的列中的一个数据点，并指定该列是“串联” =“行”，而其他列中一个的ColumnChart可视化。

Answer 2:

您可以使用一个台阶区域一系列实现这一目标。 这是一个有点尴尬，但效果很好。

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

例

台阶部谷歌图表示例

Answer 3:

为了避免丑陋的大纲，只需使用： enableInteractivity: false

Answer 4:

为了使steppedArea @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
        }
    ]
};

文章来源: How to add target line in google column chart?