Добавить новый столбец в Google DataView динамически

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>