Wie erstelle ich ein Spaltenbereichsdiagramm in Highcharts mithilfe von Bereichs- und Navigatorfunktionen?

Ich habe eine Verpflichtung zur Handlung Lauf der Geschichte einer Aufgabe in Highcharts. Es muss den Laufverlauf der Aufgaben als horizontale Leiste anzeigen. Es gibt zusätzliche Anforderungen, die ich unten als Update hinzugefügt habe. Kürzlich habe ich herausgefunden, dass diese invertedOption in StockChart nicht unterstützt wird und dass nur Navigator & RangeSelector in StockChart verfügbar sind. Deshalb benutze ich diese Funktionen.

Um die Anforderung zu erfüllen, habe ich etwas Ähnliches wie dieses jsfiddle-Beispiel erstellt (irgendwo beim Surfen gefunden, erinnere mich nicht an die Quelle) und dank Pawel Fus mit Hilfe meiner vorherigen Frage diesen Plunker-Link erhalten

Aktualisieren der Frage, um Verwirrung zu vermeiden

Zusätzliche Anforderungen:

Zeigen Sie nur die Aufgaben , die liefen in einem bestimmten Datum und Zeitbereich . Wenn zu viele Läufe vorhanden sind, z. B. mehr als 10 Läufe, muss es eine Möglichkeit geben, nur 10 Aufgaben mit einer y-Achse sichtbar anzuzeigen, die scrollbar ist, um andere Aufgaben anzuzeigen. Plunker Link zum Problem

Problem Erklärung des obigen Plunkers.

Wenn Sie den Screenshot unten vom obigen Plunker aus überprüfen, reicht der Zeitbereich von 12/12/2014 09:32:26bis 12/12/2014 10:32:26und es gibt nur 2 Aufgaben, die m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& ausgeführt haben m_ZIG2_HCP_MERGE_IB_CN. Ich sehe jedoch eine andere Aufgabe dazwischen, LILLY_Cdie nicht einmal in diesem Datums- / Zeitbereich ausgeführt wurde. (In tatsächlichen Daten gibt es mehr als 10 Aufgaben, die dieses Diagramm überladen, das nicht einmal unter diesen Datums- / Zeitbereich fällt.)

Auch wenn Sie unten rechts bemerken, hat sich die Zeit von 09:38nach verschoben 19:20. 19:20ist die Endzeit für die m_ZIG2_HCP_MERGE_IB_CNAufgabe. Unten sind meine Diagrammoptionen

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

Nach ein paar Stunden Graben habe ich gerade den Täter herausgefunden (oder ich hoffe es wirklich). Das Problem ist Ihre Definition des yAxisEtikettenformatierers:

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

Sie prüfen eigentlich nicht, ob Sie das Etikett gemäß task.intervals(siehe json.js) anzeigen sollen . Ein einfaches Update ( Plunker ) des Formatierers scheint zu funktionieren:

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

Siehe Plunker für eine Demo .

Die Bedeutung der yAxis-Beschriftungen lautet: Beschriftung anzeigen, wenn Sie einen Lauf im Diagramm sehen oder wenn sich rechts im Diagramm ein Lauf befindet. Bitte ändern Sie die Bedingung

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

wie du es für richtig hältst.

Haftungsausschluss: Ich verwende keine Highcharts, daher versucht diese Antwort, das Problem zu erklären und keine Highcharts zur Lösung des Problems vorzuschlagen.

Gewonnene Erkenntnisse:

• yaxis-plugin.js ist für das Problem irrelevant.
• Highstock.js ist eine Open-Source-Bibliothek ( highstock.src.js ). Das Debuggen ist viel einfacher, wenn Sie den ursprünglichen Quellcode debuggen. Minimierter Code erhöht die unnötige Komplexität und das Erraten. Ich habe die Bibliothek heruntergeladen und einige hinzugefügt console.log(), um herauszufinden, was los ist.