[英]Showing duration in Google charts vertical axis
使用谷歌图表,我需要以 hh:mm 格式在垂直轴上绘制持续时间。 由于小时值可以大于 24, timeofday
是不合适的。
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('timeofday', 'Duration');
data.addRows([
['Me', [23,59,0]],
['My Boss', [47,59,0]]
]);
var options = {
'title': 'How Long We Ate Pizza',
'width': 400,
'height': 300,
'vAxis': { 'format':'HH:mm'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
图表显示了我的老板的23:59
。 如果我将它格式化为字符串,我得到
Data column(s) for axis #0 cannot be of type string
错误Data column(s) for axis #0 cannot be of type string
。
有什么办法可以处理吗?
从时间值动态构建图表,
首先使用数据视图将 timeofday 转换为分钟
// use calculated column to convert time of day to duration in minutes
var view = new google.visualization.DataView(data);
view.setColumns([0, {
calc: function (dt, row) {
// initialize variables
var minutesFormat = '';
var minutesValue = 0;
var timeofday = dt.getValue(row, 1);
// calculate total minutes
timeofday.forEach(function (value, index) {
// determine time part
switch (index) {
// hours
case 0:
minutesFormat += value;
minutesValue += (value * 60);
break;
// minutes
case 1:
minutesFormat += ':' + value;
minutesValue += value;
break;
// seconds
case 2:
minutesValue += (value / 60);
break;
// miliseconds
case 3:
minutesValue += (value / 60000);
break;
}
});
// build object notation
return {
v: minutesValue,
f: minutesFormat
};
},
label: data.getColumnLabel(1),
type: 'number'
}]);
然后对于 y 轴刻度,
首先,获取最大分钟数。
// get range of duration in muntes
var range = view.getColumnRange(1); // range.max
然后我们需要确定四舍五入到 (10, 100, 1000) 的小时数
// determine max number of hours for y-axis
var maxHours = Math.ceil(range.max / 60);
var roundTo = parseInt('1' + Array(maxHours.toFixed(0).length).join('0'));
var maxHours = Math.ceil((range.max / 60) / roundTo) * roundTo;
然后建立我们的蜱...
// build y-axis ticks
var ticks = [];
for (var hour = 0; hour <= maxHours; hour += roundTo) {
ticks.push({
v: hour * 60,
f: hour + ':00'
});
}
请参阅以下工作片段...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('timeofday', 'Duration'); data.addRows([ ['Me', [23,59,0]], ['My Boss', [47,59,0]] ]); // use calculated column to convert time of day to duration in minutes var view = new google.visualization.DataView(data); view.setColumns([0, { calc: function (dt, row) { // initialize variables var minutesFormat = ''; var minutesValue = 0; var timeofday = dt.getValue(row, 1); // calculate total minutes timeofday.forEach(function (value, index) { // determine time part switch (index) { // hours case 0: minutesFormat += value; minutesValue += (value * 60); break; // minutes case 1: minutesFormat += ':' + value; minutesValue += value; break; // seconds case 2: minutesValue += (value / 60); break; // miliseconds case 3: minutesValue += (value / 60000); break; } }); // build object notation return { v: minutesValue, f: minutesFormat }; }, label: data.getColumnLabel(1), type: 'number' }]); // get range of duration in muntes var range = view.getColumnRange(1); // determine max number of hours for y-axis var maxHours = Math.ceil(range.max / 60); var roundTo = parseInt('1' + Array(maxHours.toFixed(0).length).join('0')); var maxHours = Math.ceil((range.max / 60) / roundTo) * roundTo; // build y-axis ticks var ticks = []; for (var hour = 0; hour <= maxHours; hour += roundTo) { ticks.push({ v: hour * 60, f: hour + ':00' }); } var options = { title: 'How Long We Ate Pizza', width: 400, height: 300, vAxis: { ticks: ticks } }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(view, options); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
感谢 WhiteHat 评论和这个答案。
添加值和刻度时使用对象表示法。
data.addRows([
['Me', { v: 1439, f: '23:59' }],
['My Boss', { v: 2879, f: '47:59' }]
]);
var options = {
'title': 'How Long We Ate Pizza',
'width': 400,
'height': 300,
'vAxis': {
ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }]
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.