如何添加箭头代表增加

Question

我正在尝试添加一个箭头来表示某些值的增量（因此，不能修复）。但我不知道该怎么做。显然，Highcharts没有任何功能可以简化它...

http://jsfiddle.net/bm68vj4r/1/

感谢任何提示！

Answer 1

您可以使用chart.renderer.path()生成自己的路径，以下是实现此目的的简单代码段：http://jsfiddle.net/bm68vj4r/2/

function drawIncrease() {
  var chart = this,
    r = chart.renderer,
    styles = {
      'stroke-width': 2,
      'stroke': 'black',
      'zIndex': 5
    };

  chart.increaseLine = r.path().attr(styles).add();

  redrawIncrease.call(this);
}

function redrawIncrease() {

  var chart = this,
    r = chart.renderer,
    left = chart.plotLeft,
    top = chart.plotTop,
    series_0 = chart.series[0],
    series_2 = chart.series[2],
    x_1 = series_0.points[0].plotX + left + series_0.pointXOffset,
    x_2 = series_2.points[1].plotX + left + series_2.pointXOffset,
    y_1 = series_0.points[0].plotY + top,
    y_2 = series_2.points[1].plotY + top,
    path = ['M', x_1, y_1, 'L', x_2, y_2];


  if (chart.increaseLine) {
    chart.increaseLine.attr({
      d: path
    })
  }
}

您可以修改path以添加箭头。 plotLeft和plotTop是绘图区域的补偿。 pointXOffset是系列（列）到类别中心的偏移量。