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

Question

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

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

Спасибо!

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Вот диаграмма, которую я сделал с HighCharts:

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

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

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

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

Я храню его в своем Script.js с правильным форматом, чтобы я мог напрямую загружать его в высокие часы (для чисел вы должны преобразовать свои данные в поплавки или 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]
    }
  );

После того, как вы выбрали все ваши варианты для вашей диаграммы, вы можете добавить свои данные:

series: [{
        data: data
    }]

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

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

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

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

Answer 5

Я знаю, что уже слишком поздно, но у меня та же проблема, и это jsfiddle помог мне создать Excel из highchart.Тот Самый Скачать 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());
});