화살표

Question

나는 내 라인 차트의 화살표를 그릴 필요하지만 난 잘 알고, 여기에 내가 시리즈 2

var lineSeries = Highcharts.seriesTypes.line; 


var lineDrawGraph = lineSeries.prototype.drawGraph; 
lineSeries.prototype.drawGraph = function() { 

    var arrowLength = 15, 
     arrowWidth = 9, 
     series = this, 
     segments = series.linedata || series.segments, 
     lastSeg = segments[segments.length - 1], 
     lastPoint = lastSeg[lastSeg.length - 1], 
     nextLastPoint = lastSeg[lastSeg.length - 2], 
     angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX)/
     (lastPoint.plotY - nextLastPoint.plotY)), 
     path = []; 

     angle = Math.PI+angle; 

    lineDrawGraph.apply(series, arguments); 

    path.push('M', lastPoint.plotX, lastPoint.plotY); 
    path.push(
     'L', 
     lastPoint.plotX + arrowWidth * Math.cos(angle), 
     lastPoint.plotY - arrowWidth * Math.sin(angle) 
    ); 
    path.push(
     lastPoint.plotX + arrowLength * Math.sin(angle), 
     lastPoint.plotY + arrowLength * Math.cos(angle) 
    ); 
    path.push(
     lastPoint.plotX - arrowWidth * Math.cos(angle), 
     lastPoint.plotY + arrowWidth * Math.sin(angle), 
     'Z' 
    ); 

    series.chart.renderer.path(path) 
     .attr({ 
      fill: series.color 
     }) 
     .add(series.group); 

}; 

수있는 하나 probleme 한 http://jsfiddle.net/VQyVs/ 화살표 만들어 내 코드가없는 도와주세요? 감사합니다

Answer 1

시리즈 2가 올바르게 정렬되지 않았습니다. 그것은 배열의 마지막 지점에 X 축의 첫 번째 점인 화살표가 생깁니다.

{ 
    data: [[0.10391336,-0.647706317], 
     [0.208684058,-0.439022259], 
    [0.031920245,-0.407102014], 
    [-0.280249839,-0.687351853]].sort(), // I added the .sort... 
marker: { 
     enabled: false 
    } 
    } 

UPDATE

는 내가 지금 후에 무엇인지 이해 생각합니다. 머리의 방향을 반대로하려면 방향을 테스트해야합니다 (오른쪽 왼쪽으로 이동하거나한다) 한 후이 그려 어떻게 수정 :

if (lastPoint.plotX > nextLastPoint.plotX) 
    { 
     // to the right 
     path.push(
      'L', 
      lastPoint.plotX + arrowWidth * Math.cos(angle), 
      lastPoint.plotY - arrowWidth * Math.sin(angle) 
     ); 
     path.push(
      lastPoint.plotX + arrowLength * Math.sin(angle), 
      lastPoint.plotY + arrowLength * Math.cos(angle) 
     ); 
     path.push(
      lastPoint.plotX - arrowWidth * Math.cos(angle), 
      lastPoint.plotY + arrowWidth * Math.sin(angle), 
      'Z' 
     ); 
    } 
    else 
    {   
     // to the left 
     path.push(
      'L', 
      lastPoint.plotX - arrowWidth * Math.cos(angle), 
      lastPoint.plotY + arrowWidth * Math.sin(angle) 
     ); 
     path.push(
      lastPoint.plotX - arrowLength * Math.sin(angle), 
      lastPoint.plotY - arrowLength * Math.cos(angle) 
     ); 
     path.push(
      lastPoint.plotX + arrowWidth * Math.cos(angle), 
      lastPoint.plotY - arrowWidth * Math.sin(angle), 
      'Z' 
     ); 
    } 

는 fiddle 새를 참조하십시오.

Answer 2

문제는 각도 원래 값의 최우선 함께 :

angle = Math.PI+angle; 

가되어야한다

if (lastPoint.plotX > nextLastPoint.plotX){ 
     if (angle < 0) angle = Math.PI + angle; 
    } 
    else{ 
     if (angle > 0) angle = Math.PI + angle; 
    } 

라인의 방향에 대한 마크의 포인트가 정확하지만, 제안 된 해결책은 선의 마지막 두 점의 기울기에 따라 항상 작동하지는 않습니다. FWIW 화살촉 반전 - -

는 fiddle