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

标签 javascript api charts google-visualization

我想创建一个图表来显示我跑完 10k 的时间。一切正常,我唯一的问题是我想格式化时间的显示方式。

目前时间显示为代表秒数的数字。例如,30 分钟的运行会减少到 10800 秒。 google 提供的格式化程序确实涵盖了很多内容,但我对他们提供的内容并不满意。

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

遗憾的是,没有关于如何实现您自己的格式化程序的信息。我是否有机会扩展格式化程序或是否有需要实现的接口(interface)?

我要做的第一件事是将数字 10800 解析为一个不错的时间,例如 30:00.00(30 分钟 0 秒 0 毫秒)。 也许这已经可以通过 patternformatter 实现,但我不知道如何实现,因为涉及计算并且不知道如何在 patternformatter 中实现它。

感谢您的帮助。 强尼

最佳答案

使用 DateFormat与自定义模式。例如:

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

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

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

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

关于javascript - 为 Google Charts Api 编写自定义格式化程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6596233/

相关文章:

php - 时钟计数 javascript/php 错误

api - 我可以在 youtube 上上传视频并将其限制为只能在我的网站上观看吗?

android - 如何根据 IP 地址限制 Play 商店的发布 API?

Java生成原理图/图表,运行时编辑和打印选项

javascript - 一次加载多个 Google 图表时出错

javascript - 在 Chart.js 中,我想显示如下图所示的虚线网格线

javascript - react dnd 中的项目类型问题(不变违规 : item type must be defined)

Google map 的 JavaScript 问题

嵌入到 HTML 中的 Javascript 和 CSS 不起作用

android - 如何在 android 中使用 yelp 分享评论