是否可以使用 Highcharts.js 绘制柱形条形图，其中一个条形显示为箭头？
我有以下图表
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Title'
},
xAxis: {
categories: [
'2016',
'2017',
'2018'
]
},
yAxis: [{
min: 0,
title: {
text: 'Header'
}
}, {
title: {
text: ''
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
series: [{
name: 'Bar1',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.0
}, {
name: 'Bar2',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.0
},{
name: 'Bar3',
color: 'rgba(100,86,100,.9)',
data: [120, 70, 50],
pointPadding: 0.43,
pointPlacement: -0.0
},{
name: 'Bar4',
color: 'rgba(126,86,100,.9)',
data: [100, 70, 50],
pointPadding: 0.43,
pointPlacement: -0.2
}]
});
});
https://jsfiddle.net/hha2o3bu/我希望最后一个栏显示为箭头或带有箭头提示。
感谢您的帮助。
最佳答案
我建议为箭头添加一个带有三 Angular 形标记的“虚拟”线系列。我从 Highcharts 论坛的一篇提出类似问题的帖子中得到了灵感(请参阅 http://forum.highcharts.com/highcharts-usage/creating-an-arrowhead-with-the-renderer-t27746/ )。
这是我编写的代码，并对每个部分的功能进行了注释:
/* dummy series */
{
name: 'marker series',
type: 'line',
lineColor: 'transparent', /* makes line invisible */
data: [null,null,50], /* use nulls where you don't want arrowheads to appear */
showInLegend: false, /* will not show in legend */
enableMouseTracking: false, /* users can't interact with the series */
marker: {
symbol: 'triangle',
fillColor: 'rgba(126,86,100,.9)', /* match to the color of your column */
radius:25
}
}
查看工作 fiddle :https://jsfiddle.net/brightmatrix/hha2o3bu/2/
希望这对您有帮助!
关于javascript - 使用 Highcharts 将条形图显示为箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37148788/