0

我需要绘制我的折线图的箭头，但我不太清楚，这里有我制作箭头的代码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);

};

谁能帮我？谢谢

4

2 回答 2

2

系列 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'
        );
    }

见新小提琴。

在此处输入图像描述

于 2013-05-18T22:52:03.637 回答
1

问题在于覆盖角度的原始值：

angle = Math.PI+angle;

应该：

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

Mark 关于直线方向的观点是正确的，但建议的解决方案并不总是有效，具体取决于直线最后两个点的斜率。

见小提琴

于 2014-04-03T16:00:15.597 回答