Применить фоновое изображение к столбцу

Question

Я использую Highcharts для создания столбчатой ​​диаграммы с двумя точками данных.Там только одна серия.Я использую стилизацию, чтобы сделать каждый столбец разным цветом, но я также хотел бы добавить фоновое изображение позади каждого столбца.Я попытался использовать шаблон заливки, но он повторяет изображение для всей области столбца, тогда как мне просто нужно одно изображение 30x30 внизу каждого столбца.Я также попытался с помощью chart.renderer.image добавить изображение svg и сумел правильно его расположить, но не могу сделать его адаптивным (диаграмма будет просматриваться на планшетах и ​​мобильных устройствах в дополнение к экранам компьютеров).

Детали моего графика ниже:

    const categoryColors = {
        'cat1': '#ff9800',
        'cat2': '#8256ce'
    };

    Highcharts.chart('gap_bar_chart', {
        chart: {
            type: 'column'
        },
        title: {
            text: null
        },
        xAxis: {
            categories: ['cat1','cat2'],
            labels: {
                useHTML: true,
                formatter: function () {
                    console.log(this);
                return '<span style="color: ' +categoryColors[this.value] + '">'+this.value+'</span>';
                }   
            },

        },
        yAxis: {
            min: 0,
            title: {
                useHTML: true,
                text: '<b>Percent Earning Junior Status</b>'
            },
            labels: {
                format: "{value} %"
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            lineColor: 'transparent'
        },
        tooltip: {
            headerFormat: '<table><tr><th>Percent of Students Earning Junior Status within 2 Years</th></tr><tr><th><hr/></th></tr>',
            pointFormat: '<tr><td><b>{point.name}</b>:  {point.y: .0f}% ({point.numberStr} students)</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            data: [
            {
                y: chartData.p_jun2yr_nongap*100 || 0,
                total: chartData.n_jun2yr_nongap,
                color: '#FCCA7D',
                category: 'Non-URM',
                name: 'Non-URM',
                numberStr: chartData.n_jun2yr_nongap.toLocaleString()
            },
            {
                y: chartData.p_jun2yr_gap*100 || 0,
                total: chartData.n_jun2yr_gap,
                color: '#9675CF',
                category: 'cat2',
                name: 'cat2',
                numberStr: chartData.n_jun2yr_gap.toLocaleString()
            }

            ]

        }]
    });

Вот что я хотел бы сделать: https://imgur.com/a/oTG34G6

Answer 1

В render событии вы можете использовать Highcharts.SVGRenderer.image, чтобы добавить изображение и сделать его положение и размер динамически зависимыми от столбца:

        events: {
            render: function() {
                var chart = this,
                    shape,
                    points = this.series[0].points;

                if (chart.customImages) {
                    chart.customImages.forEach(function(el) {
                        el.destroy();
                    });
                    chart.customImages.length = 0;
                } else {
                    chart.customImages = [];
                }

                points.forEach(function(p) {
                    shape = p.shapeArgs;
                    chart.customImages.push(
                        chart.renderer.image(
                            'https://www.highcharts.com/samples/graphics/sun.png',
                            shape.x + chart.plotLeft + shape.width / 2 - shape.width / 2,
                            shape.y + chart.plotTop + shape.height - shape.width,
                            shape.width,
                            shape.width
                        ).attr({
                            zIndex: 3
                        }).add()
                    );
                });
            }
        }

Демонстрационная версия: http://jsfiddle.net/BlackLabel/eLwv9ruh/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image