显示栏为Highcharts的箭头

问题描述

是否可以使用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，
 $ b b 
 
} 
 
}，
系列：[{
 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 
 
 
}] 
 }）; 
 
}）; 
  

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.

解决方案

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!

这篇关于显示栏为Highcharts的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！