如何使用测量范围和导航功能在 Highcharts 创建柱状测量范围图？

我需要在 Highcharts 绘制一个 abc2的 查查历史。它需要将任务的运行历史记录显示为一个水平条。还有一些额外的要求，我已经在下面添加了更新。最近我发现 图表不支持 inverted选项，只有 领航员和 Range 选择器在 StockChart 中可用。因此我使用这些函数。

所以为了达到这个要求，我创建了一些类似于 这个 jsfiddle 的例子的东西(在浏览的时候找到的，但是我不记得源代码了) ，最后在我之前的 有个问题的帮助下，使用了 这个柱塞环，这要感谢 帕维尔 · 福斯

更新问题以避免混淆

附加要求:

在特定的 日期和时间范围中显示 只有那些任务中的 跑了。如果有太多的运行，比如超过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任务的结束时间。 enter image description here 下面是我的图表选项

    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
};
4360 次浏览
小开

So after a few hours of digging, I have just found out the culprit (or I really hope so). The problem is your definition of yAxis label formatter:

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

You don't actually check if you should display the label according to task.intervals (see json.js). A simple update (Plunker) of the formatter seems to work:

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

See Plunker for demo.

Meaning of the yAxis labels is: Show label if you see a run in the graph or if there is a run on the right of the graph. Please modify the condition

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

as you see fit.

Disclaimer: I don't use Highcharts, so this answer tries to explain the problem and not to suggest a Highcharts-way of solving the problem.

Lessons learned:

  • yaxis-plugin.js is irrelevant to the problem.
  • Highstock.js is an open-source library (highstock.src.js). Any debugging is much easier if you debug original source code. Minified code adds unnecessary complexity and guessing. I have downloaded the library and added some console.log() to find out what is going on.

提交答案