javascript - graficas - highcharts line

personalizar la información sobre herramientas de Highcharts para mostrar la fecha y hora

Question

Estoy desarrollando un proyecto que se espera que muestre este gráfico: http://jsfiddle.net/Kc23N/

Cuando hago clic en un punto (información sobre herramientas), quiero mostrar una fecha comprensible, no el valor en milisegundos.

Creo que necesita cambiar esta pieza de código:

tooltip: {
      headerFormat: ''<b>{series.name}</b><br>'',
      pointFormat: ''{point.x} date, {point.y} Kg'',                        
}

¿como lo hago? cualquier tipo de ayuda es apreciada.

Gracias

Answer 1

Debe devolver una fecha formateada en la información sobre herramientas mediante el formateador ToolTip.

Aquí está la API de formateador ToolTip para su referencia.

Para formatear la parte de fecha, puede hacer uso de Highcharts.dateFormat()

El formato es un subconjunto de los formatos para la función strftime de PHP .

También puede consultar el tiempo de PHP''s strftime más formatos de fecha.

Me las arreglé para formatear su información sobre herramientas como a continuación.

  tooltip: {
                formatter: function() {
                    return  ''<b>'' + this.series.name +''</b><br/>'' +
                        Highcharts.dateFormat(''%e - %b - %Y'',
                                              new Date(this.x))
                    + ''  <br/>'' + this.y + '' Kg.'';
                }
            }

Answer 2

Puede usar moment.js para obtener los valores formateados, pero Highcharts tiene su propia funcionalidad de formato de fecha que sería más idiomática con Highcharts. Se puede adjuntar a la opción de información sobre herramientas en el constructor de Highcharts de la siguiente manera:

        tooltip: {
            formatter: function() {
                return  ''<b>'' + this.series.name +''</b><br/>'' +
                    Highcharts.dateFormat(''%e - %b - %Y'',
                                          new Date(this.x))
                + '' date, '' + this.y + '' Kg.'';
            }
        }

También puede agregar el objeto dateTimeLabelFormats con las opciones que necesita para sus fechas, bajo xAxis.

Hice este ejemplo con tu código

Answer 3

Puede usar el filtro de plantilla {value:%Y-%m-%d} .

Para un ejemplo:

headerFormat: ''<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>''

Answer 4

Debe usar xDateFormat en la información sobre herramientas para personalizar su fecha de formato
http://api.highcharts.com/highcharts#tooltip.xDateFormat

sample:
tooltip: {
           xDateFormat: ''%Y-%m-%d''
         },