Как экспортировать график JavaScript в файл Excel (HighCharts)

Question

Мне нужно экспортировать диаграмму Javascript (HighCharts) в файл Excel; диаграмма была отображена в div, но excel не отображает содержимое html + css, которое генерирует javascript, отображает только текст без стиля.

Решение было бы преобразовать это, где диаграмма была представлена ​​в изображение (JPEG), но у меня нет успеха ...

Спасибо!

Answer 1

HighCharts уже поддерживает функцию экспорта изображений через модуль экспорта, который поставляется вместе с ним. Экспорт После его получения вы сможете изменить скрипт, чтобы сохранить изображение любым удобным вам способом. Это, конечно, не задача для начинающих, и она потребует много усилий.

Если бы это был я, я бы изменил код, который отвечает на кнопку экспорта, чтобы я мог активировать его с помощью JavaScript, а также передать информацию, чтобы PHP-файл на сервере мог сохранить изображение так, как вы хотите а не возвращать его клиенту.

Answer 2

Если вы хотите попробовать надстройку, есть способ использовать Javascript, HTML и CSS в Excel.Он называется Funfun и в нем размещен онлайн-редактор со встроенной электронной таблицей, поэтому переход с веб-сайта на Excel не сложен.

Вот диаграмма, которую я сделал с помощью Highcharts:

https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f

В этом примере я взял диаграмму из демонстрации Highchart и заменил данные на мои.Я храню свои данные во встроенной электронной таблице, и благодаря файлу json я могу использовать их в своем коде javascript.

Вот так я получаю свои данные из электронной таблицы с помощью файла json:

{
    "data": "=A1:E16"
}

Я храню его в своем script.js в правильном формате, чтобы я мог напрямую загрузить его в Highcharts (для чисел вы должны конвертировать ваши данные в числа с плавающей запятой или int):

var data = [];

for (var i = 1; i < $internal.data.length; i++)
  data.push(
    {
      x: parseFloat($internal.data[i][2]),
      y: parseFloat($internal.data[i][3]),
      z: parseFloat($internal.data[i][4]),
      name: $internal.data[i][1],
      country: $internal.data[i][0]
    }
  );

After You 'выбрав все свои параметры для своей диаграммы, вы можете добавить свои данные:

series: [{
        data: data
    }]

Когда вы довольны своей диаграммой, вы можете напрямую загрузить ее в Excel, вставив URL-адрес в Funfunнадстройка .Вот как это выглядит с моим примером:

Конечно, вы можете использовать другую библиотеку, кроме Highcharts, есть много мощных библиотек для данныхвизуализация, такая как charts.js и D3.js.

Я знаю, что это старый пост, но я надеюсь, что он поможет людям с такой же проблемой.

Раскрытие информации: я разработчик Funfun.

Answer 3

После некоторого поиска я нашел этот недавний ответ на их форумах , с jsfiddle , с которым можно повозиться.

В нем описывается, как экспортировать CSV-файл с использованием сценария на вашем сервере, что, исходя из прошлого опыта, является единственным способом добиться этого, поскольку сам график HighChart не содержит почти достаточно информации для создания пригодной для использования электронной таблицы.,Мы уже работаем с другой библиотекой графиков и используем phpExcel для создания электронной таблицы.

Answer 4

Это может быть немного поздно, но я наткнулся на это через Google, чтобы это могло кому-то помочь. Изображение Highchart в формате SVG: http://en.wikipedia.org/wiki/Svg, вам необходимо преобразовать его в изображение в растровом формате. Вы должны изменить URL-адрес параметров экспорта Highcharts на свой собственный:

exporting : {
  url: 'http://mydomain.com/export.php'
}

В вашем сценарии экспорта вы должны преобразовать SVG-изображение в растровое изображение (я использовал PHP и imagick), а затем экспортировать его в соответствии с вашими потребностями, сохранить растровое изображение на сервере, отправить по электронной почте и т. Д.

Answer 5

Я знаю, что уже слишком поздно, но у меня та же проблема, и это jsfiddle помогло мне создать Excel из старшей диаграммы. Параметр Загрузить CSV , добавленный в меню экспорта, работает нормально. Вот код:

/**
 * A small plugin for getting the CSV of a categorized chart
 */
(function (Highcharts) {

    // Options
    var itemDelimiter = ',',  // use ';' for direct import to Excel
        lineDelimiter = '\n';

    var each = Highcharts.each;
    Highcharts.Chart.prototype.getCSV = function () {
        var xAxis = this.xAxis[0],
            columns = [],
            line,
            csv = "", 
            row,
            col;

        if (xAxis.categories) {
            columns.push(xAxis.categories);
            columns[0].unshift("");
        }
        each (this.series, function (series) {
            columns.push(series.yData);
            columns[columns.length - 1].unshift(series.name);
        });

        // Transform the columns to CSV
        for (row = 0; row < columns[0].length; row++) {
            line = [];
            for (col = 0; col < columns.length; col++) {
                line.push(columns[col][row]);
            }
            csv += line.join(itemDelimiter) + lineDelimiter;
        }
        return csv;
    };    
}(Highcharts));

// Now we want to add "Download CSV" to the exporting menu. We post the CSV
// to a simple PHP script that returns it with a content-type header as a 
// downloadable file.
// The source code for the PHP script can be viewed at 
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php

Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
    text: 'Download CSV',
    onclick: function () {
        Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
            csv: this.getCSV()
        });
    }
});



var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    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]
    }]

});

$('#getcsv').click(function () {
    alert(chart.getCSV());
});