ASP.NET WebForms アプリケーションでIgcDataChart を使用する

ASP.NET WebForms アプリケーションに Web Components のチャートコンポーネントであるIgcDataChartComponent を組み込む方法をご紹介します。

まず、対象のアプリケーションに IgcDataChartComponent を使用するために必要な npm パッケージをインストールします。
コマンドプロンプトや PowerShell で csproj ファイルのあるフォルダに移動し、次のコマンドを実行します。フォルダ内に package.json ファイルが生成されます。

npm init -y 

次に、以下のコマンドを実行して Ignite UI Web Components のパッケージをインストールします。

npm install igniteui-webcomponents-core
npm install igniteui-webcomponents-charts

vite をインストールするため、以下のコマンドを実行します。

npm install -D vite

csproj ファイルのあるフォルダに以下の内容で vite.config.js を作成します。

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
    build: {
        outDir: path.resolve(__dirname, "Scripts/dist"),
        emptyOutDir: true,
        rollupOptions: {
            input: path.resolve(__dirname, "main.js"),
            output: {
                entryFileNames: "app.js",
                format: "es"
            }
        }
    }
});

同じフォルダに以下の内容で main.js を作成します。IgcDataChartComponent を使用するために必要なモジュールのインポートを行う内容です。

import { ModuleManager } from "igniteui-webcomponents-core";
import {
    IgcCalloutLayerModule,
    IgcDataChartAnnotationModule,
    IgcDataChartCategoryCoreModule,
    IgcNumberAbbreviatorModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartInteractivityModule,
    IgcLegendModule
} from "igniteui-webcomponents-charts";

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcCalloutLayerModule,
    IgcNumberAbbreviatorModule,
    IgcLegendModule
);

以下のコマンドを実行し、ビルドを行います。これにより、Scripts フォルダに dist フォルダ、およびその直下に app.js ファイルが生成されます。

npx vite build

Scripts フォルダを作成し、その直下に JavaScript.js を作成して以下の内容を記述します。ここでは、IgcDataChartComponent へのデータの割り当てを行っています。

const sampleData = [
    { Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 },
    { Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 },
    { Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 },
    { Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 },
    { Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 },
    { Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 },
    { Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 },
    { Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 },
    { Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 }
];

for (let i = 0; i < sampleData.length; i++) {
    const item = sampleData[i];
    item.Income = item.Revenue - item.Expenses;
    item.IncomePerRevenue = (item.Income / item.Revenue) * 100;
}

const chart = document.getElementById('chart');
chart.dataSource = sampleData;
chart.windowRect = { top: 0, left: 0, width: 0.5, height: 1 };

WebForm1.aspx に以下を追加します。

<igc-data-chart id="chart" width="800px" height="500px"
	horizontal-view-scrollbar-mode="persistent"
	is-horizontal-zoom-enabled="true">
	<igc-category-x-axis id="xAxis" name="xAxis" label="Date" overlap="0" gap="0.1" use-clustering-mode="true"></igc-category-x-axis>
	<igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="0" >
	</igc-numeric-y-axis>
	<igc-numeric-y-axis id="yAxis2" name="yAxis2" minimum-value="0" label-location="OutsideRight" label-horizontal-alignment="Left">
	</igc-numeric-y-axis>
	<igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Revenue"
		title="Revenue" marker-type="Hidden">
	</igc-column-series>
	<igc-column-series name="series2" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Expenses"
		title="Expenses" marker-type="Hidden">
	</igc-column-series>
	<igc-line-series name="series3" x-axis-name="xAxis" y-axis-name="yAxis2" value-member-path="IncomePerRevenue"
		title="Income / Revenue %" marker-type="Circle">
	</igc-line-series>
</igc-data-chart>

<script type="module" src="Scripts/dist/app.js"></script>
<script type="module" src="Scripts/JavaScript.js"></script>

※ IgcDataChartComponent は使用する機能によってモジュールのインポートを行う必要があります。モジュールを変更する場合は、main.js を更新し、再度 npx vite build を実行してください。