如何在使用类型散点图时将箭头添加到行尾

如何在y不等于0的情况下正确地为每一行添加箭头，并且系列类型是使用线宽2散布的，这里我可以看到箭头已添加，但未正确添加，

请看这个 部分工作小提琴

这是我的JS，最初的原型是由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] ] }] }); }); 

请帮忙..

感谢Mark分享代码..

Answer 1

这不是让你搞砸的分散点; 这是因为您的数据没有正确排序。 Highcharts期望输入数据按x值排序 ：

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

此外，您需要从此处将修复程序应用于我的原始代码。

把它放在一起，这是一个更新的小提琴 。