Как нарисовать дополнительную горизонтальную линию сетки с определенным значением в гистограмме 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"));

Я что-то упустил?

РЕДАКТИРОВАТЬ-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) отображалось только один раз, то есть в конце строки, а не показывалось в столбце каждого месяца. Это должно выглядеть примерно так, как на скриншоте в разделе ( Что мне нужно ). Пожалуйста, сообщите.

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>

РЕДАКТИРОВАТЬ

, чтобы отображать аннотацию для среднего значения только один раз,
использовать свой собственный расчет дляаннотации,
и возвращают значение, только если индекс строки равен последней строке ...

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