React Spreadsheet チャート アダプター

React Spreadsheet コンポーネントを使用して IgrSpreadsheet にチャートを表示できます。

React Spreadsheet チャート アダプターの例

EXAMPLE

DATA

TSX

import { saveAs } from "file-saver";
import { Workbook } from "@infragistics/igniteui-react-excel";
import { WorkbookFormat } from "@infragistics/igniteui-react-excel";
import { WorkbookSaveOptions } from "@infragistics/igniteui-react-excel";
import { WorkbookLoadOptions } from "@infragistics/igniteui-react-excel";
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();

export class ExcelUtility {

    public static getExtension(format: WorkbookFormat): string {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d): void => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e): void => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e): void => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e): void => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { ExcelUtility } from './ExcelUtility';
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";
import { IgrSpreadsheetModule } from "@infragistics/igniteui-react-spreadsheet";
import { IgrSpreadsheet } from "@infragistics/igniteui-react-spreadsheet";
import { IgrSpreadsheetChartAdapterModule } from "@infragistics/igniteui-react-spreadsheet-chart-adapter";
import { SpreadsheetChartAdapter } from "@infragistics/igniteui-react-spreadsheet-chart-adapter";
import { Worksheet } from "@infragistics/igniteui-react-excel";
import { WorksheetCell } from "@infragistics/igniteui-react-excel";
import { ChartType, ChartTitle, FormattedString } from "@infragistics/igniteui-react-excel";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();
IgrSpreadsheetChartAdapterModule.register();

export default class SpreadsheetAdapterForCharts extends React.Component {
    public spreadsheet: IgrSpreadsheet;

    constructor(props: any) {
        super(props);
        this.onSpreadsheetRef = this.onSpreadsheetRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSpreadsheet ref={this.onSpreadsheetRef} height="calc(100% - 25px)" width="100%" />
            </div>
        );
    }

    public onSpreadsheetRef(spreadsheet: IgrSpreadsheet) {

        if (spreadsheet) {

            this.spreadsheet = spreadsheet;
            this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();
            const url = "https://static.infragistics.com/xplatform/excel/ChartData.xlsx";
            ExcelUtility.loadFromUrl(url).then((w) => {
                this.spreadsheet.workbook = w;

                const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);

                sheet.defaultColumnWidth = 450 * 20;
                sheet.rows(0).height = 150 * 20;

                const cell1: WorksheetCell = sheet.getCell("A1");
                const cell2: WorksheetCell = sheet.getCell("B1");
                const cell3: WorksheetCell = sheet.getCell("C1");
                const cell4: WorksheetCell = sheet.getCell("D1");

                const dataCellAddress = "A3:D6";

                const title: ChartTitle = new ChartTitle();
                title.text = new FormattedString("Line Chart");
                const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 5, y: 5 }, cell1, { x: 90, y: 90 });
                chart1.chartTitle = title;
                chart1.setSourceData(dataCellAddress, true);

                const title2: ChartTitle = new ChartTitle();
                title2.text = new FormattedString("Column Chart");
                const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 5, y: 5 }, cell2, { x: 90, y: 90 });
                chart2.chartTitle = title2;
                chart2.setSourceData(dataCellAddress, true);

                const title3: ChartTitle = new ChartTitle();
                title3.text = new FormattedString("Area Chart");
                const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 5, y: 5 }, cell3, { x: 90, y: 90 });
                chart3.chartTitle = title3;
                chart3.setSourceData(dataCellAddress, true);

                const title4: ChartTitle = new ChartTitle();
                title4.text = new FormattedString("Pie Chart");
                const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 5, y: 5 }, cell4, { x: 90, y: 90 });
                chart4.chartTitle = title4;
                chart4.setSourceData(dataCellAddress, true);
            });
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SpreadsheetAdapterForCharts/>);
tsxコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

チャート アダプターの概要

chartAdapter を使用すると、スプレッドシートにチャートを表示できます。スプレッドシート チャート アダプターは、Infragistics.Documents.Excel.WorksheetChart インスタンスに基づいてスプレッド シートのチャート要素を作成し、初期化します。

WorksheetChart をワークシートに追加するには、ワークシートの Shapes コレクションの addChart メソッドを使用する必要があります。チャートの追加の詳細については、下記をご覧ください。

以下はその手順です。

1. SpreadsheetChartAdapterModule 参照をプロジェクトに追加します。
2. Spreadsheet に割り当てる SpreadsheetChartAdapter クラスのインスタンスを作成します。
3. アプリを実行してチャートを含むワークシートを読み込みます。

サポートされるチャート タイプ

Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを含む 35 以上のチャート タイプがサポートされます。チャート タイプ一覧:

• 縦棒チャート
  • クラスタ縦棒チャート
  • 積層型の柱状
  • 100% 積層型縦棒チャート
• 折れ線チャート
  • 折れ線チャート
  • マーカー付き折れ線チャート
  • 積層型折れ線チャート
  • マーカー付き積層型折れ線チャート
  • 100% 積層型折れ線チャート
  • マーカー付き 100% 積層型折れ線チャート
• 円チャート
• ドーナツ型チャート
• 棒チャート
  • クラスター棒チャート
  • 積層型棒
  • 100% 積層型棒チャート
  • エリア チャート
  • エリア
  • 積層型エリア
  • 100% 積層型エリア チャート
• XY (散布図) とバブル チャート
  • 散布図 (マーカーのみ)
  • 滑らかな線を使用した散布図
  • 滑らかな線とマーカーを使用した散布図
  • 直接を使用した散布図
  • 直線とマーカーを使用した散布図
  • バブル (エフェクトなし) チャート
  • Bubble3DEffect
• 株価チャート
  • 高値-安値-終値
  • 始値-高値-安値-終値
  • 出来高-高値-安値-終値
  • 出来高-始値-高値-安値-終値
• レーダー チャート
  • マーカーなしのレーダー
  • マーカー付きレーダー
  • 塗りつぶしたレーダー
• コンボ チャート
  • xAxis を共有する縦棒チャートと折れ線チャート
  • 縦棒チャートと折れ線チャート、および第 2 xAxis
  • 積層エリアと縦棒チャート
  • カスタムな組み合わせ

依存関係

以下のコード スニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。

ハイパーリンクを使用するように React スプレッドシート コントロールを設定するときは、SpreadsheetChartAdapter クラスをインポートする必要があります。

import { IgrExcelXlsxModule } from 'igniteui-react-excel';
import { IgrExcelCoreModule } from 'igniteui-react-excel';
import { IgrExcelModule } from 'igniteui-react-excel';

import { IgrSpreadsheetChartAdapterModule } from 'igniteui-react-spreadsheet-chart-adapter';
import { SpreadsheetChartAdapter } from 'igniteui-react-spreadsheet-chart-adapter';

import { ExcelUtility } from "ExcelUtility";

import { Worksheet } from 'igniteui-react-excel';
import { WorksheetCell } from 'igniteui-react-excel';
import { ChartType, ChartTitle, FormattedString, Workbook } from 'igniteui-react-excel';

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();
IgrSpreadsheetChartAdapterModule.register();
ts

コード スニペット

以下のコード スニペットは、IgrSpreadsheet コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。

this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();

ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx").then((w) => {
    this.spreadsheet.workbook = w;

    const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);

    sheet.defaultColumnWidth = 500 * 20;
    sheet.rows(0).height = 150 * 20;

    const cell1: WorksheetCell = sheet.getCell("A1");
    const cell2: WorksheetCell = sheet.getCell("B1");
    const cell3: WorksheetCell = sheet.getCell("C1");
    const cell4: WorksheetCell = sheet.getCell("D1");

    const dataCellAddress = "A4:D6";

    const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 });

    const title: React ChartTitle = new ChartTitle();
    title.text = new FormattedString("Line Chart");
    chart1.chartTitle = title;

    chart1.setSourceData(dataCellAddress, true);

    const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 0, y: 0 }, cell2, { x: 100, y: 100 });

    const title2: ChartTitle = new ChartTitle();
    title2.text = new FormattedString("Column Chart");
    chart2.chartTitle = title2;

    chart2.setSourceData(dataCellAddress, true);

    const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 0, y: 0 }, cell3, { x: 100, y: 100 });

    const title3: ChartTitle = new ChartTitle();
    title3.text = new FormattedString("Area Chart");
    chart3.chartTitle = title3;

    chart3.setSourceData(dataCellAddress, true);

    const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 0, y: 0 }, cell4, { x: 100, y: 100 });

    const title4: ChartTitle = new ChartTitle();
    title4.text = new FormattedString("Pie Chart");
    chart4.chartTitle = title4;

    chart4.setSourceData(dataCellAddress, true);
});
typescript

API リファレンス

• addChart
• chartAdapter
• SpreadsheetChartAdapter
• IgrSpreadsheet
• workbook