JavaScriptチャートをExcelファイルにエクスポートする方法（HighCharts）

StackOverflow https://stackoverflow.com/questions/7325363

質問

JavaScriptチャート（HighCharts）をExcelファイルにエクスポートする必要があります。チャートはdivでレンダリングされましたが、ExcelはJavaScriptが生成するHTML+CSSコンテンツをレンダリングし、スタイルなしでテキストのみをレンダリングしません。

解決策は、チャートが画像（JPEG）にレンダリングされた場合にこれを変換することですが、私は成功しません...

ありがとう ！

役に立ちましたか？

解決

HighChartsは、既にパッケージ化されたエクスポートモジュールを介して画像エクスポート機能をサポートしています。 エクスポート それを取得した後、スクリプトを変更して、必要な方法で画像を保存できるはずです。それは確かに初心者の仕事ではなく、たくさんのいじくり回しが必要になります。

それが私だった場合、エクスポートボタンに応答するコードを変更して、JavaScriptでアクティブ化し、バックエンドのPHPファイルが戻るのではなく、希望する方法で画像を保存できるように情報を渡すことができるようにします。それはクライアントに。

他のヒント

これは少し遅れているかもしれませんが、私はGoogleを介してこれに出くわしたので、誰かを助けるかもしれません。 HighChartの画像はSVG形式です。 http://en.wikipedia.org/wiki/svg 、それをビットマップ形式の画像に変換する必要があります。 HighChartsのエクスポートオプションURLを独自のURLに変更する必要があります。

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

エクスポートスクリプトでは、SVGイメージをBitMap画像に変換し（PHP＆Imagicickを使用して）、ニーズに合ったものにエクスポートする必要があります。

いくつかの検索の後、私はこれを最近見つけました フォーラムで答えます, 、 とともに jsfiddle いじくり回します。

ハイチャートグラフ自体に使用可能なスプレッドシートを作成するのに十分な情報が含まれていないため、過去のエクスペリエンスからのスクリプトを使用してCSVをエクスポートする方法について説明します。私たちはすでに別のチャートライブラリを使用しており、使用しています phpexcel 実際にスプレッドシートを作成します。

アドインを試してみると、ExcelでJavaScript、HTML、CSSを使用する方法があります。それはFunfunと呼ばれ、埋め込まれたスプレッドシートを備えたオンラインエディターをホストするため、ウェブサイト間で優れていることは難しくありません。

これが私がHighChartsで作ったチャートです：

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

この例では、aからチャートを取りました 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]
    }
  );

チャートのすべてのオプションを選択したら、データを追加できます。

series: [{
        data: data
    }]

チャートに満足したら、URLを貼り付けることで、Excelに直接ロードできます Funfunアドイン. 。これが私の例でどのように見えるかです：

final

もちろん、HighCharts以外の別のライブラリを使用できます。Charts.JSやD3.JSなどのデータ視覚化のための強力なライブラリがたくさんあります。

私はこれが古い投稿であることを知っていますが、それが同じ問題を持つ人々を助けることを願っています。

開示：私はFunfunの開発者です。

手遅れだと知っていますが、同じ問題があります jsfiddle HighChartから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());
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top