Google Charts API - 列模式和“TimeOfDay”数据类型

我正在使用Google Charts API来创建学生测试性能的图表。在X轴上，图表显示一周中的几天。在Y轴上，图表显示了学生花了多长时间参加考试。（目标是让教师看看学生是否加快速度）。然而，我有一个问题：Google Charts API - 列模式和“TimeOfDay”数据类型

我的数据是日期格式，我使用Google Charts [HH，MM，SS，MSEC]格式将时间值提供给图表。当图表呈现时，Y轴将打印为“HH：MM：SS”。我真的想定制，因为秒是非常无用的，它看起来比我想要的更混乱。

Charts API表示您可以为列指定“模式”，并且指定了“HH：MM”。但是，这似乎并没有生效。任何人都有经验格式化在谷歌图表timeofday并知道如何做到这一点？

来源

2011-12-13 Ben Gotow

我他坚持着同样的问题。另外，我还想以自定义格式显示图例值，但尚未找到方法。 – Gaurav 2012-12-20 06:41:05

该格式深藏在API文档中。（http://code.google.com/apis/chart/interactive/docs/reference.html）。这是约四分之一的方式向下，它说：

如果列类型是“的TimeOfDay”，该值是四个数字的阵列：[小时，分钟，秒，毫秒]。

来源

2012-02-08 18:11:38 Distec

OP已经提到他正在将一个数组中的时间值 – Gaurav 2012-12-20 06:42:24

在图表选项对象，你可以与现场格式设置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来建立你喜欢的模式。

来源

2013-05-24 18:49:30 dmiranda2791

超过的话可以说：The followingURL是在天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>

示例将：

使与格式HH格式化hAxis：毫米即18:00下午6:00。
使用日期和时间以及股票价格格式化图形中的数据（将鼠标悬停在数据图上）。
给出图形网格线。

我希望这个例子清楚地说明了如何以正确的方式处理数据。

来源

2014-07-03 14:05:24 Harm

您可以使用hAxis.format或vAxis.format选项。这允许您指定格式字符串，在您使用占位符信你的TimeOfDay的不同部分

为了摆脱秒，可以设置y轴的这样的格式：

var options = { 
    vAxis: { format: 'hh:mm' } 
    };

来源

2017-10-16 15:41:53 Laiacy

Google Charts API - 列模式和“TimeOfDay”数据类型

回答

相关问题