如何使用range和navigator函数在Highcharts中创建列范围图表？

Question

我需要绘制一个 Highcharts 的任务运行历史的水平条形图。最近发现 inverted 选项在 StockChart 中不受支持，只有 navigator 和 rangeSelector 可用于 StockChart。 因此我使用了这些函数。为了实现需求，我创建了类似于 此 jsfiddle 示例（在浏览时在某个地方找到，不记得来源），并通过之前的问题和 Pawel Fus 的帮助制作出这个 plunker 链接。

更新问题以避免混淆

附加要求：

仅显示特定日期和时间范围内运行的任务。如果运行太多，例如超过10个，则需要一种可显示10个任务并具有可滚动的y轴以显示其他任务的方法。 在此处查看问题

上述 plunker 的问题解释如下。

如果您从上述 Plunker 中检查下面的屏幕截图，您会发现时间范围是从 12/12/2014 09:32:26 到 12/12/2014 10:32:26，并且只有两个任务运行了 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

---

在状态为 hover 时设置线条宽度，例如：http://jsfiddle.net/bx2000cb/8/。 - Sebastian Bochan

正如您所知道的，“Highcharts错误＃15”是由于数据排序错误引起的。您已经分配了数据，但并没有按升序排列。请检查一下，最好再检查一下，因为我看到很多这样的问题，开发人员无法在他们某种程度上排过序的数据中找到问题。 - Raein Hashemi

如果你不尝试，就永远不会知道。 - Paweł Fus

我不知道你们在谈论什么，那个plunker是真实的吗？ 这个问题很混乱。我建议先阅读和理解生成图表的代码。另外，我建议阅读一些Highcharts的教程，以了解它是如何工作的。 - Paweł Fus

我运行了这个范围并看到了两个任务，没有额外的任务，正如你所描述的。 - Sebastian Bochan

Answer 1

经过几个小时的挖掘，我终于找到了罪魁祸首（或者希望如此）。问题出在你对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'
    }
  },

请参考 演示。

yAxis 标签的含义是：在图表中看到一次运行或者在图表右侧看到一次运行时显示标签。请修改条件。

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

按照您的意愿。

免责声明：我不使用Highcharts，因此本答案旨在解释问题，而非建议使用Highcharts解决问题。

---

经验教训：

• yaxis-plugin.js与问题无关。
• Highstock.js是一个开源库（highstock.src.js）。如果您调试原始源代码，则任何调试都会更加容易。缩小的代码增加了不必要的复杂性和猜测。我已下载该库并添加了一些console.log()以找出发生了什么。

- MartyIX