将背景图像应用到列答案

【问题标题】：Apply Background Image to A Column将背景图像应用到列
【发布时间】：2019-02-05 01:30:12
【问题描述】：

我正在使用 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

【问题讨论】：

标签： highcharts

【解决方案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

【讨论】：