Question

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

我的数据采用timeofday格式，我使用Google Charts [HH，MM，SS，MSEC]格式为图表提供值作为持续时间。当图表呈现时，Y轴打印为“HH：MM：SS”。我真的很喜欢自定义，因为秒数很无用，而且看起来比我想要的更麻烦。

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

Answer 1

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

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

Answer 2

除了单词之外，还可以说：以下URL是Stockprices的完整工作版本，可以在＆＃39; http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html＆＃39; 由于无法正确发布完整列表，因此我只提供重要部分：

// 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：mm的格式化hAxis，即下午6:00的18:00。
使用日期和时间以及股票价格格式化图表中的数据（将鼠标悬停在数据图上）。
给出图表网格线。

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

Answer 3

在图表中，您可以使用字段 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以构建您喜欢的模式。

Answer 4

您可以使用hAxis.format或vAxis.format选项。这允许您指定格式字符串，其中您使用占位符字母表示时间的不同部分

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

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

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

4 个答案: