Highcharts:如何在条形图系列顶部设置独特的图像

Question

我正在尝试找到一种解决方案，让我能够在每个栏的顶部设置图像。目前我还没有找到解决方案。

我试过:

1. 通过添加与条形图系列具有相同值的“散点图”类型的新系列和以图像作为符号的标记来设置图像。但是，如果我有多个类型为“条形图”的系列，则散点系列的点设置在中间而不是每个条形图的顶部。如果系列链接到同一类别，我还想保留分组。 const weather_serie = {
type: 'scatter',
data: this.visualisationService
.generate_serie(this.categories[elem], weather, this.period)
.map((val, index) => {
if (val.hasOwnProperty('weather')) {
return {
y: isNaN(visit_serie.data[index])
? 0
: visit_serie.data[index],
marker: {
symbol: 'url(https://openweathermap.org/img/w/${
val.weather
}.png)'
}
};
} else {
return NaN;
}
}),
enableMouseTracking: false,
showInLegend: true
};

2. 通过添加数据标签来设置图像并在图表选项中对其进行格式化。但我没有找到如何设置链接到同一类别内正确条形图的唯一图像。其他一些评论是图像不在栏的中间(从图像的左下角开始)并且悬停时工具提示显示在图像后面。 plotOptions: {
bar:{
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function() {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;';
}
}
}


Answer 1

在第一种情况下，您应该禁用系列上的分组:

plotOptions: {
    series: {
        grouping: false
    }
}

现场演示:http://jsfiddle.net/BlackLabel/v7qx1s5u/

在第二种情况下，您可以为点定义单独的数据标签:

series: [{
    type: 'column',
    data: [{
            x: 0,
            y: 1,
            dataLabels: {
                align: 'center',
                enabled: true,
                useHTML: true,
                formatter: function() {
                    return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>';
                }
            }
        },
        [1, 2],
        [2, 3]
    ]
}]

或者在 formatter 函数中定义一些规则，其中数据标签应该是一些图像:

    dataLabels: {
        align: 'center',
        enabled: true,
        useHTML: true,
        formatter: function(){
            if (this.point.index === 1){
                return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>&nbsp;';
            }

        }
    }

现场演示:http://jsfiddle.net/BlackLabel/72Lahvp4/