代码之家 › 专栏 › 技术社区 › Paul Chris Jones

在google中包含字符串列。可视化。数据组

google-visualization charts javascript

Paul Chris Jones · 技术社区 · 6 年前

我有一张基本上如下所示的桌子:

{"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'}]
);

Graph

1 回复 | 直到 6 年前

WhiteHat 6 年前

为了每个人都有单独的堆栈,
每个人都需要自己的数据表列或序列。

要转换给定的数据表,
按日期和人员列出第一组。
然后为每个人创建一个单独列的数据视图,
最后,按日期对所有列进行分组和求和。

请参阅以下工作片段,
该表显示了所需的布局。。。

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="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>