我正在使用 Google Charts API 创建学生考试成绩图表。在 X 轴上，图表显示一周中的天数。在 Y 轴上，图表显示学生参加考试的时间。 （目标是让老师看看学生是否加快了速度）。但是，我有一个问题：
我的数据采用时间格式，并且我使用 Google Charts [HH,MM,SS,MSEC] 格式为图表提供值作为持续时间。当图表呈现时，Y 轴打印为“HH:MM:SS”。我真的很想自定义它，因为秒数毫无用处，而且看起来比我想要的更混乱。
图表 API 说您可以为列指定“模式”，而我指定了“HH:MM”。但是，这似乎根本没有生效。任何人都有在谷歌图表中格式化时间的经验并且知道如何做到这一点？
【问题讨论】：
标签： google-visualization timeofday
该格式深藏在 API 文档中。 （http://code.google.com/apis/chart/interactive/docs/reference.html）。它大约下降了四分之一，它说：
如果列类型为'timeofday'，则值为一个由四个组成的数组 数字：[小时、分钟、秒、毫秒]。
【讨论】：
言外之意：以下网址是 Stockprices 在白天的完整工作版本，可以在“http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html”找到 由于无法正确发布完整列表，我只给出重要部分：
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('datetime', 'Time');
dataTable.addColumn('number', 'Price (Euro)');
dataTable.addRows([
[new Date(2014, 6, 2, 9, 0, 0, 0), 21.40],
[new Date(2014, 6, 2, 11, 0, 0, 0), 21.39],
[new Date(2014, 6, 2, 13, 0, 0, 0), 21.20],
[new Date(2014, 6, 2, 15, 0, 0, 0), 21.22],
[new Date(2014, 6, 2, 17, 0, 0, 0), 20.99],
[new Date(2014, 6, 2, 17, 30, 0, 0), 21.03],
[new Date(2014, 6, 3, 9, 0, 0, 0), 21.05],
[new Date(2014, 6, 3, 11, 0, 0, 0), 21.07],
[new Date(2014, 6, 3, 13, 0, 0, 0), 21.10],
[new Date(2014, 6, 3, 15, 0, 0, 0), 21.08],
[new Date(2014, 6, 3, 17, 0, 0, 0), 21.05],
[new Date(2014, 6, 3, 17, 30, 0, 0), 21.00],
[new Date(2014, 6, 4, 9, 0, 0, 0), 21.15],
[new Date(2014, 6, 4, 11, 0, 0, 0), 21.17],
[new Date(2014, 6, 4, 13, 0, 0, 0), 21.25],
[new Date(2014, 6, 4, 15, 0, 0, 0), 21.32],
[new Date(2014, 6, 4, 17, 0, 0, 0), 21.35],
[new Date(2014, 6, 4, 17, 30, 0, 0), 21.37],
]);
// Instantiate and draw our chart, passing in some options.
// var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var options = {
title : 'AEX Stock: Nationale Nederlanden (NN)',
width : 1400,
height : 540,
legend : 'true',
pointSize: 5,
vAxis: { title: 'Price (Euro)', maxValue: 21.50, minValue: 20.50 },
hAxis: { title: 'Time of day (Hours:Minutes)', format: 'HH:mm', gridlines: {count:9} }
};
var formatNumber = new google.visualization.NumberFormat(
{prefix: '', negativeColor: 'red', negativeParens: true});
var formatDate = new google.visualization.DateFormat(
{ prefix: 'Time: ', pattern: "dd MMM HH:mm", });
formatDate.format(dataTable, 0);
formatNumber.format(dataTable, 1);
chart.draw(dataTable, options);
} // drawChart
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
示例将：
我希望这个例子能说明如何以正确的方式处理数据。
【讨论】：
在图表选项对象中，您可以使用字段 format 设置 vAxis 对象，并提供带有您要使用的模式的字符串，这是一个示例：
new google.visualization.BarChart(document.getElementById('visualization'));
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year", format: "yy"},
hAxis: {title: "Cups"}}
);
查看 vAxis 对象。
对于字符串格式，您应该查看http://userguide.icu-project.org/formatparse/datetime 来构建您喜欢的模式。
【讨论】：
您可以使用 hAxis.format 或 vAxis.format 选项。这允许您指定格式字符串，您可以在其中使用占位符字母表示您的时间的不同部分
为了摆脱秒，您可以像这样设置 Y 轴的格式：
var options = {
vAxis: { format: 'hh:mm' }
};
【讨论】：