highcharts绘制带箭头的坐标轴
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>