根据我的经验，时间和持续时间给我带来了图表和 JavaScript 方面的麻烦。 我在 vAxis 上以 mm:ss 为单位绘制持续时间，在 hAxis 上绘制日期，并尝试扩展图表的最小值和最大值，使其超出上方和下方的数据点。 例如，我希望最短时间为 11:00，最长时间为 14:00。 但是，我无法做到这一点。 我读到一个建议（记不起 URL，如果它是 stackoverflow 并且现在找不到），我可以将 mm:ss 转换为整数秒，并将其用于最大值和最小值。当我这样做时，我收到此错误：“a.getTime 不是函数”。 我猜我的数字没有从我的谷歌表格中延续下来作为持续时间......也许只是一个字符串。 当然，当我在最大/最小中使用冒号时，我收到一个错误，它不期望出现“：”。
这是代码，该网站已经协助过一次。 如果删除“viewWindow”部分，它就可以正常工作。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// load google charts
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
// initialize query statement
var queryUri = 'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=';
// add select statement, set B as last column
var queryString = encodeURIComponent('SELECT A,D,B');
// initialize query
var query = new google.visualization.Query(queryUri + queryString);
// run query
query.send(function (response) {
// determine if error occurred
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// extract data from response
var data = response.getDataTable();
// need to create dataview to use column as annotation
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
// create options
var options = {
title: 'L\'s 2024 Cross Country Run Times',
width: 900,
height: 500,
trendlines: {
0: {
color: 'blue'
}
},
vAxis: {
format: 'mm:ss',
viewWindow : {min : 660,max : 840}
}
};
// draw chart
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
当查询返回数据时，Time 列默认作为日期时间列返回。
我们需要将列类型转换为timeofday
来自文档...
DataTable timeofday 列数据类型采用 3 或 4 个数字的数组，分别表示小时、分钟、秒和可选的毫秒。使用 timeofday 与使用 date 和 datetime 不同，因为这些值并不特定于日期，而 date 和 datetime 始终指定日期。
要将列转换为
timeofdayvar view = new google.visualization.DataView(data);
view.setColumns([0, { // <-- add calculation to convert datetime to timeofday
calc: function (dt, row) {
var rowDate = dt.getValue(row, 1);
var timeofday = [
rowDate.getHours(),
rowDate.getMinutes(),
rowDate.getSeconds()
];
return timeofday;
},
label: data.getColumnLabel(1),
type: 'timeofday'
}, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
然后我们可以将首选视图窗口表示为
timeofday viewWindow: {
min : [11, 0, 0],
max : [16, 0, 0]
}
但是，电子表格中的时间值的格式如下...
0:13:11
所以这看起来是 0 小时 13 分 11 秒。
我建议将时间值重新格式化为
13:11:00我已经使用时间值按原样创建了一个 JS Fiddle 用于示例目的，
使用以下视图窗口。
viewWindow: {
min : [0, 11, 0],
max : [0, 16, 0]
}
https://jsfiddle.net/WhiteHat/xcdb7o2k/16/
请参阅以下片段。
// load google charts
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
// initialize query statement
var queryUri = 'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=';
// add select statement, set B as last column
var queryString = encodeURIComponent('SELECT A,D,B');
// initialize query
var query = new google.visualization.Query(queryUri + queryString);
// run query
query.send(function (response) {
// determine if error occurred
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// extract data from response
var data = response.getDataTable();
// need to create dataview to use column as annotation
var view = new google.visualization.DataView(data);
view.setColumns([0, {
calc: function (dt, row) {
var rowDate = dt.getValue(row, 1);
var timeofday = [
rowDate.getHours(),
rowDate.getMinutes(),
rowDate.getSeconds()
];
return timeofday;
},
label: data.getColumnLabel(1),
type: 'timeofday'
}, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
// create options
var options = {
title: 'L\'s 2024 Cross Country Run Times',
width: 900,
height: 500,
trendlines: {
0: {
color: 'blue'
}
},
vAxis: {
format: 'mm:ss',
viewWindow: {
min : [11, 0, 0],
max : [16, 0, 0]
}
}
};
// draw chart
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>