高图表:箭头呈现在错误的图表上

Question

我在一个带有jQuery-UI标签导航系统的网页上有3个Highcharts图表 - 每个标签一个图表。在其中一个图表中，我向绘制的线条添加了一个箭头。此箭头在 IIFE 内部生成(请参阅下面的代码示例(。否则 高图表功能非常标准。

当我尝试切换选项卡并显示其他两个图表的数据时，会出现此问题：箭头绘制在不应有任何箭头的图表上。

错误的箭头并不总是在其他图表上绘制 - 从不在第一次渲染时绘制，通常只有在用户切换选项卡两到三次之后，箭头才会出现在不应该出现的地方。我还注意到每次呈现图表时都会调用此 IIFE(甚至从其他选项卡(。

我不知道Highcharts内部是如何工作的，但是我的每个图表都附加到不同的DOM元素(通过ID(，因此Highcharts在呈现箭头时不应该混合图表。

有谁知道为什么会这样？

(function (H) {
var arrowCheck = false, //This variable helps the arrow to be responsive
pathTag;

H.wrap(H.Series.prototype, 'drawGraph', function (proceed) {
// Now apply the original function with the original arguments,
// which are sliced off this function's arguments
// This section takes care of the arrow of the graph
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var arrowLength = 14,
arrowWidth = 7,
series = this,
data = series.data,
segments = data,
lastSeg = segments[segments.length - 1],
path = [],
lastPoint = null,
nextLastPoint = null;
if (typeof (lastSeg) === "undefined") {
return;
}
if (lastSeg.y === 0) {
lastPoint = segments[segments.length - 2];
nextLastPoint = segments[segments.length - 1];
} else {
lastPoint = segments[segments.length - 1];
nextLastPoint = segments[segments.length - 2];
}
var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
(lastPoint.plotY - nextLastPoint.plotY));
if (angle < 0) angle = Math.PI + angle;

path.push('M', lastPoint.plotX, lastPoint.plotY);
if (lastPoint.plotX > nextLastPoint.plotX) {
if (arrowCheck === true) {
pathTag = doc.getElementById("arrow");
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
'L',
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX + arrowLength * Math.sin(angle),
lastPoint.plotY + arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX - arrowWidth * Math.cos(angle),
lastPoint.plotY + arrowWidth * Math.sin(angle),
'Z'
);
} else {
if (arrowCheck === true) {
pathTag = doc.getElementById("arrow");
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
lastPoint.plotY + arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX - arrowLength * Math.sin(angle),
lastPoint.plotY - arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle),
'Z'
);
}
series.chart.renderer.path(path)
.attr({
fill: series.color,
id: 'arrow'
})
.add(series.group);
arrowCheck = true;
});
}(Highcharts));

这里有一个 JSFiddle 示例(你只需要调整图表所在的部分的大小，看看箭头如何跳到错误的图表(

Answer 1

简而言之，问题实际上是双重的：

1. 箭头代码在每个图表上运行和显示
2. 只有一个 html 元素 ID 用于它，因此它将在上一个图表绘制中删除该元素并在当前图表上显示它。

所以......当你第一次绘制图表时，箭头被添加到第二个图表中。然后删除。然后添加到第一个图表中(因为这是您在代码中的顺序(。 因此，此时您在第一个图表上看到箭头，而不是在第二个图表上。

当HighCharts检测到需要调整大小时，它会重新绘制图表。但是在内部图表有不同的顺序，所以绘制第一个图表(你想要一个箭头(，它的箭头和id="arrow"首先被删除，然后重新添加。现在进行第二次图表重绘：它删除任何带有id="arrow"的箭头(即使它现在恰好在另一个图表上(，然后将其添加到其图表中。 现在箭头出现在图表 2 上。

所以这就是为什么它从一个交换到另一个。怎么办呢？

首先，如果您希望图表在该特定图表中包含箭头，请将参数添加到图表的plotOptions。请注意，您可以在多个图表上执行此操作：

...
plotOptions: {
showArrow: true  // signals that this chart requires an arrow
},
...

其次，检测此设置并仅在存在时才进行处理：

(function(H) {
var arrowCheck = false,
pathTag;
H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
// Now apply the original function with the original arguments, 
// which are sliced off this function's arguments
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.chart.options.plotOptions.showArrow) {
// used a bit of regex to clean up the series name enough to be used as an id
var arrowName = "arrow" + this.name.replace(/W/g, "_").toLowerCase();
var arrowLength = 15,
arrowWidth = 9,
series = this,
data = series.data,
len = data.length,
segments = data,
lastSeg = segments[segments.length - 1],
path = [],
lastPoint = null,
nextLastPoint = null;
if (lastSeg.y == 0) {
lastPoint = segments[segments.length - 2];
nextLastPoint = segments[segments.length - 1];
} else {
lastPoint = segments[segments.length - 1];
nextLastPoint = segments[segments.length - 2];
}
var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
(lastPoint.plotY - nextLastPoint.plotY));
if (angle < 0) angle = Math.PI + angle;
path.push('M', lastPoint.plotX, lastPoint.plotY);
if (lastPoint.plotX > nextLastPoint.plotX) {
if (arrowCheck === true) {
//replaced 'arrow' with arrowName
pathTag = document.getElementById(arrowName);
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
'L',
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX + arrowLength * Math.sin(angle),
lastPoint.plotY + arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX - arrowWidth * Math.cos(angle),
lastPoint.plotY + arrowWidth * Math.sin(angle),
'Z'
);
} else {

if (arrowCheck === true) {
//replaced 'arrow' with arrowName
pathTag = document.getElementById(arrowName);
if (pathTag != null) {
pathTag.remove(pathTag);
}
}
path.push(
'L',
lastPoint.plotX - arrowWidth * Math.cos(angle),
lastPoint.plotY + arrowWidth * Math.sin(angle)
);
path.push(
lastPoint.plotX - arrowLength * Math.sin(angle),
lastPoint.plotY - arrowLength * Math.cos(angle)
);
path.push(
lastPoint.plotX + arrowWidth * Math.cos(angle),
lastPoint.plotY - arrowWidth * Math.sin(angle),
'Z'
);
}
series.chart.renderer.path(path)
.attr({
fill: series.color,
id: arrowName //changed from 'arrow' to arrowName to enable more than one series with an arrow
})
.add(series.group);
arrowCheck = true;
}
});
}(Highcharts));

最后，请注意，我使用了 https://stackoverflow.com/a/39925450/1544886 中的想法来确保每个图表都有一个唯一的箭头元素 ID。

演示：https://jsfiddle.net/4y86mwyk/