Question

状态：我可以使用Node JS + Highcharts 6.2创建SVG。

问题：导出的SVG看起来不太好，就像我从JSFiddle示例https://jsfiddle.net/9gx7u4nw/导出它一样

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

这是JSFiddle的外观->这是我想要的Node JS：这是Node JS的外观（不好）：

谁能告诉我节点js的问题是什么/如何解决？

Answer 1

除了使用jsdom之外，您还可以直接使用highcharts-export-server，可以在此处下载https://github.com/highcharts/node-export-server。查看有关如何将其用作node.js模块的文档：https://github.com/highcharts/node-export-server#using-as-a-nodejs-module。检查下面发布的代码。

带有highcharts-export-server的Node.js代码：

//Include the exporter module
const exporter = require('highcharts-export-server');

// Data
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
  }];

//Export settings
var exportSettings = {
    type: 'svg',
    options: {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: null
        },
        credits: false,
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true
                },
                startAngle: -135,
                endAngle: 225
            }
        },
        series: [{
            type: 'pie',
            name: false,
            data: series,
        }]
    }
};

//Set up a pool of PhantomJS workers
exporter.initPool();

//Perform an export
exporter.export(exportSettings, function (err, res) {
    //The export result is now in res.
    //If the output is not PDF or SVG, it will be base64 encoded (res.data).
    //If the output is a PDF or SVG, it will contain a filename (res.filename).

    //Kill the pool when we're done with it, and exit the application
    exporter.killPool();
    process.exit(1);
});

Highcharts SVG与Node JS SVG的区别

1 个答案: