使用 Google 个图表自动组合值

Question

我目前有一个名为 test.csv 的数据集，其中包含以下列：

location time

它由多条记录组成，可能针对同一个位置。 IE。可能有两条记录，地点是巴黎，但时间不同，我想添加它们，然后将它们绘制成一条。

我希望在使用 Google 图表绘制条形图时将所有位置值相同的时间值组合起来。目前我已经写完了，但不确定如何继续：

<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320">

 <title>Google Graph and CSV</title>
 <meta name="description" content="test">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="jquery.csv.min.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript"> // load the visualisation API
  google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>

<script type="text/javascript">
function drawVisualization() {
   $.get("test.csv", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var data = new google.visualization.arrayToDataTable(arrayData);
      var crt_ertdlyYY = new google.visualization.ChartWrapper({
         chartType: 'BarChart',
         containerId: 'crt_ertdlyYY',
         dataTable: data,
         options:{
            title: 'Room Occupancy for',
            titleTextStyle : {color: 'grey', fontSize: 16},
            bar: {groupWidth: "95%"},
            legend: { position: "none" },
            width:400,
            height:600,
         }
      });
      crt_ertdlyYY.draw();
   });
}
google.setOnLoadCallback(drawVisualization)
</script>

<div id="crt_ertdlyYY"></div>

这会产生以下可视化结果：Output of code

Answer 1

使用 group() 方法汇总每个位置的总数

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

然后使用图表上的分组数据

var crt_ertdlyYY = new google.visualization.ChartWrapper({
   chartType: 'BarChart',
   containerId: 'crt_ertdlyYY',
   dataTable: aggData,  // <-- use agg data
   options:{
      title: 'Room Occupancy for',
      titleTextStyle : {color: 'grey', fontSize: 16},
      bar: {groupWidth: "95%"},
      legend: { position: "none" },
      width:400,
      height:600,
   }
});

编辑

一个 modifier 函数可用于合并具有不同 案例的位置

var aggData = google.visualization.data.group(
  data,
  [{
    column: 0,
    modifier: function (value) {
      return value.toUpperCase();
    },
    type: 'string',
    label: 'Location'
  }],
  [{
    column: 1,
    aggregation: google.visualization.data.sum,
    type: 'number',
    label: 'Total'
  }]
);

使用 Google 个图表自动组合值

Automatically Combine Values using Google Charts

javascript

charts

data-visualization

google-visualization