根据ajax更新和Highcharts中的数据点动态调整Y轴最小值/最大值

Question

当前，我的图已经创建，然后我有以下ajax调用来在图上创建plotLines：

$.ajax({
type: "GET",
url: "/limits",
dataType: 'json',
success: function (limits) {
console.log(limits);
graph1.yAxis[0].update({
plotLines: [{
value: limits[7].max,
color: 'orange',
dashStyle: 'dash',
width: 2,
label: {
text: 'USL'
}
}, {
value: limits[7].min,
color: 'orange',
dashStyle: 'dash',
width: 2,
label: {
text: 'LSL'
}
}]
});

问题是，对于某些图形，plotLines超出了Highcharts确定的y轴范围(根据数据创建(，因此plotLines不会显示在图形上。

我知道我可以这样做来解决这个问题：

$.ajax({
type: "GET",
url: "/limits",
dataType: 'json',
success: function (limits) {
console.log(limits);
graph1.yAxis[0].update({
min: limits[7].min,
max: limits[7].max,
plotLines: [{
value: limits[7].max,
color: 'orange',
dashStyle: 'dash',
width: 2,
label: {
text: 'USL'
}
}, {
value: limits[7].min,
color: 'orange',
dashStyle: 'dash',
width: 2,
label: {
text: 'LSL'
}
}]
});

然而。。如果我要做这个解决方案，那么如果图形在plotLines之外有点，那么这些点就不会显示。

我想我可以做这样的事情：

chart: {
events: {
load: function() {
var min = yAxis[0].min;
var max = yAxis[0].max;
if (limits[7].max > max) {
yAxis[0].setExtremes(null, (limits[7].max);
}
}
}
}

我不完全确定如何将最大和最小plotLines的那种类型的逻辑合并到更新函数中。

如有任何帮助，我们将不胜感激！谢谢

Answer 1

您可以将绘图线值与实际轴的极值进行比较，并在必要时更改最小值和最大值属性。例如：

yAxis.update({
min: yAxis.min > limits.min ? limits.min : null,
max: yAxis.max < limits.max ? limits.max : null,
plotLines: [{
value: limits.max,
width: 2,
color: 'orange'
}, {
value: limits.min,
width: 2,
color: 'blue'
}]
});

---

现场演示：http://jsfiddle.net/BlackLabel/6m4e8x0y/4989/