应用背景图像到列

Question

我使用Highcharts创建带有两个数据点柱形图。这里只有一个系列。我使用的造型使每列不同的颜色，但我也想补充每一列后面的背景图像。我已经使用图案填充试过，但它重复图像列的整个区域，而我只是在每一列的底部需要一个30×30的图像。我用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