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

Question

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

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

我的目标是这样的。

我正在使用 React Google charts

Answer 1

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

这可以使用带有计算列的数据 View 来添加，

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

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>