web-dev-qa-db-ja.com

JavaScriptを使用して（ActiveXObjectなしで）Excelファイルを読み取る方法

友人から、Excelファイルからグラフ（棒、曲線）を生成する簡単なアプリケーションを作ってほしいと頼まれました。強力なchart.jsを既に知っているため、JavaScriptを言語として使用することを選択しました。ただし、chart.jsを使用する前に、Excelファイルからデータを収集する必要があります。 JavaScriptを使用してExcelファイルを読み取る方法は？

いくつかの調査の後、（ActiveXを使用して）Internet Explorerでこれを行うことができましたが、ブラウザー間で動作する必要があります。

javascriptexcelchartshighcharts
13
Slifer

[〜＃〜] xls [〜＃〜] ＆ [〜＃〜] xlsx [〜＃〜] を純粋なJavaScriptで解析できるJavaScriptライブラリがあります。私はChrome（Windowsではありますが））でテストし、正常に動作しました。

10
Robert MacLean

JavaScriptを使用してExcelファイルを読み取る代わりに、Funfun Excelアドインを使用してExcelでJavaScriptを直接使用することもできます。基本的に、FunfunはExcelでJavaScriptを使用できるようにするツールであるため、Chart.jsなどのライブラリを使用してスプレッドシートのデータからグラフをプロットできます。

基本的に、あなたがする必要があるのは

1）。OfficeアドインストアからFunfunアドインを挿入

enter image description here

2）。新しいFunfunを作成するか、Funfunオンラインエディターからサンプルを読み込みます

enter image description here

3）。他のJavaScriptエディターで行うようにJavaScripコードを記述します。このステップでは、スプレッドシートのデータを直接使用するために、JSON I/Oを作成してExcelセル参照を作成する必要があります。この値が置かれる場所Setting-shortしかし、これは数行にすぎません。たとえば、スプレッドシートに次のようなデータがあるとします。平均時間はセルA1にあります。

Average hours    Jan    Feb   Mar    Apr
Baby Jones       93.5   81    94.5   95.5
Joanne Jones     91.5   90    88.5   85.5

この場合、JSON I/O値は次のようになります。

{
    "months": "=C6:G6",
    "manager1": "=C7:G7",
    "manager2": "=C8:G8"
}

詳細については、Funfun documentation を確認してください。

4）。コードを実行してグラフをプロット

FunfunオンラインエディターでJavaScript（Chart.js）とExcelデータを使用して作成したサンプルチャートを次に示します。以下のリンクで確認できます。手順2で説明したように、Excelに簡単に読み込むこともできます。

https://www.funfun.io/1/edit/5a365e7c74efa7334ff272a6

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

4
Chuan Qin

Chart.jsプラグイン chartjs-plugin-datasource があり、Excelファイルからデータを簡単にロードできます。

以下に示すようなExcelファイルがあり、HTMLファイルと同じディレクトリにmydata.xlsxとして保存されているとします。

+---------------+---------+----------+-------+-------+------+------+------+
|               | January | February | March | April | May  | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature   |       7 |        7 |    10 |    15 |   20 |   23 |   26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation |     8.1 |     14.9 |  41.0 |  31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+

Chart.js、 SheetJS（js-xlsx） およびchartjs-plugin-datasourceをページに含めます。

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"> </script>

<canvas id="myChart"></canvas>

次に、スクリプトでmydata.xlsxを指定します。

var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        scales: {
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        },
        plugins: {
            datasource: {
                url: 'mydata.xlsx'
            }
        }
    }
});
1
nagix