php - graficos - highcharts json data example

Formato de tiempo con Highcharts

Question

Estoy usando Highcharts para mostrar algunos gráficos para mi proyecto.

Pero tengo algunos problemas para mostrar un gráfico de barras básico con solo TIME (no la fecha) en Yaxis. Busqué algunas soluciones pero no encontré la buena. Actualmente, pongo los datos en milisegundos.

Pero me da este resultado: http://s14.postimg.org/z4vissaht/Capture_d_cran_2013_05_31_21_24_01.png

Como puede ver, me dice "Fecha inválida" y se muestran milisegundos, pero me gustaría que fuera "00:00:00". En la parte inferior de la tabla, el tiempo está en buen formato, pero se restablece cada 24 horas, mientras que yo no lo quiero. Si milisegundos marca 62:00:00, quiero que se muestre así.

Realmente necesito ayuda, no sé cómo hacer eso.

Hay mi código jQuery:

$(''#chartTimeSpent'').highcharts({
            chart: {
                renderTo : ''chartTimeSpent'',
                type: ''bar''
            },
            title: {
                text: ''Time spent per technicians '' + dateInterval
            },

            xAxis: {
                categories: [ ''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'',''Department'', ],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''Time (hours)'',
                    align: ''high''
                },
                labels: {
                    overflow: ''justify''
                },
                type: ''datetime'',

                dateTimeLabelFormats : {
                second: ''%H:%M:%S'',
                minute: ''%H:%M:%S'',
                hour: ''%H:%M:%S'',
                day: ''%H:%M:%S'',
                week: ''%H:%M:%S'',
                month: ''%H:%M:%S'',
                year: ''%H:%M:%S''
            }
            },
            tooltip: {
                formatter: function() {
                    return ''''+
                        "" +
                        ''Time: ''+ Highcharts.dateFormat(''%H:%M:%S'', this.x);
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: ''vertical'',
                align: ''right'',
                verticalAlign: ''top'',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ''#FFFFFF'',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [

                {name: ''Someone'',
                     data: [300000 ,0,6720000 ,6600000 ,11400000 ,1500000 ,900000 ,0,0,300000 ,0,0, ] },{name: ''Someone'',
                     data: [2100000 ,1800000 ,1200000 ,3300000 ,60600000 ,0,13920000 ,5400000 ,18900000 ,300000 ,0,0, ] },{name: ''Someone'',
                     data: [9840000 ,223380000 ,300000 ,3120000 ,8760000 ,2460000 ,9300000 ,2820000 ,3960000 ,1320000 ,900000 ,540000 , ] },            ]
        });

EDITADO : último jsFiddle

Answer 1

EDITAR Basado en el resultado deseado: su principal problema es que tiene muchos errores js (comas adicionales, etc.). Reparado esos. Ahora, el motivo por el que su gráfico no se muestra (hasta donde puedo decir) es que su chart.title espera que se le chart.title una var ( text: ''Time spent per technicians '' + dateInterval ) y al menos en el jsFiddle y el código de ejemplo que le das no lo definen.

He actualizado un jsFiddle nuevo con lo que creo que es lo que quieres. Tenga en cuenta que los valores en su lista de tablas no coinciden con los tiempos de javascript en los datos de su serie.

Sus datos no contienen ningún valor de tiempo. Va a incluir eso en su serie de datos como [[time1, value], [time2, value]...] o va a necesitar asignar una posición de inicio para el ejeX ( inicio de punta ) y también decirle qué para cada incremento de punto de datos es ( pointInterval ) - suponiendo que sus datos se separan en el tiempo uniformemente - de esta manera:

plotOptions: {
            series: {
                pointStart: Date.UTC(2010, 0, 1),
                pointInterval: 24 * 3600 * 1000 // one day
            }
        },

Muy recomendable que lea la documentación de la API que se encuentra aquí .

Respuesta editada:

Tiene muchas otras cosas que están mal con su tabla aquí: Your yAxis no puede ser de type: ''datetime'' . A pesar de que piensas que los tiempos están trazados en el eje y porque esta es una tabla BAR, sigue siendo el eje x. Elimine los elementos type y dateTimeLabelFormats de yAxis y colóquelos en el eje x.

Elimine las categories: sección para su xAxix. No puede mezclar fecha y hora y categorías.

Tiene comas adicionales en la lista de puntos de datos de la serie y una coma adicional después del último elemento de la serie.

Necesita asignar plotOptions en la sección de series.

Por favor mira aquí por ejemplo. Recomendaría jsFiddle o cualquier otro servicio de JavaScript "en vivo" para probar tu código.

Esto es para mostrar el tiempo en horas exactas: minutos sin importar la parte del día: elimine el type: ''datetime'' y el formateador de etiquetas para house / min / sec, etc. Agregue lo siguiente:

labels: {
            overflow: ''justify'',
            formatter: function () {
                var seconds = (this.value / 1000) | 0;
                this.value -= seconds * 1000;

                var minutes = (seconds / 60) | 0;
                seconds -= minutes * 60;

                var hours = (minutes / 60) | 0;
                minutes -= hours * 60;
                return hours;
            }
        }

Para manejar las etiquetas de datos, necesitamos hacer otro reformateo. Ahora, tome esto con un grano de sal ya que no soy un experto js y estoy seguro de que esto es demasiado detallado y se puede hacer con un método simple.

formatter: function () {
                    if (this.y === 0) {
                        return 0;
                    }
                    else {
                    var hours = (((this.y / 1000) / 60) / 60).toFixed(2);
                    var hourPortion = hours.toString().split(".")[0];
                    var minPortion = hours.toString().split(".")[1];
                    var minPortionUsed = (parseInt(hours.toString().split(".")[1]) * 0.6).toFixed(0);
                        if (minPortionUsed < 10) {
                            minPortionUsed = ''0'' + minPortionUsed.toString();
                        }
                    return hourPortion + '':'' + minPortionUsed;
                    }
                }

Vea este ejemplo actualizado.