如何将自定义轴线添加到谷歌图表？

Question

我有一个谷歌散点图，其中有一些重要的阈值。我如何想象它们？

我是否在图表轴上推了一些额外的刻度？如果是这样，我如何只添加一个？如何设置它？

我的目标是这样的。

我正在使用React Google charts

Answer 1

为所有行添加另一列或系列，具有相同的值...

可以使用带有计算列的数据视图添加

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0,  165],
    [1,  175],
    [2,  185]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: function () {
        return 150;
      },
      label: 'min',
      type: 'number'
    },
    {
      calc: function () {
        return 175;
      },
      label: 'avg',
      type: 'number'
    },
    {
      calc: function () {
        return 200;
      },
      label: 'max',
      type: 'number'
    }
  ]);

  var options = {
    vAxis: {
      viewWindow: {
        min: 125,
        max: 225
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(view, options);
}

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

编辑

这是另一个例子......

在数据表中添加其他列，
使用getColumnRange查找min和max x轴值

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0,  165],
    [1,  175],
    [2,  185]
  ]);

  var xAxisRange = data.getColumnRange(0);
  data.addColumn({label: 'min', type: 'number'});
  data.addColumn({label: 'avg', type: 'number'});
  data.addColumn({label: 'max', type: 'number'});
  data.addRows([
    [xAxisRange.min, null, 150, 175, 200],
    [xAxisRange.max, null, 150, 175, 200]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    series: {
      1: {
        color: 'cyan'
      },
      2: {
        color: 'cyan'
      },
      3: {
        color: 'cyan'
      }
    }
  });
}

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