如何使用Highcharts在线图上绘制箭头？ [英] How to draw arrows on a line-chart with Highcharts?

问题描述

我试图在我的Highcharts线图的末尾添加一个箭头。我已经浏览了

解决方案

您应该包装drawGraph方法并为箭头添加代码。它可以通过路径方法实现。

 （function（H）{
 H.wrap（H.Series。原型，'drawGraph'，函数（继续）{
 
 //现在将原始函数的原始参数
 //应用于这个函数的参数
进行分割。 apply（this，Array.prototype.slice.call（arguments，1））; 
 
 var arrowLength = 15，
 arrowWidth = 9，
 series = this，
 data = series.data，
 len = data.length，
 segments = data，
 lastSeg = segments [segments.length  -  1]，
 path = []; 
 
 
 var lastPoint = null; 
 var nextLastPoint = null; 
 
 if（lastSeg.y == 0）{
 lastPoint = segments [segments.length  -  2]; 
 nextLastPoint = segments [segments.length  -  1]; 
} else {
 lastPoint = segm ents [segments.length  -  1]; 
 nextLastPoint = segments [segments.length  -  2]; 
 
 
 var angle = Math.atan（（lastPoint.plotX  -  nextLastPoint.plotX）/ 
（lastPoint.plotY  -  nextLastPoint.plotY））; 
 
 if（angle <0）angle = Math.PI + angle; 
 
 path.push（'M'，lastPoint.plotX，lastPoint.plotY）; 
 
 if（lastPoint.plotX> nextLastPoint.plotX）{
 path.push（
'L'，
 lastPoint.plotX + arrowWidth * Math.cos（角度），
 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（角度）
）; 
 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（路径）
 .attr（{
 fill：series.color 
}）
 。新增（series.group）; 
 
}）; 
}（Highcharts））; 
  

示例：

• http://jsfiddle.net/vyfsf1ft/

>

I'm trying to add an arrow to the end of my Highcharts line-chart. I've already looked through similar questions but the solutions don't seem to work:

The result i'm looking for (added in colors),

解决方案

You should wrap the drawGraph method and add the code for arrow. It can be realised by path method.

(function(H) {
        H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

          // Now apply the original function with the original arguments, 
          // which are sliced off this function's arguments
          proceed.apply(this, Array.prototype.slice.call(arguments, 1));

          var arrowLength = 15,
            arrowWidth = 9,
            series = this,
            data = series.data,
            len = data.length,
            segments = data,
            lastSeg = segments[segments.length - 1],
            path = [];


          var lastPoint = null;
          var nextLastPoint = null;

          if (lastSeg.y == 0) {
            lastPoint = segments[segments.length - 2];
            nextLastPoint = segments[segments.length - 1];
          } else {
            lastPoint = segments[segments.length - 1];
            nextLastPoint = segments[segments.length - 2];
          }

          var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
            (lastPoint.plotY - nextLastPoint.plotY));

          if (angle < 0) angle = Math.PI + angle;

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

        });
      }(Highcharts));

Example:

• http://jsfiddle.net/vyfsf1ft/

这篇关于如何使用Highcharts在线图上绘制箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！