Highcharts: Как установить уникальные изображения в верхней части серии гистограмм

Question

Я пытаюсь найти решение, в котором я могу установить изображения в верхней части каждой панели. На данный момент я еще не нашел решение.

Я пытался:

1. Чтобы установить изображения, добавив новую серию типа «разброс» с тем же значением, что и серия гистограмм, и маркер с изображением в качестве символа. Но если у меня несколько серий типа 'bar', точки серии разброса устанавливаются в середине, а не в верхней части каждого столбца. Я также хочу сохранить группировку, если серии связаны с одной и той же категорией. 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

В первом случае вы должны отключить grouping для серии:

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/