箭頭

Question

我需要我的畫線圖中的箭頭，但我不知道好了，這裏有我的代碼，使箭頭http://jsfiddle.net/VQyVs/我已經probleme意甲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); 

}; 

任何一個可以幫我？謝謝

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; 
    } 

馬克的關於該行的方向點是正確的，但所提出的解決方案並不總是依賴於線路的最後兩個點的斜率。

見fiddle