問題描述
為 Google Charts Api 編寫自定義格式化程序 (Write a custom formatter for Google Charts Api)
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
‑‑‑‑‑
參考解法
方法 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)
方法 2:
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.
(by Johnnycube、broofa、noelnoegdip)