javascript - 如何添加箭头代表增加

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 是系列(列)到类别中心的偏移量。