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

发布于 2024-11-18 17:27:27 字数 547 浏览 1 评论 0原文

我想创建一个图表来显示我 10k 跑步的时间。一切都按预期工作,我遇到的唯一问题是,我想格式化时间的显示方式。

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

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

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

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

感谢您的帮助。 约翰尼

I want to create a chart to display my time over a 10k run. Everything is working as it should, the only problem that I have is, that I want to format how the time is displayed.

Currently the time is displayed as a number which represents the seconds. For example a 30 minute run comes down to 10800 seconds. The formatters provided by google do cover a lot of stuff, but I'm not really happy with what they provide.

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

Sadly there is no information on how to implement your own formatter. Is there any chance I can extend a formatter or is there an interface that needs to be implemented?

The first thing I would do would do parse the number 10800 to a nice time like 30:00.00 (30 minutes, 0 seconds, 0 millisecons).
Maybe this is already possible with a patternformatter, but i don't see how, as there is calculating involved and don't know how to implement this in the patternformatter.

Thank you for your help.
Johnny

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

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

发布评论

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

评论(2

猥︴琐丶欲为 2024-11-25 17:27:27

使用具有自定义模式的 DateFormat。例如:

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

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

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

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

Use a DateFormat with a custom pattern. E.g.:

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

The caveat is that this displays the time-of-day of a JS Date object, so you'll need to provide your run times as JS dates. So either specify the actual time-of-day at which your data was sampled. Or, if you want to just show the relative time since the start of your run, you could do something like this:

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

... where sampleTime is the time of each sample point in milliseconds. (This just sets the time as milliseconds since midnight 01/01/2000, so the hour/minute/second will reflect your run time)

情痴 2024-11-25 17:27:27

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

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

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

默认小数位数为 2,因此它显示为 3 :20。

Came across a similar issue with a geochart where had total seconds and needed to show it as hh:mm:ss. Couldn't manage that but I was able to get it to mm:ss which was acceptable

I converted the total seconds to a decimal as mm.ss. e.g. 200 seconds is 3:20 so I labelled this as 3.20 and passed the value to the chart as that and then on the geochart I used a number formatter to use : as the decimal formatter

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

The default decimal places is 2 so it appeared as 3:20.

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