1

以前在这里问过一个类似的问题：Google Charts: Horizo​​ntal Reference Line on Barchart

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

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

本质上，我想通过让一条线一直穿过图表来突出显示 y 轴上的特定值

4

1 回答 1

0

您可以使用连续的 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 轴上显示单词，
并使用视图窗口来限制 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>

于 2020-01-21T12:46:28.953 回答