Question

我正在尝试使用高图库创建Quinn模型。

使用来自highchart和multiple pane segment colors的所有示例，我可以创造一些半工作的东西。

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

我在this jsfiddle link获得了样品仍有一些问题无法解决，不知道为什么，因为它在我的服务器上工作正常。要尝试修复它以获得工作样本。

那么有没有办法将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);
});

Answer 1

问题是你创建的背景不是图表的一部分。实际上，将它们添加到chart.events.load事件中，并将包含在导出的SVG中：http://jsfiddle.net/9eqh0xrj/5/

    chart: {
        polar: true,
        renderTo: 'container',
        events: {
            load: modelMe
        }
    },

功能的例子：

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();
        }
}

无论如何，另一种解决方案就是使用plotBands，请参阅：http://jsfiddle.net/9eqh0xrj/6/

    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"
        }]
    },

Highchart极地图多种背景颜色到SVG

1 个答案: