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/