如何在Highcharts中嵌入现有SVG？求相关实现示例

没问题！其实在Highcharts里嵌入现有SVG是完全可行的——官方文档可能没单独做针对性说明，但我们可以借助Highcharts的渲染器工具轻松实现。下面给你两个实用的实现示例：

方法一：加载外部SVG文件 #

如果你的SVG是独立文件（存在本地或服务器上），可以直接用Highcharts的renderer.image()方法加载，和加载PNG的逻辑几乎一致，只是把文件路径换成SVG即可：

// 初始化图表
Highcharts.chart('container', {
    title: {
        text: '嵌入外部SVG示例'
    },
    series: [{
        data: [12, 28, 15, 32]
    }],
    chart: {
        events: {
            // 图表加载完成后插入SVG
            load: function() {
                this.renderer.image(
                    './your-custom.svg', // 替换成你的SVG文件路径
                    120, // SVG在图表中的X坐标
                    60,  // SVG在图表中的Y坐标
                    70,  // SVG显示宽度
                    70   // SVG显示高度
                ).add(); // 将SVG添加到图表中
            }
        }
    }
});

方法二：直接嵌入SVG代码字符串 #

如果已经有SVG的源码字符串（比如从后端获取或者本地定义），可以通过渲染器的容器元素直接插入SVG代码，灵活性更高：

Highcharts.chart('container', {
    title: {
        text: '嵌入SVG代码示例'
    },
    series: [{
        data: [8, 22, 18, 25]
    }],
    chart: {
        events: {
            load: function() {
                // 自定义的SVG代码（这里是一个简单的图标示例）
                const customSvg = `<svg width="60" height="60" viewBox="0 0 24 24" fill="#2980b9" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>`;

                // 创建一个分组容器来放置SVG
                const svgContainer = this.renderer.g()
                    .attr({
                        x: 200, // 容器X坐标
                        y: 60   // 容器Y坐标
                    })
                    .add();

                // 将SVG代码插入到容器中
                svgContainer.element.innerHTML = customSvg;
            }
        }
    }
});

注意事项 #

• 若加载外部SVG，要确保文件路径可访问，跨域场景下需配置好CORS规则
• SVG内部的外部资源（如字体、引用的其他SVG）需保证能正常加载
• 可以通过调整renderer.image()或attr()中的x/y/width/height参数，控制SVG在图表中的位置和显示大小

内容的提问来源于stack exchange，提问作者Jake