2011-07-06 9 views
6

Quiero crear un gráfico para mostrar mi tiempo en una ejecución de 10k. Todo está funcionando como debería, el único problema que tengo es que quiero formatear cómo se muestra la hora.Escribir un formateador personalizado para Google Charts Api

Actualmente, la hora se muestra como un número que representa los segundos. Por ejemplo, una ejecución de 30 minutos se reduce a 10800 segundos. Los formateadores proporcionados por google cubren muchas cosas, pero no estoy muy contento con lo que ofrecen.

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

Lamentablemente no hay información sobre cómo implementar su propio formateador. ¿Hay alguna posibilidad de que pueda ampliar un formateador o hay una interfaz que deba implementarse?

Lo primero que haría sería analizar el número 10800 a un tiempo agradable como 30: 00.00 (30 minutos, 0 segundos, 0 milisegundos). Quizás esto ya sea posible con un formato de patrón, pero no veo cómo, ya que hay cálculos involucrados y no sé cómo implementar esto en el formato de patrón.

Gracias por su ayuda. Johnny

+0

Aunque no fue necesario aquí, hay una gran respuesta al escribir formateadores personalizados [aquí] (http://stackoverflow.com/questions/7286368/how-to-write-a-custom-formatter-for- google-datatables-for-use-on-visualization) – PerryW

Respuesta

3

Utilice un DateFormat con un patrón personalizado. Ej .:

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

La advertencia es que esto muestra la hora del día de un objeto Date JS, por lo que tendrá que proporcionar sus tiempos de ejecución como fechas JS. Por lo tanto, especifique la hora del día en la que se tomaron muestras de sus datos. O bien, si sólo quiere mostrar el tiempo relativo desde el inicio de su carrera, se podría hacer algo como esto:

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

... donde SampleTime es el momento de cada punto de muestra en milisegundos. (Esto solo establece el tiempo en milisegundos desde la medianoche 01/01/2000, por lo que la hora/minuto/segundo reflejará su tiempo de ejecución)

+0

ya que estoy usando un gráfico de tiempo anotado las cosas son bastante extrañas cuando se trata de posibles valores y. No pude usar los valores de fecha como valores y, por lo tanto, cambié a YUI 3 Chart Api. – Johnnycube

+0

¡el último bit es un buen truco! +1 por ingenio. –

+0

¿Cómo se transfiere 'nueva Fecha (nueva Fecha ('Jan 01 2000'). GetTime() + sampleTime)' as json? En mi aplicación, esa línea produce un desajuste de tipo al interpretarlo como una cadena. – Noz

0

Encontré un problema similar con un geochart donde tenía total de segundos y necesitaba mostrarlo como hh: mm: ss. No pude manejar eso, pero pude obtenerlo en mm: ss, que era aceptable

Convertí el total de segundos a un decimal como mm.ss. p.ej. 200 segundos es 03:20 así que denominó este como 3,20 y pasa el valor para el gráfico como que y luego en el GeoChart utilicé un formateador de número de usar: como el formateador decimal

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

El valor predeterminado es 2 por lo que apareció como 3:20.

Cuestiones relacionadas