使用Highcharts将箭头显示为箭头

Question

是否可以使用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/我希望最后一个条显示为箭头或箭头。

感谢您的帮助。

Answer 1

我建议添加一个带有箭头标记的“虚拟”系列。我从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
    }
}

请参阅工作小提琴：https://jsfiddle.net/brightmatrix/hha2o3bu/2/

我希望这对你有所帮助！