javascript Google Charts 中的日期时间数据更改为 24 小时格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18639517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change to a 24 hour format for datetime data in Google Charts
提问by simen-andresen
Im plotting data with javascript using the Google Charts API. The default format for datetime data view is the 12 hour am/pm format. How can I change the view to show a 24 hour format? An example of code is shown below, where the default datetime format is used:
我使用 Google Charts API 使用 javascript 绘制数据。日期时间数据视图的默认格式是 12 小时 am/pm 格式。如何更改视图以显示 24 小时格式？下面显示了一个代码示例，其中使用了默认的日期时间格式：
var price_data = new google.visualization.DataTable();
price_data.addColumn('datetime','Time');
price_data.addColumn('number','Price [?re/KWh]');
price_data.add_row([new Date(2013,23,3,4,5),3])
price_data.add_row([new Date(2013,1,5,4,5),9])
var options = {
title: 'Price'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
回答by asgallant
You need to format the datetimes using a DateFormatter.
您需要使用DateFormatter格式化日期时间。
// format dates
// ex: "August 5, 2013 1:45 PM" formatted as "05/08/2013 13:45"
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
You can format the axis labels by setting the hAxis.formatoption:
您可以通过设置hAxis.format选项来格式化轴标签：
var options = {
hAxis: {
format: 'dd/MM/yyyy HH:mm'
}
title: 'price'
};
The date formats support most of the ISO date formatting patterns.
日期格式支持大多数ISO 日期格式模式。
回答by Yogesh D
You can simply pass this in your options,
你可以简单地在你的选项中传递这个，
hAxis: {
title: 'Time of day',
format: 'hh:mm a'
}
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[[8, 30, 45], 5],
[[9, 0, 0], 10],
[[10, 0, 0, 0], 12],
[[10, 45, 0, 0], 13],
[[11, 0, 0, 0], 15],
[[12, 15, 45, 0], 20],
[[13, 0, 0, 0], 22],
[[14, 30, 0, 0], 25],
[[15, 12, 0, 0], 30],
[[16, 45, 0], 32],
[[16, 59, 0], 42]
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
hAxis: {format:'hh:mm a'}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
