Скачивание графика Highcharts без его отрисовки

118
09 февраля 2021, 11:20

EXPORT_WIDTH = 2000; 
var data = { 
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
  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] 
}; 
 
function save_chart(chart, filename) { 
    var render_width = EXPORT_WIDTH; 
    var render_height = render_width * chart.chartHeight / chart.chartWidth 
 
    var svg = chart.getSVG({ 
        exporting: { 
            sourceWidth: chart.chartWidth, 
            sourceHeight: chart.chartHeight 
        } 
    }); 
 
    var canvas = document.createElement('canvas'); 
    canvas.height = render_height; 
    canvas.width = render_width; 
 
    var image = new Image; 
    image.onload = function() { 
        canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height); 
        var data = canvas.toDataURL("image/png") 
        download(data, filename + '.png'); 
    }; 
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg); 
} 
 
function download(data, filename) { 
    var a = document.createElement('a'); 
    a.download = filename; 
    a.href = data 
    document.body.appendChild(a); 
    a.click(); 
    a.remove(); 
} 
 
 
$(function() { 
 
    $('#container').highcharts({ 
 
        exporting: { 
            enabled: false 
        }, 
 
        title: { 
            text: 'Client-Side Download Example' 
        }, 
 
        subtitle: { 
            text: 'Click "Save Chart" to download chart as PNG' 
        }, 
 
        chart: { 
            type: 'area' 
        }, 
 
        xAxis: { 
            categories: data.categories 
        }, 
 
        series: [{ 
            data: data.data 
        }] 
 
    }); 
     
    $('#save_btn').click(function() { 
        save_chart($('#container').highcharts(), 'chart'); 
    }); 
 
});
#container { 
    max-width: 800px; 
    height: 300px; 
    margin: 1em auto; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/export-data.js"></script> 
<div id='container'></div> 
<button id='save_btn'>Save Chart</button>

На сайте есть кнопка Save Chart . При клике на которую приходят некие данные, допустим это data из примера. Нужно сразу скачать изображение с графиком, но при этом не отрисовывая сам график на сайте. В примере показано с отрисовкой. В документации есть информация по экспорту, но я, если честно, из нее ничего не понял. Прошу показать как это можно сделать на реальном примере. Может предугадаю чей-то ответ: просто скрыть график, типа display:none не предлагать)) Заранее спасибо

READ ALSO
Как сделать , чтобы тест на javascript работал?

Как сделать , чтобы тест на javascript работал?

Нужно, чтобы при нажатии на кнопку Answer проверялся тест, и поле вопроса окрашивалось в зелёный цвет (если правильно) в красный (если не правильно)!

114
Как сделать кнопку на сайте изначально (при загрузке страницы) активной, включённой?

Как сделать кнопку на сайте изначально (при загрузке страницы) активной, включённой?

(1) В шапке сайта есть две кнопки отвечающие за смену языков

114
Как округлить число до 1000?

Как округлить число до 1000?

Имею ползунок с шагом в 1000Необходимо сделать функцию, которая будет округлять при клике на произвольную область ползунка

93
Удалить некоторые символы в строке JSON.stringify

Удалить некоторые символы в строке JSON.stringify

Нужно вывести весь объект в виде строки, но в таком формате, чтобы не было скобок которые автоматически создаются

88