为Google Charts Api编写自定义格式化程序

Question

我想创建一个图表来展示我的10公里跑步时间。一切都按照预期工作，唯一的问题是我想格式化时间的显示方式。目前时间以代表秒数的数字形式显示。例如，30分钟跑步需要10800秒。Google提供的格式化程序覆盖了很多内容，但我对它们提供的内容不是很满意。

http://code.google.com/apis/chart/interactive/docs/reference.html#formatters

很遗憾，没有关于如何实现自己的格式化程序的信息。我能扩展格式化程序吗？还是需要实现一个接口？

首先，我会将数字10800解析为一个好看的时间，例如30:00.00（30分钟，0秒，0毫秒）。也许这已经可以通过PatternFormatter实现，但我不知道如何实现计算，也不知道如何在PatternFormatter中实现。

谢谢你的帮助。 Johnny

- Johnnycube

---

虽然这里不必要，但是在这里有一篇关于编写自定义格式化程序的绝佳答案。 - PerryW

你能发布一下结果吗？ - Rodrigo Butzke

Answer 1

使用自定义格式的日期格式。例如：

google.visualization.DateFormat({pattern: "mm:ss.SSS"});

需要注意的是，这会显示JS Date对象的时间，因此您需要将运行时间作为JS日期提供。因此，要么指定实际采样数据的时间。或者，如果您只想显示自运行开始以来的相对时间，可以执行以下操作：

new Date(new Date('Jan 01 2000').getTime() + sampleTime)

其中，sampleTime是每个样本点的时间，以毫秒为单位。(这只是将时间设置为自2000年1月1日午夜以来的毫秒数，因此小时/分钟/秒将反映您的运行时间)

- broofa

---

由于我正在使用带注释的时间表，因此在可能的y值方面情况非常奇怪。我无法将日期值用作y值，因此切换到了YUI 3 Chart Api。 - Johnnycube

最后一部分是一个很好的技巧！对于创意加一分。 - Ben Gotow

你如何将 new Date(new Date('Jan 01 2000').getTime() + sampleTime) 作为 JSON 传递？在我的应用程序中，该行代码会产生类型不匹配的错误，因为它被解释为字符串。 - Noz

将源数据从数字更改为日期是一种选择。如果不可能或不喜欢这样做，可以使用自定义格式化程序和回调格式化函数，如https://dev59.com/jGw05IYBdhLWcg3wXAqF中所述。 - PaulH

Answer 2

遇到了一个类似的地理图表问题，其中有总秒数，需要将其显示为hh:mm:ss。无法实现这一点，但我能够将其转换为mm:ss，这是可以接受的。

我将总秒数转换为小数形式mm.ss。例如，200秒是3:20，所以我将其标记为3.20，并将该值作为图表的传递值，然后在地理图表上使用数字格式化程序来使用：作为小数格式化程序。

var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ':'
});

默认小数位为2，因此它显示为3：20。

- noelnoegdip