javascript - para - highcharts grafica

¿Cómo crear un gráfico de rango de columnas en Highcharts usando las funciones de rango y navegador?

Question

Tengo un requisito para trazar el historial de ejecución de una tarea en Highcharts. Tiene que mostrar que el historial de ejecución de las tareas es una barra horizontal. Hay requisitos adicionales que he agregado como una actualización a continuación. Recientemente descubrí que StockChart no admite la opción inverted y que solo rangeSelector y rangeSelector están disponibles en StockChart. Por lo tanto, estoy usando esas funciones.

Entonces, para cumplir con el requisito, creé algo similar a este ejemplo de jsfiddle (encontrado en algún lugar mientras navegaba, no recuerdo la fuente) y terminé con este enlace de plunker con la ayuda de mi question anterior, gracias a Pawel Fus

Pregunta de actualización para evitar confusiones

Requerimientos adicionales:

Mostrar solo aquellas tareas que se ejecutaron en un rango de fecha y hora en particular. En caso de que haya demasiadas ejecuciones, como más de 10 ejecuciones, entonces debe existir una manera de mostrar solo 10 tareas de forma visible con un eje y que se pueda desplazar para mostrar otras tareas. enlace plunker al problema

Explicación del problema del plunker anterior.

Si verifica la captura de pantalla siguiente desde el plunker anterior, el rango de tiempo es del 12/12/2014 09:32:26 al 12/12/2014 10:32:26 y solo hay 2 tareas que han ejecutado m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB & m_ZIG2_HCP_MERGE_IB_CN . Sin embargo, puedo ver otra tarea entre LILLY_C que ni siquiera se ejecutó en este rango de fecha y hora. (En los datos reales hay más de 10 tareas que saturan este gráfico que ni siquiera se encuentra dentro de este rango de fecha y hora)

Además, si observa en la esquina inferior derecha, el tiempo cambió de 09:38 a 19:20 . 19:20 es la hora de m_ZIG2_HCP_MERGE_IB_CN tarea m_ZIG2_HCP_MERGE_IB_CN . A continuación se muestran mis opciones de gráfico

    var chart_options = {
            chart: {
                renderTo: ''container'',
                height: 600
            },
            title: {
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: ''datetime'',
                gridLineWidth: 1,
                tickInterval: 1 * 3600 * 1000,
                dateTimeLabelFormats: {
                    month: ''%b %e, %Y''
                }
            },
            yAxis: {                    
                tickInterval: 1,
                gridLineWidth: 1,
                labels: {
                    formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: ''Task''
                }
            },
            rangeSelector: {
                selected: 0,
                buttons: [ {
                    type: "minute",
                    count: 60,
                    text: "1h"
                }, {
                    type: "minute",
                    count: 180,
                    text: "3h"
                }, {
                    type: "minute",
                    count: 300,
                    text: "5h"
                }],
                inputDateFormat: ''%m/%d/%Y %H:%M:%S'',
                inputEditDateFormat: ''%m/%d/%Y %H:%M:%S'',
                inputBoxWidth: 120
            },
            navigator: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            tooltip: {
                shared: false,
                formatter: function() {
                    var str = '''';
                    str += ''Task: '' + this.series.name + ''<br>'';
                    str += ''From: '' + Highcharts.dateFormat(''%m/%d/%y %H:%M'', this.point.from) + ''<br>'';
                    str += ''To: '' + Highcharts.dateFormat(''%m/%d/%y %H:%M'', this.point.to) + ''<br>'';
                    return str;
                }
            },
            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: true
                    },
                    dataLabels: {
                        enabled: true,
                        align: ''left'',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    },
                    states:{
                        hover:{
                            lineWidth:10
                        }
                    }
                },
                series: {
                    cursor: ''pointer'',
                    point: {
                        events: {
                            click: function () {
                                var query = ''{ "task_id": "''+this.task_id+''","start_time": ''+this.from+'',"exclude_interval": ''+opExcludeMinutes+'',"size": 10 }'';
                                $scope.taskName = this.series.name;
                                $scope.isTaskSelected = false;
                                $scope.operationalReportAgentTaskHistoryServiceRequest(query);
                            }
                        }
                    }
                }
            },
            series: seriesData
        };

Answer 1

Entonces, después de unas horas de excavación, acabo de descubrir al culpable (o realmente lo espero). El problema es su definición del formateador de etiquetas yAxis :

yAxis: {
  tickInterval: 1,
    gridLineWidth: 1,
    labels: {
    formatter: function() { // THIS IS THE PROBLEM
      if (tasks[this.value]) {
        return tasks[this.value].name;
      }
    }
  },
  startOnTick: false,
    endOnTick: false,
    title: {
    text: ''Task''
  }
},

En realidad, no verifica si debe mostrar la etiqueta de acuerdo con task.intervals (consulte json.js ). Una simple actualización ( Plunker ) del formateador parece funcionar:

  yAxis: {
    tickInterval: 1,
    gridLineWidth: 1,
    labels: {
      formatter: function () {
        console.log("scripts.js - yAxis.labels.formatter", this.value);
        if (tasks[this.value]) {

          //if (tasks[this.value].name === ''LILLY_C'') {
            var _xAxis = this.chart.axes[0];
            var _task = tasks[this.value];
            var _show = false;

            // Not optimized for large collections
            for (var _i = 0; _i < _task.intervals.length; _i++) {
              var _int = _task.intervals[_i];
              if (_xAxis.min <= _int.to) {
                _show = true;
              }
            }

            console.log("scripts.js - yAxis.labels.formatter",
              tasks[this.value].name,
              _show,
              _xAxis.min,
              _xAxis.max,
              _task.intervals
            );

            if (_show) {
              return tasks[this.value].name;
            } else {
              return;
            }
          //}

          //return tasks[this.value].name;
        }
      }
    },
    startOnTick: false,
    endOnTick: false,
    title: {
      text: ''Task''
    }
  },

Ver Plunker para la Plunker .

El significado de las etiquetas yAxis es: Mostrar etiqueta si ve una ejecución en el gráfico o si hay una ejecución a la derecha del gráfico. Por favor modifique la condición

if (_xAxis.min <= _int.to) {

como veas conveniente.

Descargo de responsabilidad: no uso Highcharts, por lo que esta respuesta intenta explicar el problema y no sugerir una forma de Highcharts para resolver el problema.

Lecciones aprendidas:

• yaxis-plugin.js es irrelevante para el problema.
• Highstock.js es una biblioteca de código abierto ( highstock.src.js ). Cualquier depuración es mucho más fácil si depura el código fuente original. El código minimizado agrega complejidad y adivinanzas innecesarias. Descargué la biblioteca y agregué algún console.log() para averiguar qué está sucediendo.