[英]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.