折线图highcharts的箭头 [英] arrow of line chart highcharts

问题描述

我需要绘制线形图的箭头，但我不太清楚，这里有我的代码，它使箭头 http://jsfiddle.net/VQyVs/ 我有问题与系列2

I need to draw arrow of my line chart but i don't know well, here there are my code that make arrow http://jsfiddle.net/VQyVs/ I have probleme with 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);

};  

任何人都可以帮助我吗？谢谢

Can any one help me? Thanks

推荐答案

系列2排序不正确。它将箭头放在数组中的最后一个点上，这恰好是X轴上的第一个点。

Series 2 is not sorted properly. It's putting the arrow head on the last point in the array which happens to be the first point on the X axis.

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

更新

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

I think I understand what you are after now. To reverse the direction of the head, you'll have to test for the direction (is it moving to the left or right) and then modify how it's drawn:

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

查看新小提琴。

这篇关于折线图highcharts的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！