导出时采用Highcharts css风格 [英] Highcharts css styles when exporting

问题描述

数字中有以下图表。查看图片：

但是当使用Highchart的hamburguer CSS菜单导出为PDF或JPG或PNG我得到这样的图表：见图：

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

解决方案

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

  var options = {
图表：{}，
 xAxis：{
 categories：['Jan'，' 'Feb'，'Mar'，'Apr'，'May'，'Jun'，
'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'
 ] 
}，
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]，
类型：'列'
}] 
} 
 
 var chart = Highcharts.chart（'container'，options）; 
 
 var data = {
 options：JSON.stringify（options），
 resources：{
 //你可以在这里添加CSS样式
 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; 
文档。 querySelector（＃image）。src = imageUrl; 
 fetch（imageUrl）.then（response => response.blob（））。then（data => {console.log（data）}）; 
））
  

现场示例： https://jsfiddle.net/nfbcq865/

I have the following graph in digital. See image:

but when using the Highchart's hamburguer CSS menu to export to PDF or JPG or PNG I get the graph like this: See image:

As you can see the CSS styles, fonts and size are not kept. How can we achieve to keep them? TIA for your help.

解决方案

You can pass your CSS styles in your post request to export server.

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

Live example: https://jsfiddle.net/nfbcq865/

这篇关于导出时采用Highcharts css风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！