highcharts單線與箭頭箭頭

Question

我將在一個圖表中找到一條單線箭頭，如下所示：

<-------X------------>
1    2    3    4    5

或類似這樣（其中/假設是箭頭:)）：

           \/
 -------------------------
 | 1 | 2 | 3 | 4 | 5 |
 -------------------------

我嘗試了一下，但是沒有任何結果，我找不到任何好的例子。 有什么好的高圖嗎？

http://jsfiddle.net/o6cxfn5s/

Answer 1

請參閱此現場演示 ： http : //jsfiddle.net/kkulig/u3qj6u74/

它包含包裝的核心函數，用於繪制圖形：

  (function(H) {
    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));

      var arrowLength = 15,
        arrowWidth = 9,
        series = this,
        lastPoint = series.points[series.points.length - 1],
        nextLastPoint = series.points[series.points.length - 2],
        path = [];


      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) {
        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 {
        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');
      }

      if (series.arrow) {
        series.arrow.attr({
          d: path
        });
      } else {
        series.arrow = series.chart.renderer.path(path)
          .attr({
            fill: series.color
          })
          .add(series.group);
      }
    });
  }(Highcharts));

您可以輕松地調整此代碼，以便兩端都有箭頭。

---

有關包裝的Dosc頁面 ： https : //www.highcharts.com/docs/extending-highcharts/extending-highcharts