2017-02-20 138 views
0

我有以下数字图形。见图片: enter image description hereHighcharts css样式导出时

但使用Highchart的hamburguer CSS菜单时,导出为PDF或JPG或PNG我得到这样的图形:见图片: enter image description here

正如你所看到的CSS样式,字体并没有保留大小。我们怎样才能保持它们? TIA为您提供帮助。

回答

1

您可以将您的发布请求中的CSS样式传递给导出服务器。

var options = { 
    chart: {}, 
    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
    ] 
    }, 
    series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    type: 'column' 
    }] 
} 

var chart = Highcharts.chart('container', options); 

var data = { 
    options: JSON.stringify(options), 
    resources: { 
     // You can add your CSS styles here 
     css: ".highcharts-background { fill: #efefef; stroke: #a4edba; stroke-width: 2px}" 
    }, 
    filename: 'test.png', 
    type: 'image/png', 
    async: true 
} 

var exportUrl = 'https://export.highcharts.com/'; 
$.post(exportUrl, data, function(data) { 
    var imageUrl = exportUrl + data; 
    var urlCreator = window.URL || window.webkitURL; 
    document.querySelector("#image").src = imageUrl; 
    fetch(imageUrl).then(response => response.blob()).then(data => {console.log(data)}); 
}) 

活生生的例子:https://jsfiddle.net/nfbcq865/

+0

非常感谢你的帮助。 – Bastcri