Angular Spreadsheet チャート アダプター

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

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

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

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { saveAs } from "file-saver";
import { Workbook } from "igniteui-angular-excel";
import { WorkbookFormat } from "igniteui-angular-excel";
import { WorkbookSaveOptions } from "igniteui-angular-excel";

export class ExcelUtility {
    public static getExtension(format: WorkbookFormat) {
        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, null, (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) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, null, (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) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    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) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";
import { IgxSpreadsheetChartAdapterModule } from "igniteui-angular-spreadsheet-chart-adapter";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule,
    IgxSpreadsheetChartAdapterModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from "@angular/core";
import { ExcelUtility } from "./ExcelUtility";
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { SpreadsheetChartAdapter } from "igniteui-angular-spreadsheet-chart-adapter";
import { ChartTitle, ChartType, FormattedString, Workbook } from "igniteui-angular-excel";
import { Worksheet } from "igniteui-angular-excel";
import { WorksheetCell } from "igniteui-angular-excel";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
  @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent, static: true })
  public spreadsheet: IgxSpreadsheetComponent;

  constructor() { }

  public ngOnInit() {
      this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();

      const excelFile = "https://static.infragistics.com/xplatform/excel/ChartData.xlsx";
      ExcelUtility.loadFromUrl(excelFile).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 = "A3:D6";

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

          const title: 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);
      });
  }
}
tsコピー

<div class="container vertical">
    <igx-spreadsheet #spreadsheet height="100%" width="100%">
    </igx-spreadsheet>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

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

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

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 を保存およびロードしています。

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

import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter';
import { SpreadsheetChartAdapter } from 'igniteui-angular-spreadsheet-chart-adapter';

import { ChartTitle, ChartType, FormattedString, Workbook } from 'igniteui-angular-excel';
import { ExcelUtility } from "ExcelUtility";
import { Worksheet } from 'igniteui-angular-excel';
import { WorksheetCell } from 'igniteui-angular-excel';
ts

コード スニペット

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

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: Angular 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
• IgxSpreadsheetComponent
• workbook