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

90

У меня есть требование построить историю выполнения задачи в 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
        };
AabinGunz
источник
6
Установить ширину линии при наведении курсора, например: jsfiddle.net/bx2000cb/8
Себастьян Бочан,
5
Как вы знаете, Highcharts error #15это ошибка при сортировке ваших данных. Вы назначаете свои данные, но не в порядке возрастания. Пожалуйста, проверьте, возможно, дважды проверьте, потому что я вижу много этих проблем, потому что разработчик не может найти проблему в своих каким-то образом отсортированных данных.
Raein Hashemi
4
Если не попробуешь, то и не узнаешь ..
Павел Фус
4
Понятия не имею, о чем вы, ребята, действительно ли этот плункер ? Эти вопросы - одна большая путаница. Я советую начать с чтения и понимания кода, который у вас есть для создания диаграммы. Также я советую прочитать несколько руководств по Highcharts, просто чтобы понять, как это работает.
Paweł Fus
1
Я пробегаю этот диапазон и вижу две задачи, без лишних слов, которые вы описываете.
Себастьян Бочан

Ответы:

6

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