• Я успешно создал 4 разных диаграммы на одной странице.
  • У меня есть одна кнопка «Загрузить выбранную диаграмму», и при ее нажатии мне нужно создать один ZIP-файл с выбранной диаграммой PDF. Это означает, что если я выберу три диаграммы, а затем создаю ZIP с тремя диаграммами PDF.
  • Стульчик для кормления предоставляет возможность загрузки диаграмм в форматах PDF, SVG, PNG и т. Д., Но я не могу сделать это для нескольких выбранных диаграмм.
  • Я проверяю документ сервера экспорта Highchart - http://www.highcharts.com/docs/export- module / setting-up-the-server, но я не понимаю, как это использовать.

Пожалуйста, помогите мне, если у кого-то есть идея, как я могу это сделать?

2
Maher 23 Дек 2016 в 16:40

2 ответа

Пример решения этой проблемы:

  1. Создайте свои диаграммы

    var options1 = { 
        // ...
    };
    $('#chart1').highcharts(options1);
    
  2. Попросите сервер экспорта Highcharts сгенерировать изображение диаграммы

    var exportUrl = 'http://export.highcharts.com/';
    var d1 = $.ajax({
        url: exportUrl,
        // ...
    });
    
  3. Получить содержимое сгенерированного изображения

    $.when(d1).done(function(v1) {
        var p1 = new JSZip.external.Promise(function (resolve, reject) {
            JSZipUtils.getBinaryContent(exportUrl + v1[0], function(err, data) {
                // ...
            });
        });
        // ...
    
  4. Используйте JSZip для создания и сохранения ZIP-файла с содержимым сгенерированных изображений.

        // ...
        Promise.all([p1]).then(function(values) {
            var zip = new JSZip();
            zip.file("chart1.png", values[0], {binary:true});
            zip.generateAsync({type:"blob"})
            .then(function(content) {
                saveAs(content, "charts.zip");
            });
        });
    });
    

Вы можете увидеть эту (очень лаконичную) демонстрацию JSFiddle того, как получить ZIP-файл. Шаги, как описано выше, но не связаны с какой-либо кнопкой и вместо этого выполняются сразу после входа на сайт.

2
Halvor Holsten Strand 24 Дек 2016 в 19:10
Спасибо @halvorStrand за ваше решение. Ваш ответ даст мне представление о том, как мне нужно действовать, но теперь мне также нужен файл csv в Zip-архиве. так что я думаю, что мне все равно нужно использовать PHP. у тебя есть идеи?
 – 
Maher
29 Дек 2016 в 08:19
Вы хотите получить данные диаграммы в формате CSV и добавить их в ZIP-архив? Тогда я бы по-прежнему использовал JSZip, но, возможно, в сочетании с плагином Highcharts, например Export-CSV, из которого вы можете получить CSV.
 – 
Halvor Holsten Strand
29 Дек 2016 в 16:19
Да. Одним нажатием кнопки я хочу создать PDF и CSV для выбранной диаграммы и добавить все файлы (CSV и PDF) в один ZIp.
 – 
Maher
30 Дек 2016 в 08:49

Здесь я публикую свое решение, которое мне подходит.

  1. При нажатии кнопки получите изображение в формате svg, используя сервер экспорта High Chart.

         // get selected checkbox
         $('.selected_checkbox').each(function( index ){ 
             var obj = {},chart;
             chart = $('#each_chart').highcharts();
             obj.svg = chart.getSVG();
             obj.type = 'image/png';
             obj.async = true;
             obj.id = chart_id; 
            // ajax call for svg 
             $.ajax({
                    type: "POST",
                    url: url,// u need to save svg in your folder
                    data: obj, 
                    success: function(data)
                    { 
                     // redirect to php function and create zip 
                     window.location = 'php function call';
                    }
              )}
     
  2. Вызов функции Ajax для создания SVG..

    
          ini_set('magic_quotes_gpc', 'off');
        $type = $_POST['type'];
        $svg = (string) $_POST['svg'];
        $filename = 'name';
        $id = $_POST['id'];
    
    
    if (get_magic_quotes_gpc()) {
            $svg = stripslashes($svg);  
    }
    // check for malicious attack in SVG
    if(strpos($svg,"<!ENTITY") !== false || strpos($svg,"<!DOCTYPE") !== false){
            exit("the posted SVG could contain code for a malicious attack");
    } 
    
    $tempName = $filename.'_'.$id;
    // allow no other than predefined types
    if ($type == 'image/png') {
            $typeString = '-m image/png';
            $ext = 'png';
    
    } elseif ($type == 'image/jpeg') {
            $typeString = '-m image/jpeg';
            $ext = 'jpg';
    } elseif ($type == 'application/pdf') {
            $typeString = '-m application/pdf';
            $ext = 'pdf';
    } elseif ($type == 'image/svg+xml') {
            $ext = 'svg';
    } else { // prevent fallthrough from global variables
            $ext = 'txt';
    }
    
    $outfile = APPPATH."tempp/$tempName.$ext"; if (!file_put_contents(APPPATH."tempp/$tempName.svg", $svg)) { die("Couldn't create temporary file."); }}
  3. Код перенаправления функции Ajax Success.
    Здесь вам нужно прочитать файлы каталога и создать PDF из SVG.
    После добавьте каждый PDF в ZIP.

Это пример решения. Вам необходимо изменить код в соответствии с вашими требованиями

1
Maher 30 Дек 2016 в 11:28