Javascript Highchart极坐标图SVG的多种背景色

我正在尝试用highchart库创建Quinn模型

使用highchart和 ，我可以创造一些半工作的东西

但我遇到的问题是，如果我尝试将SVG写入画布（创建固定图像），则窗格段颜色不会随之导出

我有一个样品在 仍然有一些纠结不起作用，不知道为什么，因为它在我的服务器上运行良好。我要试着为一个工作样本修复它

那么，有没有办法将chart.renderer.add（）绑定到highchart对象，以便SVG拥有完整的数据

$(function () {
    Highcharts.setOptions({
        plotOptions: {
            series: {
                animation: false
            }
        }
    });

    var chart = new Highcharts.Chart({
        chart: {
            polar: true,
            renderTo: 'container'
        },
        title: {
            text: ''
        },
        legend: {
            enabled:false
        },
        tooltip: {
            enabled:false
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{
                backgroundColor: {
                    radialGradient: {
                        cx: 0.5,
                        cy: 0.5,
                        r: 2
                    },
                    stops: [
                        [0, 'white'],
                        [1, 'black']
                    ]
                }
            }]
        },
        xAxis: {
            categories: [

                'Quadrant 1', 
                'Quadrant 2', 
                'Quadrant 3', 
                'Quadrant 4' 
            ]
        },
        yAxis: {
            min: 0,
            max: 10
        },
        series: [{
            data: [6, 3, 5, 1000],
            color: '#000',
            name: 'Main Score'
        }]
    });

    //plotting starts from top-left clockwise to bottom-right
    var colors = [ "orange", "red", "green", "blue" ];    
    var parts = 4;

    for(var i = 0; i < parts; i++) {
        chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                           chart.plotTop + chart.yAxis[0].center[1], 
                           chart.yAxis[0].height, 
                           0, 
                           -Math.PI + (Math.PI/(parts/2) * i), 
                           -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
            fill: colors[i % colors.length],
            'stroke-width': 1,
            'opacity': 0.6
        }).add();
    }

    // Get the cart's SVG code
    var svg = chart.getSVG();

    var render_width = 600;
    var render_height = 400;

    // Create a canvas
    var canvas = document.getElementById('canvas');
    canvas.height = render_height;
    canvas.width = render_width;

    // Create an image and draw the SVG onto the canvas
    var image = new Image;
    image.onload = function() {
        canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
    };
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
});

$（函数（）{
Highcharts.setOptions({
打印选项：{
系列：{
动画：错误
}
}
});
var图表=新的Highcharts.图表({
图表：{
是的，
renderTo:“容器”
},
标题：{
文本：“”
},
图例：{
已启用：false
},
工具提示：{
已启用：false
},
窗格：{
startAngle:0，
端角：360，
背景：[{
背景颜色：{
径向梯度：{
cx:0.5，
cy:0.5，
r:2
},
停止：[
[0，‘白色’]，
[1，‘黑色’]
]
}
}]
},
xAxis：{
类别：[
“象限1”，
“象限2”，
“象限3”，
“象限4”
]
},
亚克斯：{
分:0,，
最多：10
},
系列：[{
数据：[6,3,5,1000]，
颜色：“#000”，
姓名：'主分数'
}]
});
//打印从左上角顺时针到右下角开始
变量颜色=[“橙色”、“红色”、“绿色”、“蓝色”]；
var部分=4；
对于（变量i=0；i

问题在于您创建的背景不在图表中。事实上，将它们添加到

chart.events.load

事件中，并将包含在导出的SVG中：

功能和示例：

function modelMe() {
        var chart = this;
        //plotting starts from top-left clockwise to bottom-right
        var colors = [ "orange", "red", "green", "blue" ];    
        var parts = 4;

        for(var i = 0; i < parts; i++) {
            chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                               chart.plotTop + chart.yAxis[0].center[1], 
                               chart.yAxis[0].height, 
                               0, 
                               -Math.PI + (Math.PI/(parts/2) * i), 
                               -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
                fill: colors[i % colors.length],
                'stroke-width': 1,
                'opacity': 0.6
            }).add();
        }
}

---

您是否在浏览器控制台中看到此错误。“UncaughtTypeError:无法读取未定义的属性'shared'”修复了它，新链接位于原始帖子中。谢谢。我从未使用过事件，很高兴知道我可以这样做：）

function modelMe() {
        var chart = this;
        //plotting starts from top-left clockwise to bottom-right
        var colors = [ "orange", "red", "green", "blue" ];    
        var parts = 4;

        for(var i = 0; i < parts; i++) {
            chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                               chart.plotTop + chart.yAxis[0].center[1], 
                               chart.yAxis[0].height, 
                               0, 
                               -Math.PI + (Math.PI/(parts/2) * i), 
                               -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
                fill: colors[i % colors.length],
                'stroke-width': 1,
                'opacity': 0.6
            }).add();
        }
}

    xAxis: {
        categories: [
            'Quadrant 1', 
            'Quadrant 2', 
            'Quadrant 3', 
            'Quadrant 4' 
        ],
        plotBands: [{
            innerRadius: 0,
            from: 0,
            to: 0.5,
            color: "red"
        },{
            innerRadius: 0,
            from: 0.5,
            to: 1.5,
            color: "blue"
        },{
            innerRadius: 0,
            from: 1.5,
            to: 2.5,
            color: "orange"
        },{
            innerRadius: 0,
            from: 2.5,
            to: 3.5,
            color: "green"
        },{
            innerRadius: 0,
            from: 3.5,
            to: 4,
            color: "red"
        }]
    },