如何在 google 图表中使用数学方程而不是数据集？

Question

所以我正在尝试使用 google 图表创建图表，但我找不到任何数学函数可以使用。我所做的只是手动计算方程的结果并将它们放入数据集中（在本例中我计算了 y=x^2）。虽然这很好用，但我打算创建更多图表，我真的懒得手工计算。是否可以使用数学方程式？如果是这样，你能提供代码吗？谢谢

Answer 1

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

1) 使用带有计算列的 data view

创建数据 table 后，从 table...

创建数据视图

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

那你就可以使用setColumns方法了
使用此方法，您传递一个列定义数组。

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

此处，数据table中的第一列被包含在内，
连同计算列...

  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) 另一种选择是执行计算，因为数据 table 已加载...

  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>

如何在 google 图表中使用数学方程而不是数据集？

How to use a mathmetical equation in google charts instad of a dataset?

math

charts

equation

google-visualization