Javascript 如何使用范围和导航功能在Highcharts中创建列范围图？

我需要在Highcharts中绘制任务的运行历史。它需要将任务的运行历史显示为水平条。我在下面的更新中添加了一些额外的要求。最近我发现，

inversed

选项在中不受支持，并且只有&在StockChart中可用。因此，我正在使用这些函数

因此，为了达到这个要求，我创建了一些类似的东西（在浏览时在某处找到，不记得源代码），最后得到了我以前的帮助，这要感谢

更新问题以避免混淆

其他要求：

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

上述问题的解释

如果您从上面的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
        };

var图表\u选项={
图表：{
renderTo:'容器'，
身高：600
},
标题：{
},
学分：{
已启用：false
},
xAxis：{
键入：“日期时间”，
网格线宽度：1，
滴答声间隔：1*3600*1000，
日期时间标签格式：{
月份：'%b%e，%Y'
}
},
亚克斯：{
时间间隔：1，
网格线宽度：1，
标签：{
格式化程序：函数（）{
if（任务[this.value]）{
返回任务[this.value].name；
}
}
},
startOnTick：错，
恩东蒂克：错，
标题：{
文本：“任务”
}
},
范围选择器：{
已选择：0，
按钮：[{
键入：“分钟”，
计数：60，
正文：“1h”
}, {
键入：“分钟”，
计数：180，
正文：“3h”
}, {
键入：“分钟”，
计数：300，
正文：“5h”
}],
inputDateFormat:“%m/%d/%Y%H:%m:%S”，
InputitDateFormat:“%m/%d/%Y%H:%m:%S”，
inputBoxWidth:120
},
导航器：{
已启用：false
},
图例：{
已启用：false
},
工具提示：{
分享：错，
格式化程序：函数（）{
var-str=''；
str+=“任务：”+this.series.name+”
；
str+=“From:”+Highcharts.dateFormat（“%m/%d/%y%H:%m'，this.point.From）+“
”；
str+='To:'+Highcharts.dateFormat（'%m/%d/%y%H:%m'，this.point.To）+'
'；
返回str；
}
},
打印选项：{
行：{
线宽：10，
标记：{
已启用：true
},
数据标签：{
启用：对，
对齐：“左”，
格式化程序：函数（）{
返回this.point.options&&this.point.options.label；
}
},
国家：{
悬停：{
线宽：10
}
}
},
系列：{
光标：“指针”，
要点：{
活动：{
单击：函数（）{
var query='{“task_id”：“+this.task_id+”，“start_time”：“+this.from+”，“exclude_interval”：“+opeExcludeMinutes+”，“size”：10}”；
$scope.taskName=this.series.name；
$scope.isTaskSelected=false；
$scope.operationalReportAgentTaskHistoryServiceRequest（查询）；
}
}
}
}
},
系列：系列数据
};

经过几个小时的挖掘，我刚刚找到了罪犯（或者我真的希望如此）。问题在于您对

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.interval

（请参阅

json.js

）检查是否应该显示标签。格式化程序的简单更新（）似乎可以工作：

  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:{
时间间隔：1，
网格线宽度：1，
标签：{
格式化程序：函数（）{
log（“scripts.js-yAxis.labels.formatter”，this.value）；
if (_xAxis.min <= _int.to) {