Создание диаграммы с накоплением с помощью Google Charts из базы данных - PullRequest
Новая
       7

Создание диаграммы с накоплением с помощью Google Charts из базы данных

0 голосов
/ 19 сентября 2018

Мой API возвращает следующую таблицу: 

Date        Name      Size
2018-17-09  John      500
2018-17-09  Doe       1000
2018-17-09  Jack      3000
2018-17-09  Choi      700
2018-18-09  John      6000
2018-18-09  Doe       200
2018-18-09  Jack      555
2018-19-09  John      700
2018-19-09  Doe       9000

Моя цель - показать график по имени и дате.Ось X будет датой, а ось Y - размером.

Я очень новичок в Google Chart нужна помощь.Большое вам спасибо!

1 Ответ

0 голосов
/ 20 сентября 2018

чтобы составить столбцы для каждого имени по дате,
ваша таблица должна быть структурирована следующим образом,
со столбцами / сериями для каждого имени.

['Date', 'John', 'Doe', 'Jack'],
['2018-17-09', 500, 1000, 3000],

это может быть трудно сделать на сервере / запросе,
особенно если вы не знаете, сколько имен у вас будет заранее.

как таковой, мы можем использовать методы таблицы данных Google
для преобразования данных с сервера,
в нужный нам формат.

сначала мы создаем представление данных с необходимыми столбцами,
, затем мы можем агрегировать / суммировать представление по дате.

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create data table
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Name', 'Size'],
    ['2018-17-09', 'John', 500],
    ['2018-17-09', 'Doe', 1000],
    ['2018-17-09', 'Jack', 3000],
    ['2018-17-09', 'Choi', 700],
    ['2018-18-09', 'John', 6000],
    ['2018-18-09', 'Doe', 200],
    ['2018-18-09', 'Jack', 555],
    ['2018-19-09', 'John', 700],
    ['2018-19-09', 'Doe', 9000],
  ]);

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

  // column arrays
  var aggColumns = [];
  var viewColumns = [0];

  // build view & agg columns for each name
  data.getDistinctValues(1).forEach(function (name, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === name) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: name,
      type: 'number'
    });

    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: name,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(aggData, {
    isStacked: true
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...