Как создать диаграмму диапазона столбцов в Highcharts, используя функции диапазона и навигатора?

У меня есть требование построить историю выполнения задачи в Highcharts. Он должен отображать историю выполнения задач в виде горизонтальной полосы. Есть дополнительные требования, которые я добавил в качестве обновления ниже. Недавно я узнал, что эта invertedопция не поддерживается в StockChart и что только навигатор и rangeSelector в StockChart доступны . Поэтому я использую эти функции.

Поэтому для того , чтобы достичь требования я создал нечто похожее на эту jsfiddle примера (найденные где - то во время просмотра не помнит источник) и в конечном итоге с этой plunker ссылкой с помощью моего предыдущего вопроса , благодаря Pawel Fus

Обновляем вопрос, чтобы избежать путаницы

Дополнительные требования:

Показывать только те задачи, которые выполнялись в определенном диапазоне дат и времени . В случае, если выполняется слишком много запусков, например, более 10 запусков, тогда должен быть способ визуально отображать только 10 задач с помощью оси Y, которую можно прокручивать для отображения других задач. плункер ссылка на проблему

Объяснение проблемы вышеупомянутого плункера.

Если вы посмотрите на снимок экрана ниже сверху плункера, временной диапазон от 12/12/2014 09:32:26до 12/12/2014 10:32:26и есть только 2 задачи, которые запустили m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Однако я вижу другую промежуточную задачу, LILLY_Cкоторая даже не выполнялась в этом диапазоне дат. (В фактических данных есть более 10 задач, которые загромождают эту диаграмму, которая даже не попадает в этот временной диапазон)

Также, если вы заметили, что в правом нижнем углу время сместилось с 09:38на 19:20. 19:20время окончания m_ZIG2_HCP_MERGE_IB_CNзадачи. Ниже мои варианты диаграммы

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

Итак, после нескольких часов копания я только что обнаружил виновника (или я очень на это надеюсь). Проблема заключается в вашем определении средства 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'
  }
},

Фактически вы не проверяете, следует ли отображать метку в соответствии с task.intervals(см. json.js). Кажется, работает простое обновление ( Plunker ) форматтера:

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

См Plunker для демонстрации .

Значения меток yAxis: Показать метку, если вы видите цикл на графике или если он есть справа от графика. Пожалуйста, измените условие

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

как вы считаете нужным.

Отказ от ответственности: я не использую Highcharts, поэтому этот ответ пытается объяснить проблему, а не предлагать способ решения проблемы с помощью Highcharts.

Уроки выучены:

• yaxis-plugin.js не имеет отношения к проблеме.
• Highstock.js - это библиотека с открытым исходным кодом ( highstock.src.js ). Любая отладка намного проще, если вы отлаживаете исходный исходный код. Минифицированный код добавляет ненужной сложности и догадок. Я загрузил библиотеку и добавил несколько, console.log()чтобы узнать, что происходит.