Highcharts css стили при экспорте

Question

У меня есть следующий график в цифровом формате. Смотрите изображение:

, но при использовании меню hamburguer CSS в Highchart для экспорта в PDF или JPG или PNG я получаю график, как это: Смотрите изображение:

Как вы можете увидеть стили CSS, шрифты и размер не сохраняется. Как мы можем их сохранить? TIA за вашу помощь.

Answer 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/