Highcharts 海图柱形图上的特殊标记

Highcharts 海图柱形图上的特殊标记,highcharts,Highcharts,我的问题和你的问题相似 我有一个柱状图,它是一个特定时期内共同基金收益的柱状图。我想用一个特殊的标记来突出共同基金的收益 例如,我的x轴上有-50到-25,-25到0,0到10,10到20,20到30,30到50,以及相应的Y值。我想在“20-30”上用一个标记来强调,以表明感兴趣的共同基金落入了这个范围。我知道我们可以用样条曲线图来做 有没有一种方法可以对柱状图执行相同的操作?通常,您不能向柱状图添加自定义标记,但可以添加类似的行为。我创建了一个简单的示例,其中包含了散点系列的自定义标记,如

我的问题和你的问题相似

我有一个柱状图,它是一个特定时期内共同基金收益的柱状图。我想用一个特殊的标记来突出共同基金的收益

例如,我的x轴上有-50到-25,-25到0,0到10,10到20,20到30,30到50,以及相应的Y值。我想在“20-30”上用一个标记来强调,以表明感兴趣的共同基金落入了这个范围。我知道我们可以用样条曲线图来做


有没有一种方法可以对柱状图执行相同的操作?

通常,您不能向柱状图添加自定义标记,但可以添加类似的行为。我创建了一个简单的示例,其中包含了散点系列的自定义标记,如果您想在图例中添加更多系列,这很有用:(如果没有,只需设置
showInLegend:false


另一种解决方案是使用Highcharts渲染器在特定位置绘制自定义形状。在这里您可以找到有关渲染器的更多信息:

谢谢Pawel。我最终选择了渲染器路线,能够在特定点附近定位图像/文本,如highcharts中的本例所示
Highcharts.updateMarketMarkers = function (chart) {
    /* get category width */
    var catWidth = chart.xAxis[0].width / chart.xAxis[0].categories.length;
    /* get padding of each column (two sides) */
    var catPadding = chart.series[0].options.pointPadding * catWidth;
    /* actual value - padding - symbol width/2 */ 
    chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r / 2);
};
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        showAxes: false,
        events: {
            load: function () {
                Highcharts.updateMarketMarkers(this);
            },
            redraw: function () {
                Highcharts.updateMarketMarkers(this);
            }
        }
    },
    ...