javascript - 在 Google Charts ScatterChart 上画一条线

Question

我有一个 ScatterChart，我需要在其中绘制一条(函数 y=x 的)对 Angular 线，作为视觉辅助。可能吗 ？如果是这样，我该怎么做？

Answer 1

另一种解决方案是您可以使用 Scatter多系列图表，并设置lineWidth = 1和 pointSize = 0对于 Line图表!

请参见以下示例:

function main() {
  const xMin = -2 * Math.PI;
  const xMax = 2 * Math.PI;
  const f1 = x => Math.cos(x) + Math.random();
  const f2 = x => Math.cos(x);

  const x = linspace(xMin, xMax, 20);
  const y1 = x.map(f1);
  const y2 = x.map(f2);

  scatterLineChart(document.getElementById('scatter-line-chart'), x, [y1, y2], 'Scatter: Cos(x) + Noise, Line: Cos(x)', 'x', ['Cos(x) + Noise', 'Cos(x)']);
}

function linspace(a, b, n = 100) {
  const data = new Array(n);

  const d = (b - a) / (n - 1);

  data[0] = a;
  data[n - 1] = b;

  n = n - 1;
  for (let i = 1; i < n; i++) {
    data[i] = data[i - 1] + d;
  }

  return data;
}

function createSeriesDataTable(x, ys, xLabel, yLabels) {
  // data
  const data = new google.visualization.DataTable();

  // - columns
  data.addColumn('number', xLabel);
  yLabels.forEach(yLabel => {
    data.addColumn('number', yLabel);
  });

  // - rows
  const n = x.length;
  const m = ys.length;
  const rows = Array(n);
  for (let i = 0; i < n; i++) {
    rows[i] = Array(1 + m);
    rows[i][0] = x[i];
    for (let j = 0; j < m; j++) {
      rows[i][j + 1] = ys[j][i];
    }
  }
  data.addRows(rows);

  // return
  return data;
}

function scatterLineChart(parentElement, x, ys, title, xLabel, yLabels) {
  google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    const data = createSeriesDataTable(x, ys, xLabel, yLabels);
    const options = {
      title: title,
      series: {
        1: {
          lineWidth: 3,
          pointSize: 0,
          curveType: 'function'
        },
      },
      legend: 'none'

    };

    const chart = new google.visualization.ScatterChart(parentElement);
    chart.draw(data, options);
  }
}

main();

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