Comment créer un graphique de plage de colonnes dans Highcharts à l'aide des fonctions de plage et de navigateur?

J'ai besoin de tracer l' historique d'exécution d'une tâche dans Highcharts. Il doit montrer cet historique d'exécution des tâches sous forme de barre horizontale. Il y a des exigences supplémentaires que j'ai ajoutées en tant que mise à jour ci-dessous. Récemment, j'ai découvert que cette invertedoption n'est pas prise en charge dans StockChart et que seuls le navigateur et rangeSelector sont disponibles dans StockChart. Par conséquent, j'utilise ces fonctions.

Donc, pour répondre à l'exigence, j'ai créé quelque chose de similaire à cet exemple de jsfiddle (trouvé quelque part pendant la navigation, je ne me souviens pas de la source) et j'ai fini avec ce lien de plunker avec l'aide de ma question précédente , grâce à Pawel Fus

Mettre à jour la question pour éviter toute confusion

Exigences supplémentaires:

Afficher uniquement les tâches qui ont couru dans un particulier la date et la plage horaire . Au cas où il y aurait trop d'exécutions, par exemple plus de 10 exécutions, il doit y avoir un moyen d'afficher uniquement 10 tâches visiblement avec un axe y qui peut faire défiler pour afficher d'autres tâches. lien plunker vers le problème

Explication du problème du plunker ci-dessus.

Si vous vérifiez la capture d'écran ci-dessous à partir de plunker ci-dessus, la plage de temps est de 12/12/2014 09:32:26à 12/12/2014 10:32:26et il n'y a que 2 tâches qui ont exécuté m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Cependant, je peux voir une autre tâche entre les deux LILLY_Cqui n'a même pas été exécutée dans cette plage de dates. (Dans les données réelles, il y a plus de 10 tâches qui encombrent ce graphique qui ne tombe même pas sous cette plage de dates)

Aussi, si vous remarquez dans le coin inférieur droit le temps passé de 09:38à 19:20. 19:20est l'heure de fin de la m_ZIG2_HCP_MERGE_IB_CNtâche. Voici mes options de graphique

    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
        };

Donc, après quelques heures de fouille, je viens de découvrir le coupable (ou je l'espère vraiment). Le problème est votre définition du yAxisformateur d'étiquettes:

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'
  }
},

Vous ne vérifiez pas réellement si vous devez afficher l'étiquette selon task.intervals(voir json.js). Une simple mise à jour ( Plunker ) du formateur semble fonctionner:

  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'
    }
  },

Voir Plunker pour une démo .

La signification des étiquettes yAxis est: Afficher l'étiquette si vous voyez une course dans le graphique ou s'il y a une course à droite du graphique. Veuillez modifier la condition

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

comme bon vous semble.

Clause de non-responsabilité: je n'utilise pas Highcharts, donc cette réponse essaie d'expliquer le problème et non de suggérer une manière Highcharts de résoudre le problème.

Leçons apprises:

• yaxis-plugin.js est sans rapport avec le problème.
• Highstock.js est une bibliothèque open-source ( highstock.src.js ). Tout débogage est beaucoup plus facile si vous déboguez le code source d'origine. Le code minifié ajoute une complexité et une estimation inutiles. J'ai téléchargé la bibliothèque et en ai ajouté quelques-unes console.log()pour savoir ce qui se passe.