如何在数据集中的Google图表中使用数学方程式？

Question

因此，我正在尝试使用Google图表创建图形，但找不到任何要使用的数学函数。我所做的只是手动计算方程式的结果，并将其放入数据集中（在这种情况下，我已计算y = x ^ 2）。尽管此方法工作正常，但我计划创建更多的图，并且我真的不愿意为手工计算而烦恼。可以使用数学方程式吗？如果是这样，请您提供相应的代码？谢谢

Answer 1

可能有几种方法可以完成，这里有几个...

[1）使用带有计算列的data view

创建数据表后，从该表创建数据视图...

  var view = new google.visualization.DataView(data);

然后您可以使用setColumns方法。使用此方法，您传递了一组列定义。

您可以将列索引作为数字传递，或将计算所得的列作为对象。

此处包含数据表的第一列，以及计算出的列...

  view.setColumns([0, {
    calc: function (dt, row) {
      var x = dt.getValue(row, 0);
      return Math.pow(x, 2);
    },
    label: 'y',
    type: 'number'
  }]);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number','x');
  data.addRows([
    [0],
    [1],
    [2],
    [3],
    [4],
    [5],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, row) {
      var x = dt.getValue(row, 0);
      return Math.pow(x, 2);
    },
    label: 'y',
    type: 'number'
  }]);

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

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

[2）另一个选择是执行计算，因为已加载数据表...

  for (var i = 0; i < 10; i++) {
    data.addRow([i, Math.pow(i, 2)]);
  }

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number','x');
  data.addColumn('number','y');
  
  for (var i = 0; i < 10; i++) {
    data.addRow([i, Math.pow(i, 2)]);
  }
  
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

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