Google visualization 如何在谷歌柱形图中添加目标线？

如何像这样在google柱形图中添加目标行

---

如果要组合柱形图和折线图，请使用组合图。文档和示例如下：

基本上，将折线图的数据点作为DataTable中的一列，并将此列指定为“series”=“line”，而其他列则显示在一个柱形图中。

您可以使用一个系列来实现这一点。这有点尴尬，但效果很好

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

例子

---

为了让上面提到的StepeDarea@Ryan建议的方法稍微不那么麻烦，您可以设置第二个（右）轴，并将基线设置为目标线所需的值。第二个轴将为seppedArea数据设置。这避免了将指针悬停在图表上方和线条下方时出现难看的轮廓效果。在选项中执行以下操作：

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

---

为了避免丑陋的轮廓，只需使用：

enableInteractivity:false

目标系列的阶梯区域将更接近于此。只需确保为区域填充指定0%的不透明度，您可能会希望将“connectSteps”设置为false，以便每年在其上方都有自己的线条。值得一提的是，在我需要3条不同目标线条的情况下，使用组合图的这项技术非常有效。图例将颜色与每条线及其标签相关联。