如何在 Google 条形图中绘制具有特定值的附加水平网格线（非平均值）

Question

如何在 Google 条形图中绘制具有特定值的附加水平网格线。我想画的线不是平均值。这是一个特定的值。

我得到了什么

我需要的

我该怎么做？

编辑

这是我的数据模型：

var data = google.visualization.arrayToDataTable([
    ["Month", "Points", { role: "style" }, "TARGET GOAL"],
    ["Apr-19", 17, "#c4c4c4", 25], 
    ["May-19", 32, "#c4c4c4", 25], 
    ["Jun-19", 20, "#c4c4c4", 25], 
    ["Jul-19", 22, "#c4c4c4", 25], 
    ["Aug-19", 27, "#c4c4c4", 25], 
    ["Sep-19", 26, "#c4c4c4", 25], 
    ["Oct-19", 18, "#008600", 25], 
    ["Nov-19", 18, "#008600", 25], 
    ["Dec-19", 18, "#008600", 25], 
]);

在 options 对象中我有这个：

seriesType: 'bars',
series:{
   3: {
        type: 'line'
      }
}

因为25是我想要渲染成一条线的值，它在第4个位置。

最后

var chart = new google.visualization.ComboChart(document.getElementById("container_id"));

我是不是漏掉了什么？

EDIT-2 完整脚本：

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);

function drawChart_ebcg_unitary() {
    var data = google.visualization.arrayToDataTable([
        ["Month", "Points", { role: "style" }, "TARGET GOAL"],
        ["Apr-19", 17, "#c4c4c4", 25], 
        ["May-19", 32, "#c4c4c4", 25], 
            ["Jun-19", 20, "#c4c4c4", 25], 
        ["Jul-19", 22, "#c4c4c4", 25], 
        ["Aug-19", 27, "#c4c4c4", 25], 
        ["Sep-19", 26, "#c4c4c4", 25], 
        ["Oct-19", 18, "#008600", 25], 
        ["Nov-19", 18, "#008600", 25], 
        ["Dec-19", 18, "#008600", 25], 
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
             {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
             },
        2]);

        var options = {
        chartArea: {
                    left: 50,
                    width: "90%",
                    height: 250
        },

        title: "",
        width: '100%',
        height: 350,
        bar: {groupWidth: "90%"},
        legend: {position: "none"},
        seriesType: 'bars',
        series:{
            1: {
                type: 'line'
            }
        },
        vAxis: {
            minValue: 0,
            title: 'SALES UNITS'
        },
        hAxis: {
            title: 'MONTH'
        },
        annotations: {
            textStyle: {
                fontName: 'Arial, sans-serif',
                color: '#000000',
                fontSize: 12,
                bold: true
            },
            alwaysOutside: true
        }
    };


    var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
    chart.draw(view, options);
}

jQuery(window).resize(function () {
    drawChart_ebcg_unitary();
});

编辑 3：平均线
我怎样才能使平均线（请参阅屏幕截图）值 (25) 只出现一次，即在该行的末尾而不是在每个月的列中显示它。这需要看起来与 (What I need) 部分下的屏幕截图相似。请指教

Answer 1

使用 ComboChart，它允许您绘制不同类型的系列。

在选项中，设置主要seriesType。
然后使用 series 选项，更改特定系列的类型...

{
  seriesType: 'bars',
  series: {
    1: {
      type: 'line'
    }
  }
}

请参阅以下工作片段...

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);

function drawChart_ebcg_unitary() {
    var data = google.visualization.arrayToDataTable([
        ["Month", "Points", { role: "style" }, "TARGET GOAL"],
        ["Apr-19", 17, "#c4c4c4", 25], 
        ["May-19", 32, "#c4c4c4", 25], 
            ["Jun-19", 20, "#c4c4c4", 25], 
        ["Jul-19", 22, "#c4c4c4", 25], 
        ["Aug-19", 27, "#c4c4c4", 25], 
        ["Sep-19", 26, "#c4c4c4", 25], 
        ["Oct-19", 18, "#008600", 25], 
        ["Nov-19", 18, "#008600", 25], 
        ["Dec-19", 18, "#008600", 25], 
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
             {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
             },
        2, 3]);

        var options = {
        chartArea: {
                    left: 50,
                    width: "90%",
                    height: 250
        },

        title: "",
        width: '100%',
        height: 350,
        bar: {groupWidth: "90%"},
        legend: {position: "none"},
        seriesType: 'bars',
        series:{
            1: {
                type: 'line'
            }
        },
        vAxis: {
            minValue: 0,
            title: 'SALES UNITS'
        },
        hAxis: {
            title: 'MONTH'
        },
        annotations: {
            textStyle: {
                fontName: 'Arial, sans-serif',
                color: '#000000',
                fontSize: 12,
                bold: true
            },
            alwaysOutside: true
        }
    };


    var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
    chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ecbg_unitary"></div>

编辑

只显示一次平均值的注释，
使用您自己的注释计算，
如果行索引等于最后一行，则只有 return 一个值...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  },
  2, 3, {
    calc: function(dt, row) {
      var annotation = null;
      if (row === (dt.getNumberOfRows() - 1)) {
        annotation = dt.getFormattedValue(row, 3);
      }
      return annotation;
    },
    type: 'string',
    role: 'annotation'
  }
]);

如何在 Google 条形图中绘制具有特定值的附加水平网格线（非平均值）

How can I draw an additional horizontal grid line with a specific value in Google Bar chart (Not average value)

charts

google-visualization