highcharts - Highcharts 带箭头的弧线

Question

我正在尝试提出解决方案，这将帮助我在弧的末端绘制箭头（由 chart.renderer.arc 函数绘制）。我见过这样的解决方案How to draw arrows on a line-charts with Highcharts？当您有系列但在弧中时，我没有关于点的信息（最后一个除外）。

现在我正在尝试根据角度绘制箭头，但这看起来有点悲惨。

我想要实现的目标： 带箭头的弧

代码示例：https ://jsfiddle.net/49hL72pw/1/

chart: {
polar: true,
events: {
  load: function() {
    var chart = this;
    var center = [(chart.plotBox.width) / 2, (chart.plotBox.height) / 2];

    var ren = chart.renderer;

            var angle = 175;
    var result = ren.arc(center[0] + chart.plotBox.x, center[1] + chart.plotBox.y, 50, 50, (Math.PI / 180) * (-90), (Math.PI / 180) * angle).attr({
      fill: '#FCFFC5',
      stroke: 'black',
      'stroke-width': 1,
      dashStyle: 'dash'
    }).add();

    var dValues = result.element.attributes.d.value.split(" ");

    var kx = +dValues[9];//203.99829144870202;
    var ky = +dValues[10];//280.94598600742796;
    var leftArrowX = 7;
    var leftArrowY = 5;
    var rightArrowX = 5;
    var rightArrowY = 10;

    if(angle <= 270 && angle >= 250) {
        leftArrowX = leftArrowX * -1;
      leftArrowY = leftArrowY * -1;
      rightArrowX = rightArrowX * -1;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 249 && angle >= 230) {
        leftArrowX = (leftArrowX * -1) - 3;
      leftArrowY = (leftArrowY * -1) + 5;
      rightArrowX = (rightArrowX * -1) + 3;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 229 && angle >= 210) {
        leftArrowX = (leftArrowX * -1) - 3;
      leftArrowY = (leftArrowY * -1) + 5;
      rightArrowX = (rightArrowX * -1) + 7;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 209 && angle >= 200) {
        leftArrowX = (leftArrowX * -1) - 3;
      leftArrowY = (leftArrowY * -1) + 8;
      rightArrowX = (rightArrowX * -1) + 7;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 199 && angle >= 190) {
        leftArrowX = (leftArrowX * -1) - 2;
      leftArrowY = (leftArrowY * -1) + 10;
      rightArrowX = (rightArrowX * -1) + 10;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 189 && angle >= 180) {
        leftArrowX = (leftArrowX * -1) - 1;
      leftArrowY = (leftArrowY * -1) + 14;
      rightArrowX = (rightArrowX * -1) + 12;
      //rightArrowY = rightArrowY * -1;
    } else if(angle <= 179 && angle >= 170) {
        leftArrowX = (leftArrowX * -1) + 1;
      leftArrowY = (leftArrowY * -1) + 14;
      rightArrowX = (rightArrowX * -1) + 12;
      rightArrowY = (rightArrowY) + -2;
    } else if(angle <= 89 && angle > 20) {
      //leftArrowX = leftArrowX * -1;
      //leftArrowY = leftArrowY * -1;
      //rightArrowX = rightArrowX * -1;
      rightArrowY = rightArrowY * -1;
    } else if (angle <= 20 && angle >= -90) {
        leftArrowX = leftArrowX * -1;
      leftArrowY = leftArrowY * -1;
      //rightArrowX = rightArrowX * -1;
      rightArrowY = rightArrowY * -1;
    }

    ren.path([
        'M', kx, ky,
        'L', kx + leftArrowX, ky + leftArrowY,
        'M', kx, ky,
        'L', kx + rightArrowX, ky + rightArrowY,
        'Z'
      ])
      .attr({
        'stroke-width': 1,
        stroke: 'black'
      })
      .add();
  }
}

}

标签： highcharts

Answer 1

谢谢Paweł，但我自己设法解决了（绘制基本箭头然后旋转它）：

ren.path([
              'M', kx, ky,
              'L', kx - 6, ky - 6,
              'M', kx, ky,
              'L', kx - 6, ky + 6,
              'Z'
            ]).attr({
              transform: 'rotate(' + angle + ')',
              'stroke-width': 1,
              stroke: '#2ecafa'
            }).css({
              'transform-origin': kx + 'px' + ' ' + ky + 'px'
            }).add();