Highcharts 경로의 SVG 마커

Highcharts 차트에 화살표를 그리고 싶습니다. 지금까지 this으로 나타났습니다. 멋지지만 문제가 있습니다.Highcharts 경로의 SVG 마커

스트로크 폭이 길면 긴 화살표가 나타납니다.
화살표를 회전 시키려면 here과 같은 복잡한 계산이 필요합니다.

내가 훨씬 더 쉽게

내 코드가 될 것 Highcharts 경로 like in this SVG tutorial 그리기 화살표에 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();

출처

2014-03-02 Koos

확실하지 볼 수 있지만, 당신은 화살표의 중심을 회전 수, 그래서 좀 이렇게 될 것입니다 .. http://jsfiddle.net/ZS9wj/1 / – Ian

내가 SVG 마커를 사용하지 않고 화살표를 그릴 수 있었다. 화살표는 회전에 관계없이 올바른 지점을 정확히 나타냅니다. 시작과 끝 지점의 반경도 고려할 수 있습니다.

enter image description here

이 정말 유용 경우 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();

출처

2014-03-06 17:15:32 Koos

Highcharts 경로의 SVG 마커

답변

관련 문제