javascript - Highcharts:箭头在错误的图表上呈现

Question

我在带有 jQ​​uery-UI 选项卡导航系统的网页上有 3 个 Highcharts 图表 - 每个选项卡一个图表。在这些图表中，仅我在绘制的线中添加了一个箭头。这个箭头在 IIFE 中生成(参见下面的代码示例)。否则Highcharts 函数非常标准。

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

错误的箭头并不总是绘制在其他图表上——从不在第一次呈现时，通常只有在用户切换标签页两次或三次后，箭头才会出现在它应该出现的位置't。我还注意到每次呈现图表时都会调用此 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/