我会在图表中看到如下所示的单行箭头:
<-------X------------>
1 2 3 4 5
或者像这样(其中/假设是箭头:)):
\/
-------------------------
| 1 | 2 | 3 | 4 | 5 |
-------------------------
我尝试了一点但没有任何结果,我找不到任何好的例子。这有什么好的高级图表吗?
答案 0 :(得分:1)
请参阅此实时演示:http://jsfiddle.net/kkulig/u3qj6u74/
它包含负责绘制图形的包装核心函数:
(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,
lastPoint = series.points[series.points.length - 1],
nextLastPoint = series.points[series.points.length - 2],
path = [];
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');
}
if (series.arrow) {
series.arrow.attr({
d: path
});
} else {
series.arrow = series.chart.renderer.path(path)
.attr({
fill: series.color
})
.add(series.group);
}
});
}(Highcharts));
您可以轻松调整此代码,以便两端都有箭头。
有关包装的Dosc页面:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts