谷歌图表（网页）如何添加线性45度线

Question

我得到的散点图非常精细，我可以添加趋势线，但我找不到一种方法来添加从（0,0）到（1,1）示例的45度线图片如下：

有没有办法通过它的网络API将这样的行添加到谷歌图表中？

Answer 1

使用ComboChart两个系列 - 散点图和线

只需要两者的数据，使用行不匹配的null

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

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'X', type: 'number'},
        {label: 'Y', type: 'number'},
        {label: 'Line', type: 'number'},
      ],
      rows: [
        {c:[{v: 3}, {v: 3.5}, null]},
        {c:[{v: 4}, {v: 5.5}, null]},
        {c:[{v: 4}, {v: 5}, null]},
        {c:[{v: 6.5}, {v: 7}, null]},
        {c:[{v: 8}, {v: 12}, null]},
        {c:[{v: 11}, {v: 14}, null]},
        // add line
        {c:[{v: 0}, null, {v: 0}]},
        {c:[{v: 20}, null, {v: 20}]},
      ]
    });

    var options = {
      legend: 'none',
      hAxis: {
        ticks: [0, 5, 10, 15, 20]
      },
      height: 400,
      series: {
        // line
        1: {
          type: 'line',
          visibleInLegend: false
        },
      },
      seriesType: 'scatter',
      vAxis: {
        ticks: [0, 5, 10, 15, 20]
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

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