为谷歌图表Api编写一个自定义格式化程序

Write a custom formatter for Google Charts Api

本文关键字：一个 自定义 程序 格式化 谷歌 Api      更新时间：2023-09-26

我想创建一个图表来显示我在10公里跑步中的时间。一切都正常工作，我唯一的问题是，我想格式化时间的显示方式。

当前时间显示为表示秒数的数字。例如，30分钟的跑步时间减少到10800秒。谷歌提供的格式化程序确实涵盖了很多内容，但我对它们提供的内容并不满意。

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

遗憾的是，没有关于如何实现自己的格式化程序的信息。我是否有机会扩展格式化程序，或者是否有需要实现的接口？

我要做的第一件事是将数字10800解析为一个不错的时间，比如30:00.00(30分0秒0毫秒(。也许这在模式格式化程序中已经是可能的，但我不知道如何实现，因为这涉及到计算，也不知道如何在模式格式化器中实现。

谢谢你的帮助。Johnny

使用带有自定义模式的DateFormat。例如：

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

需要注意的是，这显示了JS Date对象的一天中的时间，因此您需要将运行时间提供为JS日期。因此，指定一天中对数据进行采样的实际时间。或者，如果你只想显示自跑步开始以来的相对时间，你可以这样做：

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

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

遇到了一个类似的问题，即地理图的总秒数为hh:mm:ss。无法做到这一点，但我能够将其发送到mm:ss，这是可以接受的

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

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

默认的小数位数为2，因此显示为3:20。

相关文章：