如何使用范围和导航器function在Highcharts中创build列范围图表？

我有要求在Highcharts绘制任务的 运行历史logging 。 它需要将任务的运行历史logging显示为一个单杠。 以下是我添加的其他要求。 最近我发现StockChart不支持inverted选项，而StockChart中只有navigator和rangeSelector可用。 所以我正在使用这些function。

所以为了达到这个要求，我创build了一个类似于这个jsfiddle例子的东西（在浏览时find某个地方不记得源代码），并且在我之前的问题的帮助下结束了这个链接 ，感谢Pawel Fus

更新问题以避免混淆

其他要求：

仅显示在特定date和时间范围内 运行的 任务 。 如果运行次数过多，例如超过10次运行，那么需要有一种显示10个任务的方法，其中可以滚动显示其他任务的y轴。 闯入链接的问题

上述抢劫犯的问题解释。

如果您从上面的截图中查看截图，时间范围从2014年12月12日9时12/12/2014 09:32:26到2014年12月12日10时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 。 然而，我可以看到在这个date时间范围内甚至没有运行的LILLY_C之间的另一个任务。 （在实际的数据中有超过10个任务混乱这个图表甚至没有在这个date时间范围内）

另外如果你注意到从09:38到19:20最右下angular时间。 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 }; 

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

请参阅Plunker进行演示 。

yAxis标签的含义是： 显示标签，如果您在graphics中看到一个运行或者在graphics的右侧有一个运行。 请修改条件

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

如你所见。

免责声明：我不使用Highcharts，所以这个答案试图解释这个问题，而不是build议Highcharts解决问题的方法。

---

得到教训：

• yaxis-plugin.js与问题无关。
• Highstock.js是一个开源库 （ highstock.src.js ）。 如果您debugging原始源代码，任何debugging都会更容易。 小代码增加了不必要的复杂性和猜测。 我已经下载了这个库，并添加了一些console.log()来查找正在发生的事情。