Highcharts路径上的SVG标记

我想在我的海图上画箭头，并提出了迄今为止。看起来不错，但有问题：

• 笔划宽度越大，箭头越长
• 旋转箭头将需要复杂的计算，如

如果我可以在Highcharts上使用SVG标记，那么绘制箭头将变得容易得多

我的代码：

  renderer.path(['M', 200, 0, 'L', 200, 200,'L', 225, 200,'L',200,250,'L', 175, 200,'L', 200, 200])
    .attr({
        'stroke-width': 5,
        stroke: 'red',fill:'red'
    })
    .add();
renderer.path(['M', 400, 0, 'L', 400, 200,'L', 425, 200,'L',400,250,'L', 375, 200,'L', 400, 200])
    .attr({
        'stroke-width': 50,
        stroke: 'red',fill:'red'
    })
    .add();

---

我没有使用SVG标记就画出了箭头。无论旋转方向如何，箭头都精确指向右侧点。它甚至可以考虑起点和终点的半径

看

---

我没有使用SVG标记就画出了箭头。无论旋转方向如何，箭头都精确指向右侧点。它甚至可以考虑起点和终点的半径

看

---

我没有使用SVG标记就画出了箭头。无论旋转方向如何，箭头都精确指向右侧点。它甚至可以考虑起点和终点的半径

看

---

我没有使用SVG标记就画出了箭头。无论旋转方向如何，箭头都精确指向右侧点。它甚至可以考虑起点和终点的半径

看

---

不确定这是否真的有用，但是你能绕着箭头中心旋转吗，所以它有点像这样。。不确定这是否真的有用，但是你能绕着箭头中心旋转吗，所以它有点像这样。。不确定这是否真的有用，但是你能绕着箭头中心旋转吗，所以它有点像这样。。不确定这是否真的有用，但是你能绕着箭头中心旋转吗，所以它有点像这样。。

  function drawArrow(startX, startY, startRadius, endX, endY, endRadius, width) {

    var angle = Math.PI + Math.atan((endX - startX) / (endY - startY)),
        arrowLength = 3 * width,
        arrowWidth = 1.5 * width,
        path = [],
        startArrowX,
        startArrowY,
        margin = 5;

    if (endY >= startY) {
        //correct for circle radius
        startX -= ((startRadius + margin) * Math.sin(angle));
        startY -= ((startRadius + margin) * Math.cos(angle));
        endX += ((endRadius + margin) * Math.sin(angle));
        endY += ((endRadius + margin) * Math.cos(angle));

        //correct for arrow head length
        endX += (arrowLength * Math.sin(angle));
        endY += (arrowLength * Math.cos(angle));

        //draw arrow head
        path.push('M', endX, endY);
        path.push(
            'L',
        endX - arrowWidth * Math.cos(angle),
        endY + arrowWidth * Math.sin(angle));
        path.push(
        endX - arrowLength * Math.sin(angle),
        endY - arrowLength * Math.cos(angle));
        path.push(
        endX + arrowWidth * Math.cos(angle),
        endY - arrowWidth * Math.sin(angle), 'Z');
    } else {
        //correct for circle radius
        startX += ((startRadius + margin) * Math.sin(angle));
        startY += ((startRadius + margin) * Math.cos(angle));
        endX -= ((endRadius + margin) * Math.sin(angle));
        endY -= ((endRadius + margin) * Math.cos(angle));

        //correct for arrow head length
        endX -= (arrowLength * Math.sin(angle));
        endY -= (arrowLength * Math.cos(angle));

        //draw arrow head
        path.push('M', endX, endY);
        path.push(
            'L',
        endX + arrowWidth * Math.cos(angle),
        endY - arrowWidth * Math.sin(angle));
        path.push(
        endX + arrowLength * Math.sin(angle),
        endY + arrowLength * Math.cos(angle));
        path.push(
        endX - arrowWidth * Math.cos(angle),
        endY + arrowWidth * Math.sin(angle), 'Z');

    }

    renderer.path(path)
        .attr({
        'stroke-width': 1,
        stroke: '#989898',
        fill: '#989898'
    }).add();
    renderer.path(['M', startX, startY, 'L', endX, endY])
        .attr({
        'stroke-width': width,
        stroke: '#989898'
    }).add();