使用 Phantomjs 导出 Highcharts 时以粗体显示的行

Question

我想使用 Highcharts 和 Phantomjs 将折线图导出到我的服务器，图像已导出但线条以粗体显示：

这里是用来生成图表的源代码：

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

page.injectJs("/var/www/test/public/jquery.js") || (console.log("Unable to load jQuery") && phantom.exit());
page.injectJs("/var/www/test/public/js/highcharts.js") || (console.log("Unable to load Highcharts") && phantom.exit());
page.injectJs("/var/www/test/public/js/exporting.js") || (console.log("Unable to load Exporting") && phantom.exit());

page.onConsoleMessage = function(msg) {
    console.log(msg);
}

var width = 550, height = 400;
if(system.args.length == 4) {
    width = parseInt(system.args[2], 10);
    height = parseInt(system.args[3], 10);
}

console.log("Load result file");

var result = [['Nintendo', 54030288], ['Electronic Arts', 31367739],
               ['Activision', 30230170], ['Ubisoft', 25318980],
               ['Microsoft', 24372261], ['Sony Computer Entertainment', 138059037],
               ['Bethesda Softworks', 10813372], ['Take-Two Interactive', 10012212],
               ['Others', 33910911]
            ];

var evalArg = {
    width: width,
    height: height
};

var svg = page.evaluate(function(opt){
    $('body').append('<div id="container"></div>');
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            animation: false
        },
        title: {
            text: 'Population ages 65 and over (% of total)',
        },
        credits: {
            position: {
                align: 'left',
                x: 20
            },
            text: 'Data from the World Bank'
        },
        xAxis: {
            categories: [
                '1980', '1981', '1982', '1983', '1984', '1985',
                '1986', '1987', '1988', '1989', '1990', '1991',
                '1992', '1993', '1994', '1995', '1996', '1997',
                '1998', '1999', '2000', '2001', '2002', '2003',
                '2004', '2005', '2006', '2007', '2008', '2009', '2010'
            ],
            labels: {
                step: 5
            }
        },
        yAxis: {
            title: {
                text: 'Percentage %',
            }
        },
        tooltip:{
            enabled: false
        },
        series: [{
            name: 'Algeria - 65 and over',
            data: [ 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 13, 13, 14, 14,
                    15, 15, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 23 ],
            enableMouseTraking: false
        }]
    });
    console.log('Exported to SVG');
    return chart.getSVG();
}, evalArg);
fs.isFile("/var/www/test/autoscripts/sanbi/images/hoc.svg") && fs.remove("/var/www/test/autoscripts/sanbi/images/hoc.svg");
console.log('Saved svg to file');
fs.write("/var/www/test/autoscripts/sanbi/images/hoc.svg", svg);
phantom.exit();

为了得到我得到的东西，我只需要运行这个命令：

phantomjs test.js

请问有什么办法可以避免这种行为吗？谢谢

Answer 1

请确保你是否有最新的 highcharts-convert.js，因为我已经在我自己的 phantomJS 上测试过它并且运行良好。