highcharts绘制带箭头的坐标轴

最新推荐文章于 2023-08-11 21:52:46 发布

wallowyou

最新推荐文章于 2023-08-11 21:52:46 发布

阅读量1.8k

点赞数

分类专栏： js web前端 highcharts

本文链接：https://blog.csdn.net/wallowyou/article/details/88065648

版权

web前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

highcharts

1 篇文章 0 订阅

订阅专栏

highcharts绘制带箭头的坐标轴

参考官方文档点击跳转

highcharts默认的坐标轴是没有箭头的，下面介绍给坐标轴添加箭头的方法

1. 在使用highcharts绘制图表的时候需要设置坐标轴带箭头，在查阅相关文档发现highcharts可以自行拓展功能,拓展功能有三个方式：

1.1 WRAPPING UP A PLUGIN(包装成一个插件)

Highcharts插件应该包含在一个匿名的自执行功能中，以防止对全局范围的可变污染。
eg:

(function (H) {
   var localVar,         // local variable
      Series = H.Series; // shortcut to Highcharts prototype
   doSomething();
}(Highcharts));

1.2 INITIALIZING AN EXTENSION WHEN THE CHART INITIALIZES(在图表初始化时初始化扩展)

事件可以添加到类和实例中。
为了添加一般监听器来初始化每个图表上的扩展，可以将事件添加到Chart类。
eg:

H.addEvent(H.Chart, 'load', function(e) {
    var chart = e.target;
    H.addEvent(chart.container, 'click', function(e) {
        e = chart.pointer.normalize(e);
        console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY);
    });
    H.addEvent(chart.xAxis[0], 'afterSetExtremes', function(e) {
        console.log('Set extremes to ' + e.min + ', ' + e.max);
    });
});

1.3 WRAPPING PROTOTYPE FUNCTIONS(包装原型功能)

具有动态特性的JavaScript在动态改变脚本行为方面非常强大。
在Highcharts中，我们创建了一个名为wrap的实用程序，它包装了一个现有的原型函数（“method”），并允许您在它之前或之后添加自己的代码。
wrap函数接受父对象作为第一个参数，作为第二个参数包装的函数的名称，以及作为第三个参数的回调替换函数。
原始函数作为替换函数的第一个参数传递，之后是原始参数。
eg:

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

  // Before the original function
  console.log("We are about to draw the graph: ", this.graph);

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

  // Add some code after the original function
  console.log("We just finished drawing the graph: ", this.graph);

});

2.利用第三个wrap方法实现

关键代码：

Highcharts.wrap(Highcharts.Axis.prototype, "getLinePath", function(
  p,
  lineWidth
) {
  var linePath = p.call(this, lineWidth);
  if (this.options.arrowOnEnd) {
    var arrowFactor = 10,
      x,
      y,
      arrowPath,
      newPath;

    if (this.horiz) {
      x = linePath[4] = linePath[4] - arrowFactor;
      y = linePath[5];
      arrowPath = [
        "L",
        x - 0.35 * arrowFactor,
        y - 0.35 * arrowFactor,
        "L",
        x + 1 * arrowFactor,
        y,
        "L",
        x - 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y
      ];
      newPath = linePath.concat(arrowPath);
    } else {
      x = linePath[1];
      y = linePath[2]; // + arrowFactor;

      arrowPath = [
        "M",
        x,
        y,
        "L",
        x - 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y - 1 * arrowFactor,
        "L",
        x + 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y
      ];

      newPath = arrowPath.concat(linePath);
    }

    return newPath;
  }

  return linePath;
});

以上代码就是利用wrap函数包装原型的功能，只要在xAxis中添加一个arrowOnEnd属性就可以给改坐标轴结尾添加坐标轴。对于yAxis同理，y轴也一样，通过设置上面函数的arrowFactor可以改变箭头的大小。

css样式的设置：
可以在全局修改样式

.highcharts-axis-line {
    fill: rgb(0, 194, 194); 
    stroke-linejoin: round;
}

通过修改highcharts-axis-line类中的fill可以修改箭头内部的填充色。
最终效果如下图
.

3. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .highcharts-axis-line {
      fill: rgb(0, 194, 194); 
      stroke-linejoin: round;
  }
  </style>
</head>
<body>
  <div id="container" style="width: 600px;height:400px;"></div>
  <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script>
    Highcharts.wrap(Highcharts.Axis.prototype, "getLinePath", function(
  p,
  lineWidth
) {
  var linePath = p.call(this, lineWidth);
  if (this.options.arrowOnEnd) {
    var arrowFactor = 10,
      x,
      y,
      arrowPath,
      newPath;
    if (this.horiz) {
      x = linePath[4] = linePath[4] - arrowFactor;
      y = linePath[5];
      arrowPath = [
        "L",
        x - 0.35 * arrowFactor,
        y - 0.35 * arrowFactor,
        "L",
        x + 1 * arrowFactor,
        y,
        "L",
        x - 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y
      ];
      newPath = linePath.concat(arrowPath);
    } else {
      x = linePath[1];
      y = linePath[2]; // + arrowFactor;
      arrowPath = [
        "M",
        x,
        y,
        "L",
        x - 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y - 1 * arrowFactor,
        "L",
        x + 0.35 * arrowFactor,
        y + 0.35 * arrowFactor,
        "L",
        x,
        y
      ];
      newPath = arrowPath.concat(linePath);
    }
    return newPath;
  }
  return linePath;
});
const chart = Highcharts.chart('container', {
		title: {
				text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
		},
    credits: {
      enabled: false
    },
    xAxis: {
      gridLineWidth: 0,
      arrowOnEnd: true,
      lineColor: "rgb(0, 194, 194)",
      lineWidth: 2,
      tickLength: 0
    },
		yAxis: {
				title: {
						text: '就业人数'
				},
      gridLineWidth: 0,
      arrowOnEnd: true,
      lineColor: "rgb(0, 194, 194)",
      lineWidth: 2,
      tickLength: 0
		},
		legend: {
			enabled: false
		},
		plotOptions: {
      series: {
          pointStart: 2010
      }
		},
		series: [{
				name: '安装，实施人员',
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		}]
});
  </script>
</body>
</html>