SVG marker on Highcharts path

I want to draw arrows on my Highcharts chart and came up with this so far. Looks nice but has problems:

higher stroke-width gives a longer arrow.

rotating the arrow will require complicated calculation like here.

If I could use a SVG marker on a Highcharts path like in this SVG tutorial drawing arrows would become much easier

My code:

  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();

---

I managed to draw arrows without using SVG marker. The arrow points exactly to the right spot, regardless of the rotation. It can even take into account the radius of the start and end point.

See fiddle

  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();

链接地址: http://www.djcxy.com/p/76496.html

上一篇: 使用Raphael JS将所有SVG文本节点转换为路径节点

下一篇: SVG标记在Highcharts路径上