自定义 Google 条形图答案

【问题标题】：Customise Google Bar Charts自定义 Google 条形图
【发布时间】：2016-11-26 16:47:57
【问题描述】：

我目前使用以下代码使用 Google Charts 可视化位置和时间数据集（通过减去两个纪元时间，即毫秒来测量）。但是，我希望为用户提供以不同比例查看图表的选项，即。以毫秒、秒或分钟为单位。我该怎么做？

<!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>

<style>
#main { 
    width: 100%;
    margin: 0 auto;
}
#crt_ertdlyYY    {
    width: 50%px;
    height: 400px;
    float: left;
    display: inline-block;
}

#outsidePie  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
    display: inline-block;
}
</style>

<script type="text/javascript">
function drawVisualization() {
   $.get("bg_extracted_times.csv", function(csvString) {
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
        var data = new google.visualization.arrayToDataTable(arrayData);
        var aggData = google.visualization.data.group(
            data,
            [{
                column: 0,
                modifier: function (value) {
                    return value.toLowerCase();
                },
                type: 'string',
                label: 'Location'
            }],
            [{
                column: 1,
                aggregation: google.visualization.data.sum,
                type: 'number',
                label: 'Time (secconds)'
            }]
        );
      var crt_ertdlyYY = new google.visualization.ChartWrapper({
         chartType: 'BarChart',
         containerId: 'crt_ertdlyYY',
         dataTable: aggData,
         options:{
            title: 'Room Occupancy for 20:82:c0:d9:6c:4b',
            titleTextStyle : {color: 'grey', fontSize: 16},
            bar: {groupWidth: "95%"},
            width:600,
            height:600,
            pieStartAngle: 0,
            is3D: true,
            legend:false,
         }
      });
      crt_ertdlyYY.draw();
   });
}
google.setOnLoadCallback(drawVisualization)
</script>

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

我希望创建类似 this 的选项，其中选项是分钟、秒或毫秒。

【问题讨论】：

标签： javascript charts google-visualization data-visualization

【解决方案1】：

您可以使用自定义 aggregation 函数来返回所需的比例

假设 csv 中的当前列代表毫秒

通过除以1000很容易转换为秒
或分钟除以 (1000 * 60)

您可以为每个添加一列到aggData...

var aggData = google.visualization.data.group(
  data,
  [{
    column: 0,
    modifier: function (value) {
      return value.toLowerCase();
    },
    type: 'string'
  }],
  [
    {
      column: 1,
      aggregation: getSeconds,  // <-- seconds
      type: 'number',
      label: 'Total (Seconds)'
    },
    {
      column: 1,
      aggregation: getMinutes,  // <-- minutes
      type: 'number',
      label: 'Total (Minutes)'
    }
  ]
);

function getSeconds(values) {
  var sum = 0;
  values.forEach(function (value) {
    sum += value;
  });
  return sum / 1000;
}

function getMinutes(values) {
  var sum = 0;
  values.forEach(function (value) {
    sum += value;
  });
  return sum / (1000 * 60);
}

然后使用DataView 显示用户选择的列...

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

// view with seconds
view.setColumns([0, 1]);

// or view with minutes
view.setColumns([0, 2]);

也

需要使用新库...
<script src="https://www.gstatic.com/charts/loader.js"></script>

根据release notes...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载器。

这只会改变load语句，从...
google.load('visualization', '1', { packages: ['corechart', 'controls'] });

到...
google.charts.load('current', { packages: ['corechart', 'controls'] });

您可以将callback 直接添加到load 语句中

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart', 'controls']
});

【讨论】：

数据视图应该放在哪里？
在图表上使用它，代替aggData
另外，我认为在第一个块中显示分钟的列应该是两个，但是我无法编辑它。
每当我尝试运行 getSecconds 和 getMinutes 函数时，都会收到有关缺少括号的语法错误，但我看不到任何错误。有什么想法吗？
抱歉，每个forEach 的参数中的“函数”一词拼写错误——至于列引用 2，源数据中只有两列，两者的源列getSeconds 和 getMinutes 应该是 1