当前位置： 文江博客 话题详情

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

发布于 2024-12-21 05:07:18 字数 343 浏览 2 评论 0 原文

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

我的数据采用 timeofday 格式，并且我使用 Google Charts [HH,MM,SS,MSEC] 格式向图表提供值作为持续时间。当图表呈现时，Y 轴打印为“HH:MM:SS”。我真的很想定制它，因为秒数几乎没有用，而且看起来比我想要的更混乱。

图表 API 表示您可以为列指定“模式”，我已指定“HH:MM”。然而，这似乎根本没有生效。有人有在 Google Charts 中格式化时间的经验并且知道如何做到这一点吗？

原文

I'm working with the Google Charts API to create a graph of a student's test-taking performance. On the X axis, the graph shows the days of the week. On the Y axis, the graph shows how long the student spent taking the exam. (The goal is for teachers to see if the student speeds up). However, I have a problem:

My data is in the timeofday format, and I'm providing values to the chart as time durations using the Google Charts [HH,MM,SS,MSEC] format. When the chart renders, the Y axis is printed as "HH:MM:SS". I'd really like to customize that because the seconds are pretty useless and it looks messier than I'd like.

The Charts API says you can specify a "pattern" for a column, and I've specified "HH:MM". However, that doesn't seem to take effect at all. Anybody have experience formatting timeofday in Google Charts and know how to do this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

野の 2024-12-28 05:07:18

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

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

The format is buried deep in the API documentation. (http://code.google.com/apis/chart/interactive/docs/reference.html). It is about quarter way down, it says:

If the column type is 'timeofday', the value is an array of four
numbers: [hour, minute, second, milliseconds].

回复 原文
清音悠歌 2024-12-28 05:07:18

一言以蔽之：以下网址是当天股票价格的完整工作版本，可以在“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:mm 的格式化 hAxis，即 18:00 表示下午 6:00。
  • 使用日期和时间以及股票价格格式化图表中的数据（将鼠标悬停在数据图上）。
  • 给出图形网格线。

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

More than words can say: The followingURL is a full working version for Stockprices during the days, and can be found at 'http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html'
Since a complete listing can not be posted correctly I only give the important parts:

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

The example will:

  • Make a formatted hAxis with format HH:mm i.e. 18:00 for 6:00 PM.
  • Formats the data in the graph (hover over the data-plots) with day and time and the stock price.
  • Gives the graph gridlines.

I hope this example makes it clear how to handle the data in a correct way.

回复 原文
眼泪淡了忧伤 2024-12-28 05:07:18

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

In chart the options object you could set the vAxis object with the field format and provide a string with the pattern you want to use here's an example:

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"}}
  );

Look at the vAxis object.

For the string format you should look to http://userguide.icu-project.org/formatparse/datetime to build you the pattern you prefer.

回复 原文
天涯离梦残月幽梦 2024-12-28 05:07:18

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

要摆脱秒，您可以设置 Y 轴的格式，如下所示：

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

You can use the hAxis.format or vAxis.format option. This allows you to specify a format string, where you use placeholder letters for different parts of your timeofday

To get rid of the seconds, you can set the format of the Y Axis like this:

  var options = {
    vAxis: { format: 'hh:mm' }
  };
回复 原文
~没有更多了~

关于作者

笑梦风尘

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

燃烧我的卡路李先生

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

∞梦里开花

文章 0 评论 0

qq_IklFPL

文章 0 评论 0

迷途知返

文章 0 评论 0

深海不蓝

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文