Comment ajouter la flèche à la fin de la ligne lors de l'utilisation de la dispersion de type

Comment puis-je ajouter une flèche à chaque extrémité de ligne correctement où y n'est pas égal à zéro, et le type de série est une diffusion avec la largeur de ligne 2, ici je peux voir la flèche est ajoutée, mais elle n'est pas correctement ajoutée,

S'il vous plaît voir ce Fiddle Partiellement travaillant

C'est mon JS, le prototype original est écrit par le contributeur principal de stackoverflow Mark

$(function () { var lineSeries = Highcharts.seriesTypes.scatter; 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); if (lastPoint.plotX > nextLastPoint.plotX) { 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 { 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); }; var chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'scatter' }, plotOptions: { series: { animation: { duration: 2000 }, lineWidth: 2, marker: { enabled: false } }, states: { hover: { enabled: true, lineWidth: 2 }, } }, series: [{ name: 'main', id: 'main', data: [ [0, 0], [(-3.969 +0), -1.001] ] }, { name: 'main', linkedTo: 'main', data: [ [1, 0], [(-4.578 +1), 0.596] ] }, { name: 'main', linkedTo: 'main', data: [ [2, 0], [(1.593 + 2), 0.484] ] }, { name: 'main', linkedTo: 'main', data: [ [3, 0], [(-1.622 + 3), 1.580] ] }] }); }); 

Aidez-nous …

• Comment extraire les données de json vers javascript highchart?
• Passage entre plusieurs pages en utilisant des boutons ou un texte de lien
• Comment changer le symbole du marqueur et l'étiquette de données avec un style personnalisé dans Highcharts
• Live series multiples avec Highchart
• Comment créez-vous un lien sur les diagrammes élevés pour ouvrir une fenêtre contextuelle avec un autre tableau

Merci Mark pour le partage du code …

• Highcharts – Comment puis-je changer le style du filtre?
• Tableau de tarte radial Datalabels in Highcharts
• La info-bulle Highchart montre le point le plus proche
• Comment faire en sorte que deux graphiques utilisant Highchart s'affichent dans la même ligne côte à côte en utilisant div
• Javascript highchart photo slide

 data: [ [0, 0], [(-3.969 +0), -1.001] ].sort() // this is wrong order, I added sort...