Google visualization 谷歌图表API-列模式和；“每日时间”；数据类型_Google Visualization_Timeofday

Google visualization 谷歌图表API-列模式和；“每日时间”；数据类型

google-visualization

Google visualization 谷歌图表API-列模式和；“每日时间”；数据类型,google-visualization,timeofday,Google Visualization,Timeofday,我正在使用GoogleCharts API创建学生考试成绩的图表。在X轴上，图表显示了一周中的几天。在Y轴上，图表显示了学生参加考试的时间。（目标是让老师看看学生是否加速）。但是，我有一个问题：我的数据是timeofday格式，我使用Google图表[HH，MM，SS，MSEC]格式向图表提供值作为持续时间。图表渲染时，Y轴打印为“HH:MM:SS”。我真的很想定制它，因为秒是非常无用的，它看起来比我想要的更混乱 Charts API说可以为列指定“模式”，我已经指定了“HH:MM”。然而，这

我正在使用GoogleCharts API创建学生考试成绩的图表。在X轴上，图表显示了一周中的几天。在Y轴上，图表显示了学生参加考试的时间。（目标是让老师看看学生是否加速）。但是，我有一个问题：

我的数据是timeofday格式，我使用Google图表[HH，MM，SS，MSEC]格式向图表提供值作为持续时间。图表渲染时，Y轴打印为“HH:MM:SS”。我真的很想定制它，因为秒是非常无用的，它看起来比我想要的更混乱

Charts API说可以为列指定“模式”，我已经指定了“HH:MM”。然而，这似乎根本没有起作用。任何人都有在谷歌图表中格式化一天时间的经验，并且知道如何做吗？

这种格式深深地埋藏在API文档中。(http://code.google.com/apis/chart/interactive/docs/reference.html). 它大约向下四分之一，上面写着：

如果列类型为'timeofday'，则值为四个数组数字：[小时、分钟、秒、毫秒]

在图表选项对象中，您可以使用字段格式设置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"}}
  );

看这个动词宾语

对于字符串格式，您应该寻求建立您喜欢的模式。

不言而喻：以下URL是股票价格的完整工作版本，可在“”中找到由于完整的列表无法正确发布，我只给出重要部分：

// 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>

//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var dataTable=new google.visualization.dataTable（）；
addColumn（'datetime'，'Time'）；
dataTable.addColumn（'编号'，'价格（欧元）'）；
dataTable.addRows([
[新日期（2014,6,2,9,0,0,0），21.40]，
[新日期（2014,6,2,11,0,0,0），21.39]，
[新日期（2014,6,2,13,0,0,0），21.20]，
[新日期（2014,6,2,15,0,0,0），21.22]，
[新日期（2014,6,2,17,0,0,0），20.99]，
[新日期（2014,6,2,17,30,0,0），21.03]，
[新日期（2014,6,3,9,0,0,0），21.05]，
[新日期（2014,6,3,11,0,0,0），21.07]，
[新日期（2014,6,3,13,0,0,0），21.10]，
[新日期（2014,6,3,15,0,0,0），21.08]，
[新日期（2014,6,3,17,0,0,0），21.05]，
[新日期（2014,6,3,17,30,0,0），21.00]，
[新日期（2014,6,4,9,0,0,0），21.15]，
[新日期（2014,6,4,11,0,0,0），21.17]，
[新日期（2014,6,4,13,0,0,0），21.25]，
[新日期（2014,6,4,15,0,0,0），21.32]，
[新日期（2014,6,4,17,0,0,0），21.35]，
[新日期（2014,6,4,17,30,0,0），21.37]，
]);
//实例化并绘制图表，传入一些选项。
//var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
变量选项={
标题：“AEX股票：荷兰国家航空公司（NN）”，
宽度：1400，
身高：540，
传说：“真的”，
点数：5，
vAxis:{title:'价格（欧元）'，最大值：21.50，最小值：20.50}，
hAxis:{title:'一天中的时间（小时：分钟）'，格式：'HH:mm'，网格线：{count:9}
};
var formatNumber=new google.visualization.NumberFormat(
{前缀：''，negativeColor:'red'，negativeParens:true}）；
var formatDate=new google.visualization.DateFormat(
{前缀：“时间：”，模式：“dd MMM HH:mm”，}）；
formatDate.format（数据表，0）；
formatNumber.format（数据表，1）；
图表绘制（数据表、选项）；
}//图纸

例如：

制作格式为HH:mm的格式化hAxis，即18:00，下午6:00
将图形中的数据格式化（将光标悬停在数据图上）并显示日期、时间和股票价格
给出图形的网格线

我希望这个示例能够清楚地说明如何正确处理数据。

您可以使用hAxis.format或vAxis.format选项。这允许您指定一个格式字符串，在该字符串中，您可以在一天的不同时间段使用占位符字母

要消除秒数，可以如下设置Y轴的格式：

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

我也有同样的问题。此外，我还想以自定义格式显示图例值，但还没有找到方法。OP已经提到他正在数组中传递时间值