Question

我正在使用Google图表数据表从Json获取数据，但我想添加一个新的列结果，将第2列除以15000。

使用google.visualization.DataTable（）

我得到这样的东西

Colum 1            | Column 2
First row            15.000.000€
Second row           20.000.000€

我想要这样的第3列

Colum 1            | Column 2          | Column 3
First row            15.000.000€         1.000,00€
Second row           20.000.000€         1.333,33€

Answer 1

您可以使用DataView通过计算列来添加新列。

从数据表创建数据视图

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

然后使用setColumns方法更改视图列。
我们使用前两列的列索引，
然后对第三项进行计算。

view.setColumns([0, 1, {
  calc: function (dt, row) {
    return dt.getValue(row, 1) / 15000;
  },
  label: 'Column 3',
  type: 'number'
}]);

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

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Column 1', 'Column 2'],
    ['First Row', 15000000],
    ['Second Row', 20000000]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getValue(row, 1) / 15000;
    },
    label: 'Column 3',
    type: 'number'
  }]);

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

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

编辑

设置数字格式，
使用Google的数字格式化程序，
值的对象表示法。

var formatNumber = new google.visualization.NumberFormat({
  pattern: '#,##0.00',
  suffix: '€'
});

要格式化数据表列，请使用format方法。

formatNumber.format(data, 1);

要格式化单个值，请使用formatValue方法。

  var value = dt.getValue(row, 1) / 15000;
  return {
    v: value,
    f: formatNumber.formatValue(value)
  };

请参阅以下工作片段。

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Column 1', 'Column 2'],
    ['First Row', 15000000],
    ['Second Row', 20000000]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00',
    suffix: '€'
  });
  formatNumber.format(data, 1);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var value = dt.getValue(row, 1) / 15000;
      return {
        v: value,
        f: formatNumber.formatValue(value)
      };
    },
    label: 'Column 3',
    type: 'number'
  }]);

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

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

在Google DataView中动态添加新列

1 个答案: