如何在 google 柱形图中显示水平参考线？

Question

之前有人在这里问过类似的问题：

但答案涉及创建一个定制的事件侦听器，这对我来说似乎相当复杂。有更简单的解决方案吗？

我有一个 google 图表柱形图，数据显示在各个柱中。我想添加一条水平参考线来指示 y 轴上的特定阈值。我知道可以使用 Google Combochart 创建类似于我想要的东西，以在同一图表上显示列和线。但是，使用这种方法，参考线仅在第一列和最后一列的中心之间延伸，而不是一直延伸到整个图表。

本质上，我想通过在图表

中一直画一条线运行来突出显示 y 轴上的特定值

Answer 1

您可以使用连续的 x 轴（数字），
左侧和右侧为空值。

['Category', 'Value', 'Reference'],
[0, null, 0.80],
[1, 0.10, 0.80],
[2, 0.30, 0.80],
[3, 0.20, 0.80],
[4, null, 0.80]

然后使用自定义刻度在 x 轴上显示单词，
和一个视图 window 来限制 x 轴的视图，
这将贯穿整个图表的水平线。

hAxis: {
  ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
  viewWindow: {
    min: 0.5,
    max: 3.5
  }
},

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value', 'Reference'],
    [0, null, 0.80],
    [1, 0.10, 0.80],
    [2, 0.30, 0.80],
    [3, 0.20, 0.80],
    [4, null, 0.80]
  ]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, {
    colors: ['lime', 'magenta'],
    hAxis: {
      ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
      viewWindow: {
        min: 0.5,
        max: 3.5
      }
    },
    legend: 'none',
    series: {
      1: {
        type: 'line'
      }
    },
    title: 'Percentile Score',
    vAxis: {
      format: 'percent',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });
});

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

如何在 google 柱形图中显示水平参考线？

how do I show a horizontal reference line in a google column chart?

charts

google-visualization

pygooglechart