React Spreadsheet チャートアダプター

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

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

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

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

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

以下はその手順です。

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

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

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

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

依存関係

[!Note]

以下のコードスニペットでは、外部の 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();

コードスニペット

以下のコードスニペットは、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);
});

React Spreadsheet チャート アダプター