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

将背景图像应用于列

1 个答案: