Як створити діаграму діапазону стовпців у Highcharts за допомогою функцій діапазону та навігатора?

У мене є вимога до сюжет історії виконання у вигляді завдання в Highcharts. Потрібно показати, що історія завдань виконується у вигляді горизонтальної смуги. Є додаткові вимоги, які я додав як оновлення нижче. Нещодавно я дізнався, що invertedпараметр не підтримується в StockChart, і що в StockChart доступні лише навігатор і rangeSelector . Тому я використовую ці функції.

Тож для досягнення вимоги я створив щось подібне до цього прикладу jsfiddle (знайдений десь під час перегляду, не пам’ятаю джерело) і в підсумку отримав це посилання на планку з допомогою мого попереднього запитання , завдяки Pawel Fus

Оновлення питання, щоб уникнути плутанини

Додаткові вимоги:

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

Пояснення проблеми вищезазначеного плюнкера.

Якщо ви перевірите знімок екрана нижче зверху plunker, діапазон часу - від 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()щоб з’ясувати, що відбувається.