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）仅出现一次，即在行的末尾而不是在每个月的列上显示。这需要与（我需要的）部分下的屏幕截图类似。请告知。

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

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

1 个答案: