Включить строковый столбец в google.visualization.data.group

Question

Включить строковый столбец в google.visualization.data.group

1

У меня есть таблица, которая в основном выглядит так:

{"cols":[
    {"label":"Date","type":"date"},
    {"label":"Person","type":"string"},
    {"label":"Amount","type":"number"}],
"rows":[
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Mary"},{"v":6}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}],
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Richard"},{"v":3.5}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
    etc...
]}

Я хочу отобразить данные в виде диаграммы с разбивкой по областям. Дата будет на оси x, сумма будет на оси y, а категориями будут люди.

Здесь моя попытка группировать данные:

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 1, 'aggregation': ?, 'type': 'string'}],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

Моя проблема в том, что я не знаю, что поставить для "агрегации" для столбца 1. Я не могу использовать "sum" как строку, и, кроме того, он выдает ошибку "Все серии на данной оси должны быть из тот же тип данных ".

Я попробовал это:

var data = new google.visualization.data.group(
    data,
    [0,1],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

но это также вызывает ошибку "Все ряды на данной оси должны иметь один и тот же тип данных".

Если я оставил колонку 1 altogther, то график работает, но нет стекирования. Данные для всех людей просто сосредоточены.

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

Paul Jones 26 апр. 2018, в 21:02

Источник

Теги:

javascript

charts

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2018-04-26T17-03-00.000Z

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

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

см. следующий рабочий фрагмент,
таблица там, чтобы показать необходимый макет...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable({
    "cols": [
      {"label":"Date","type":"date"},
      {"label":"Person","type":"string"},
      {"label":"Amount","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"John"},{"v":18}]}
    ]
  });

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

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

  // sum column array
  var aggColumns = [];

  // use date as first view column
  var viewColumns = [0];

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

    // add sum column for each person
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: gender,
      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.AreaChart(document.getElementById('chart_div'));
  chart.draw(aggData, {
    isStacked: true
  });

  // draw table
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(aggData);
});

.dashboard {
  text-align: center;
}

.dashboard div {
  margin-bottom: 12px;
}

<script src="/loader.js"></script>
<div class="dashboard">
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>