Question

我正通过chart.renderer.image()向我的图表添加基于SVG的图片，如this jsfiddle example所示：

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    }, function (chart) { // on complete

    chart.renderer.image('https://cloud3squared.com/files/example.svg', 100, 100, 70, 70)
            .add();
    });
});

在原始的SVG文件中，我可以使用以下内容更改SVG中图形的填充颜色：

style="fill:#ffffff;fill-opacity:1"

将其从黑色变为白色。但我希望能够在代码中动态设置这种颜色。我尝试了各种各样的方法但没有成功。有什么想法吗？

Answer 1

如果使用Highcharts Renderer添加图像，则会添加图像。要添加能够动态更改其属性的SVG元素，请使用另一个创建SVG元素的Renderer方法，如：

path - http://api.highcharts.com/highcharts#Renderer.path
rect - http://api.highcharts.com/highcharts#Renderer.rect
circle - http://api.highcharts.com/highcharts#Renderer.circle

等

您的图片是一组路径，因此应该很容易。示例：http://jsfiddle.net/32Lqpe14/

如果您愿意，可以将所有元素添加到自定义group。

修改可以使用Highcharts Renderer从原始SVG图像重新创建SVG元素。您可以使用jQuery动态加载SVG，但CORS问题可能是一个问题，因此也可以使用HTML中的SVG：

演示：http://jsfiddle.net/2mch6ja3/

（有关详情，请参阅以下评论。）

Highcharts渲染器：填充嵌入式SVG图像的颜色

1 个答案: