Highcharts 6.0.7自定义SVG元素导出失败问题求助

我之前也碰到过一模一样的问题，当时折腾了好一阵才搞明白：你通过chart.renderer创建的自定义SVG元素，如果直接添加到chart.container里，Highcharts的导出系统根本不会把它们算成图表的一部分——导出时只会序列化图表核心容器（比如存放系列元素的seriesGroup）里的内容，外层的元素会被忽略。

下面给你两个最实用的解决方案，附上手写的可运行代码（你可以直接复制到JSFiddle里测试，记得引入Highcharts 6.0.7、exporting.js和offline-exporting.js模块）：

方案一：改造现有renderer代码，把元素加到图表内部容器 #

这个方法适合你已经写了大量renderer代码的场景，只需要修改最后一步的add()方法参数即可：

// 创建图表
var chart = Highcharts.chart('container', {
    title: {
        text: '自定义SVG导出测试'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    series: [{
        name: '业务数据',
        data: [10, 20, 15, 25, 30]
    }],
    exporting: {
        // 开启离线导出，禁用 fallback 到官方服务器
        fallbackToExportServer: false,
        enabled: true
    }
});

// 添加自定义线条——关键：把元素加到chart.seriesGroup里
var customLine = chart.renderer.path([
    'M', chart.plotLeft + 50, chart.plotTop + 50, 
    'L', chart.plotLeft + chart.plotWidth - 50, chart.plotTop + chart.plotHeight - 50
])
.attr({
    stroke: '#ff0000',
    'stroke-width': 2,
    zIndex: 10 // 确保在数据系列上方显示
})
.add(chart.seriesGroup); // 这里不是默认的add()，而是指定添加到seriesGroup

// 添加自定义标注文本
var customLabel = chart.renderer.text('重要标注点', chart.plotLeft + 100, chart.plotTop + 100)
.attr({
    fill: '#0000ff',
    fontSize: 16,
    fontWeight: 'bold',
    zIndex: 11
})
.add(chart.seriesGroup);

为什么这能行？ #

chart.seriesGroup是Highcharts专门用来存放所有数据系列、标注等核心图表元素的容器，导出系统会递归序列化这个容器下的所有SVG元素，所以把自定义元素放到这里，导出时自然会被包含进去。

方案二：用官方Annotation模块（更省心） #

如果你还没写太多自定义代码，强烈推荐用Highcharts自带的Annotation模块——它不仅能轻松实现标注、线条，还自动支持导出，不需要额外处理：

// 记得引入Annotation模块：https://code.highcharts.com/6.0.7/modules/annotations.js
var chart = Highcharts.chart('container', {
    title: {
        text: '官方Annotation导出测试'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    series: [{
        name: '业务数据',
        data: [10, 20, 15, 25, 30]
    }],
    // 配置Annotation
    annotations: [{
        // 自定义线条
        shapes: [{
            type: 'path',
            points: [{
                x: chart.plotLeft + 50, 
                y: chart.plotTop + 50
            }, {
                x: chart.plotLeft + chart.plotWidth - 50, 
                y: chart.plotTop + chart.plotHeight - 50
            }],
            stroke: '#ff0000',
            strokeWidth: 2
        }],
        // 自定义标注文本
        labels: [{
            point: {
                x: 1, // 对应x轴第二个分类（索引从0开始）
                y: 20,
                xAxis: 0,
                yAxis: 0
            },
            text: '官方标注',
            style: {
                color: '#0000ff',
                fontSize: '16px',
                fontWeight: 'bold'
            }
        }]
    }],
    exporting: {
        fallbackToExportServer: false,
        enabled: true
    }
});

测试方法 #

把上面的代码复制到JSFiddle，引入对应的Highcharts模块后，点击图表右上角的导出按钮，选择PNG或PDF，就能看到自定义元素已经被包含在导出文件里了。

内容的提问来源于stack exchange，提问作者cubanito.1991