[英]Customise Google Bar Charts
我目前使用以下代码使用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>
<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>
我希望创建这样的内容 ,其中的选项是分钟,秒秒或毫秒。
您可以使用自定义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>
根据发行说明 ...
可以通过
jsapi
加载程序保留的Google图表版本不再保持一致更新。 从现在开始,请使用新的静态加载器。
这只会更改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']
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.