Question

我需要画出折线图的箭头，但我不太清楚，这里有我的代码制作箭头http://jsfiddle.net/VQyVs/我对serie 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
     }
   }

<强>更新

我想我明白你现在的样子。要反转头部的方向，你必须测试方向（是向左还是向右移动），然后修改它的绘制方式：

    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。

enter image description here

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

折线图highcharts的箭头

2 个答案: