Napisz niestandardowy formant wykresów Google Api

Question

Chcę utworzyć wykres pokazujący mój czas w biegu 10k. Wszystko działa tak, jak powinno, jedynym problemem, jaki mam, jest to, że chcę sformatować sposób wyświetlania czasu.

Obecnie czas wyświetlany jest jako liczba reprezentująca sekundy. Na przykład 30-minutowy bieg sprowadza się do 10800 sekund. Formatery dostarczane przez google obejmują wiele rzeczy, ale nie jestem zadowolony z tego, co oferują.

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

Niestety nie ma informacji o tym, jak zaimplementować własną formatowania. Czy jest jakaś szansa na rozszerzenie formatyzatora lub czy istnieje interfejs, który musi zostać wdrożony?

Pierwszą rzeczą, jaką zrobiłbym, byłoby przeanalizowanie numeru 10800 w przyjemnym czasie, takim jak 30: 00.00 (30 minut, 0 sekund, 0 milisekund). Być może jest to już możliwe z wzorcem wzoru, ale nie rozumiem, jak to jest, ponieważ nie ma obliczeń i nie wiem, jak to zaimplementować we wzorcu wzoru.

Dziękuję za pomoc. Johnny

Answer 1

Użyj DateFormat z niestandardowym wzorem. Np .:

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

Zastrzeżenie jest to, że wyświetla Time-of-day z JS obiektu Date, więc trzeba zapewnić biegu razy terminach JS. Określ rzeczywistą porę dnia, z której pobrano próbki danych. Albo, jeśli chcesz po prostu pokazać czas względny od początku swojego biegu, można zrobić coś takiego:

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

... gdzie sampleTime jest czas każdego punktu próbki w milisekundach. (To ustawia czas jako milisekundę od północy 01/01/2000, więc godzina/minuta/sekunda będą odzwierciedlać czas pracy)

Answer 2

Przychodzi przez podobny problem z geochartem, który miał całkowite sekundy i potrzebował go pokazać as hh: mm: ss. Nie udało się tego, ale udało mi się go przekonwertować na mm: ss, który był akceptowalny.

Przekonwertowałem całkowitą liczbę sekund do dziesiętnej jako mm.ss. na przykład 200 sekund jest 03:20 więc to oznaczone jako 3.20 i zdał wartość na wykresie jako że a następnie na geochart użyłem numer formatowania użycia: jako formater dziesiętnych

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

Domyślne miejsc po przecinku jest 2, więc wyglądało to jak 3:20.