Display bar as an arrow with Highcharts

问题

Is it possible to draw a column bar chart with Highcharts.js, where one bar is displayed as an arrow?

I have following chart

$(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/ and I want the last bar displayed as an arrow or with an arrow tip.

Thanks for your help.

回答1:

What I would suggest is adding a "dummy" line series with a triangle marker for your arrowhead. I got the inspiration for this from a Highcharts forum post asking a similar question (see http://forum.highcharts.com/highcharts-usage/creating-an-arrowhead-with-the-renderer-t27746/).

Here's the code I worked up, with explanations as comments to what each part does:

/* 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
    }
}

See the working fiddle at: https://jsfiddle.net/brightmatrix/hha2o3bu/2/

I hope this is helpful for you!

来源：https://stackoverflow.com/questions/37148788/display-bar-as-an-arrow-with-highcharts