Highcharts SVG与Node JS SVG的区别

状态:我可以用Node JS+Highcharts 6.2创建一个SVG,效果很好。

问题:导出的SVG看起来不好,与我从JSFIDLE示例导出的SVG不一样 https://jsfiddle.net/9gx7u4nw/

JSFiddle: https://jsfiddle.net/9gx7u4nw/

节点JS代码:

var jsdom = require('jsdom'),
    fs = require('fs');

jsdom.env({
    html: '',
    scripts: [
        "/opt/dlins/node-v6.3.0-linux-x64/bin/libs/jquery-3.3.1.min.js"
    ],
    done: function (err, window) {
        var $ = window.$;

        // Get the document and window
        var doc = jsdom.jsdom('<!doctype html><html><body><div id="container" style="height: 800px; width: 800px; margin: 0 auto"></div></div></body></html>'),
            win = doc.defaultView;

        // Do some modifications to the jsdom document in order to get the SVG bounding
        // boxes right.
        doc.createElementNS = function (ns, tagName) {
            var elem = doc.createElement(tagName);
            // Set private namespace to satisfy jsdom's getter
            elem._namespaceURI = ns; // eslint-disable-line no-underscore-dangle
            /**
             * Pass Highcharts' test for SVG capabilities
             * @returns {undefined}
             */
            elem.createSVGRect = function () {};

            elem.getBBox=function(){var e=0,t=0,l=0;return[].forEach.call(elem.children.length?elem.children:[elem],function(n){var r,a,h=n.style.fontSize||elem.style.fontSize;h=/px/.test(h)?parseInt(h,10):/em/.test(h)?12*parseFloat(h):12,r=24>h?h+3:Math.round(1.2*h),a=n.textContent.length*h*.55,"0"!==n.getAttribute("dx")&&(l+=r),null!==n.getAttribute("dy")&&(e=0),e+=a,t=Math.max(t,e)}),{x:0,y:0,width:t,height:l}};
            return elem;
        };

        // Require Highcharts with the window shim
        var Highcharts = require('/opt/dlins/node-v6.3.0-linux-x64/bin/libs/highcharts-6.2.0/highcharts.js')(win);
        // Load a module
        require('/opt/dlins/node-v6.3.0-linux-x64/bin/libs/highcharts-6.2.0/modules/exporting')(Highcharts);
        require('/opt/dlins/node-v6.3.0-linux-x64/bin/libs/highcharts-6.2.0/modules/export-data')(Highcharts);

        var fs = require('fs');         

        var series = [{"name":"-12%","y":0.1,"color":"#000","pos":0},{"name":"","y":18,"color":"#4c80ef","dataLabels":false,"pos":18},{"name":"XAUUSD (-10.40%)","y":0.1,"color":"#000","pos":18},{"name":"","y":33.75,"color":"#4c80ef","dataLabels":false,"pos":51.75},{"name":"CS Green (-7.40%)","y":0.1,"color":"#000","pos":51.75},{"name":"","y":36,"color":"#4c80ef","dataLabels":false,"pos":87.75},{"name":"ALLREAL (-4.20%)","y":0.1,"color":"#000","pos":87.75},{"name":"","y":42.75,"color":"#4c80ef","dataLabels":false,"pos":130.5},{"name":"XAGARS (-0.40%)","y":0.1,"color":"#000","pos":130.5},{"name":"","y":4.5,"color":"#4c80ef","dataLabels":false,"pos":130.5},{"name":"0","y":0.1,"color":"#000","pos":135},{"name":"","y":4.5,"color":"#4c80ef","dataLabels":false,"pos":139.5},{"name":"XPDUSD (0.40%)","y":0.1,"color":"#000","pos":139.5},{"name":"","y":70.875,"color":"#4c80ef","dataLabels":false,"pos":210.375},{"name":"SIMA (6.70%)","y":0.1,"color":"#000","pos":210.375},{"name":"","y":5.625,"color":"#4c80ef","dataLabels":false,"pos":216},{"name":"DOMSW (7.20%)","y":0.1,"color":"#000","pos":216},{"name":"","y":41.625,"color":"#4c80ef","dataLabels":false,"pos":257.625},{"name":"FERR (10.90%)","y":0.1,"color":"#000","pos":257.625},{"name":"","y":12.375,"color":"#4c80ef","dataLabels":false,"pos":257.625},{"name":"+12%","y":0.1,"color":"#000","pos":270},{"name":"","y":1.4999999999999951,"color":"#a51515","dataLabels":false,"pos":271.5},{"name":"BBRY (12.20%)","y":0.1,"color":"#000","pos":271.5},{"name":"","y":5.250000000000011,"color":"#a51515","dataLabels":false,"pos":276.75},{"name":"RIO (12.90%)","y":0.1,"color":"#000","pos":276.75},{"name":"","y":8.25,"color":"#a51515","dataLabels":false,"pos":285},{"name":"MICR (14.00%)","y":0.1,"color":"#000","pos":285},{"name":"","y":30,"color":"#a51515","dataLabels":false,"pos":285},{"name":"-/+18.00%","y":0.1,"color":"#000","pos":315},{"name":"","y":4.499999999999999,"color":"#a51515","dataLabels":false,"pos":319.5},{"name":"UBS Blue (-17.40%)","y":0.1,"color":"#000","pos":319.5},{"name":"","y":37.5,"color":"#a51515","dataLabels":false,"pos":357},{"name":"GOOG (-12.40%)","y":0.1,"color":"#000","pos":357},{"name":"","y":3,"color":"#a51515","dataLabels":false,"pos":357}];

        var chart = Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {text:undefined},
            credits: false,
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        //distance: -50,
                        /*style: {
                              fontWeight: 'bold',
                              color: 'white'
                          }*/
                    },
                    startAngle: -135,
                    endAngle: 225,
                    //center: ['50%', '90%'],
                    //size: '110%'
                }
            },
            series: [{
                type: 'pie',
                name: false,
                //innerSize: '10%',
                data : series,      
            }]
        });

        var svg = chart.getSVG();           

        console.log('svg', svg);
    }
});

以下是JSFIDLE的外观->这就是我想从Node JS得到的: 下面是Node JS的外观(不太好):

谁能告诉我node js的问题是什么/如何解决?