自定义Google条形图

Question

I currently use the below code to visualise a dataset of locations and times (measured by subtracting two epoch times, ie milliseconds) using Google Charts. 我目前使用以下代码使用Google图表可视化位置和时间（通过减去两个纪元时间（即毫秒）来衡量）的数据集。 However, I wish to give the user the option to view the chart at different scales ie. 但是，我希望为用户提供以不同比例查看图表的选项。 in milliseconds, seconds or minutes. 以毫秒，秒或分钟为单位。 How can I do this? 我怎样才能做到这一点？

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

I am hoping to create something like this where the options are minutes, secconds or millisecconds. 我希望创建这样的内容，其中的选项是分钟，秒秒或毫秒。

Answer 1

you could use a custom aggregation function to return the desired scale 您可以使用自定义aggregation函数返回所需的比例

assuming the current column from the csv represents milliseconds 假设csv中的当前列表示毫秒

it is easy to convert to seconds by dividing by 1000 除以1000即可轻松转换为秒
or minutes via dividing by (1000 * 60) 或以(1000 * 60)除以分钟

you can add a column for each to aggData ... 您可以为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);
}

then use a DataView to display the column selected by the user... 然后使用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]);

ALSO 也

need to use new library... 需要使用新的库...
<script src="https://www.gstatic.com/charts/loader.js"></script>

according to the release notes ... 根据发行说明 ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. 可以通过jsapi加载程序保留的Google图表版本不再保持一致更新。 Please use the new gstatic loader from now on. 从现在开始，请使用新的静态加载器。

this will only change the load statement, from... 这只会更改load语句，从...
google.load('visualization', '1', { packages: ['corechart', 'controls'] });

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

and you can add the callback directly to the load statement 您可以将callback直接添加到load语句

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

自定义Google条形图

问题描述

1 个解决方案

解决方案1
0 2016-11-26 17:15:01

自定义Google条形图

问题描述

1 个解决方案

解决方案1 0 2016-11-26 17:15:01

解决方案1
0 2016-11-26 17:15:01