syncfusion-javascript-accumulation-chart

Syncfusion TypeScript および JavaScript での累積チャートの実装

Syncfusion EJ2 累積チャートは、Pie、Doughnut、Funnel、Pyramid の表示形式でカテゴリ値を可視化します。

このスキルでは、フレームワークに依存しない次の実装を扱います。

• npm と ES モジュールを使用する TypeScript。
• npm と ES モジュールを使用する JavaScript。
• 完全なグローバル EJ2 バンドルを使用する JavaScript。
• Pie および Doughnut の可視化。
• Funnel および Pyramid の可視化。
• 凡例、データラベル、ツールチップ、注釈。
• 選択とハイライト。
• ローカルデータとリモートデータ。
• 動的な更新。
• 内部テーマ。
• アクセシビリティ、パフォーマンス、検証、クリーンアップ。

対象を絞った累積チャートの例だけであれば、個別の Syncfusion テーマスタイルシートは必要ありません。チャートレベルの theme プロパティでビジュアルテーマを適用してください。

プラットフォームのサポート

TypeScript

次の要件があるアプリケーションでは TypeScript を使用してください。

• 型定義と IDE サポート。
• npm パッケージ管理。
• ES モジュールのインポート。
• 機能モジュールの明示的な注入。
• コンパイル時の検証。
• TypeScript 対応のビルドプロセス。

インストール：

npm install @syncfusion/ej2-charts

インポート：

import {
    AccumulationChart
} from '@syncfusion/ej2-charts';

オプション機能を使用するには、チャートを構築する前に対応するモジュールをインポートして注入する必要があります。

npm と ES モジュールを使用する JavaScript

次のようなアプリケーションでは、モジュールベースの JavaScript を使用してください。

• npm。
• ES モジュールのインポート。
• バンドラー。
• 明示的な AccumulationChart.Inject(...) の呼び出し。

インストール：

npm install @syncfusion/ej2-charts

インポート：

import {
    AccumulationChart
} from '@syncfusion/ej2-charts';

グローバル JavaScript

次のようなアプリケーションでは、グローバル JavaScript を使用してください。

• バージョン指定された EJ2 グローバルバンドル。
• 従来の HTML ファイルと JavaScript ファイル。
• ej.charts.AccumulationChart コンストラクター。
• TypeScript のコンパイルを行わない環境。

バージョン指定された完全なバンドルを使用してください。

<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>

完全なグローバル EJ2 バンドルを使用する場合は、AccumulationChart.Inject(...) を呼び出さないでください。

ブラウザーの互換性は、インストールした EJ2 バージョンの対応ブラウザー一覧に従う必要があります。

このスキルを使用する場面

次のようなタスクでは、このスキルを使用してください。

• Pie Chart を作成する。
• Doughnut Chart を作成する。
• Funnel Chart を作成する。
• Pyramid Chart を作成する。
• 全体に対するカテゴリ別の寄与を表示する。
• 比率構成を表示する。
• 順序のあるファネル段階を表示する。
• 階層的な Pyramid セグメントを表示する。
• 凡例を追加する。
• データラベルを追加する。
• ツールチップを追加する。
• Doughnut の中央ラベルを追加する。
• ポイントを切り離す。
• 小さなポイントをグループ化する。
• 空のポイントを処理する。
• 選択またはハイライトを有効にする。
• 注釈を追加する。
• 色、グラデーション、またはパレットを適用する。
• ローカルデータまたはリモートデータをバインドする。
• データを動的に更新する。
• アクセシブルな解釈をサポートする。
• パフォーマンスとクリーンアップを検証する。

データをより正確に伝える別の可視化がある場合は、そちらを使用してください。

• 類似した値を正確に比較するには、Bar Chart または Column Chart を使用してください。
• 時間の経過に伴う傾向には、Line Chart を使用してください。
• 段階の順序に意味がある場合に限り、Funnel Chart を使用してください。
• 全体に対する関係に意味がある場合に限り、Pie Chart または Doughnut Chart を使用してください。

累積チャートの種類

Pie

全体に対するカテゴリ別の寄与を示すには、Pie を使用してください。

type:
    'Pie'

Doughnut

Doughnut Chart は、ゼロ以外の innerRadius を持つ Pie シリーズを使用します。

type:
    'Pie',

innerRadius:
    '40%'

次は使用しないでください。

type:
    'Doughnut'

インストールした API でそのシリーズ値が明示的に導入されている場合を除きます。

Funnel

順序のある段階、パイプライン、またはコンバージョンプロセスには、Funnel を使用してください。

type:
    'Funnel'

Pyramid

比率または階層を示すセグメントには、Pyramid を使用してください。

type:
    'Pyramid'

ナビゲーションガイド

タスクに合ったリファレンスを選択してください。

はじめに

📄 参照先： references/getting-started.md

次の内容については、このリファレンスを使用してください。

• パッケージのインストール。
• TypeScript のインポート。
• モジュールの注入。
• JavaScript バンドルのセットアップ。
• ホストの作成と検証。
• 基本的な Pie Chart の作成。
• 内部テーマの設定。
• TypeScript と JavaScript の完全な例。
• 実行時の検証。
• 基本的なトラブルシューティング。

グラフの種類と選択

📄 参照： references/chart-types.md

次の項目については、このリファレンスを参照してください。

• 円グラフ。
• ドーナツグラフ。
• ファンネルグラフ。
• ピラミッドグラフ。
• 系列固有のモジュール注入。
• 半径と内半径。
• ファンネルのネックの寸法。
• ピラミッドのモード。
• ギャップ比率。
• 適切なグラフの種類の選択。

凡例の設定

📄 参照： references/legend-configuration.md

次の項目については、このリファレンスを参照してください。

• 凡例の表示。
• 凡例の位置。
• 配置。
• 凡例のタイトル。
• テキストスタイル。
• ポイントの切り替え。
• レスポンシブな凡例の動作。
• 凡例の操作。
• 凡例のアクセシビリティ。

データラベル

📄 参照： references/data-labels.md

次の項目については、このリファレンスを参照してください。

• データラベルの有効化。
• 内側ラベルと外側ラベル。
• ラベルのフィールドマッピング。
• 値ラベルとパーセンテージラベル。
• コネクター線。
• スマートラベル。
• テキストの省略と折り返し。
• ラベルテンプレート。
• 重なりの防止。

ツールチップと選択

📄 参照： references/tooltips-and-selection.md

次の項目については、このリファレンスを参照してください。

• 集積グラフのツールチップ。
• ツールチップの書式設定。
• ツールチップのテンプレート。
• ポイントの選択。
• サポートされている場合の複数選択。
• 選択パターン。
• ハイライト表示。
• インタラクションイベント。
• ツールチップ外での詳細情報の表示。

注釈と機能

📄 参照： references/annotations-and-features.md

次の項目については、このリファレンスを参照してください。

• 注釈。
• ドーナツの中央ラベル。
• ポイントの分離。
• ポイントのグループ化。
• 空のポイントの処理。
• ポイントの色マッピング。
• グラデーションの塗りつぶし。
• 開始角度と終了角度。
• 円グラフの中央位置。
• ファンネルのネック設定。
• ピラミッドのモード。

カスタマイズとスタイル設定

📄 参照： references/customization-and-styling.md

次の項目については、このリファレンスを参照してください。

• 内部テーマ。
• パレット。
• 系列の塗りつぶし。
• 枠線。
• 不透明度。
• 背景。
• タイトルとサブタイトル。
• アプリケーションが管理する CSS。
• レスポンシブな寸法。
• 検証済みの印刷およびエクスポート機能。

アクセシビリティと高度な機能

📄 参照： references/accessibility-and-advanced.md

次の項目については、このリファレンスを参照してください。

• セマンティックな説明。
• 常時利用できるテキストによる代替情報。
• セマンティックなデータテーブル。
• アクセシビリティの設定。
• 系列の説明。
• フォーカスの視認性。
• キーボードとスクリーンリーダーによるテスト。
• 動的な更新。
• アニメーション。
• パフォーマンス。
• リモートデータ。
• クリーンアップ。
• トラブルシューティング。

通常の直交座標系グラフの API をコピーする場合は、集積グラフ固有のモジュールとモデルで検証してから使用してください。

機能モジュールのリファレンス

実装に必要なモジュールのみをインポートして注入してください。

Pie and Doughnut -> PieSeries
Funnel           -> FunnelSeries
Pyramid          -> PyramidSeries
Data labels      -> AccumulationDataLabel
Legend           -> AccumulationLegend
Tooltip          -> AccumulationTooltip
Selection        -> AccumulationSelection
Highlight        -> AccumulationHighlight
Annotations      -> AccumulationAnnotation
Print            -> Validated Accumulation Chart print module
Image export     -> Validated Accumulation Chart image-export module
PDF export       -> Validated Accumulation Chart PDF-export module

オプションのモジュール名は、インストール済みの @syncfusion/ej2-charts の宣言で確認してください。

TypeScript のモジュール注入

ラベル、凡例、ツールチップを備えた円グラフには、次のものが必要です。

import {
    AccumulationChart,
    AccumulationDataLabel,
    AccumulationLegend,
    AccumulationTooltip,
    PieSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    PieSeries,
    AccumulationDataLabel,
    AccumulationLegend,
    AccumulationTooltip
);

最小構成の円グラフには、次のものが必要です。

import {
    AccumulationChart,
    PieSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    PieSeries
);

ファンネルグラフには、次のものが必要です。

import {
    AccumulationChart,
    FunnelSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    FunnelSeries
);

ピラミッドグラフには、次のものが必要です。

import {
    AccumulationChart,
    PyramidSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    PyramidSeries
);

インポートと注入の内容を一致させてください。

通常のグラフのツールチップモジュールは使用しないでください。

Tooltip

次のものを使用してください。

AccumulationTooltip

ホストと寸法

一貫したホストを使用してください。

<div id="accumulation-chart"></div>

測定可能な寸法を指定してください。

.chart-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#accumulation-chart {
    width: 100%;
    min-height: 500px;
}

ホストを検証してください。

const host:
    HTMLElement | null =
        document.getElementById(
            'accumulation-chart'
        );

if (!host) {
    throw new Error(
        'The Accumulation Chart host "#accumulation-chart" was not found.'
    );
}

明示的な構築とアタッチを推奨します。

const chart:
    AccumulationChart =
        new AccumulationChart({
            // Configuration
        });

chart.appendTo(
    host
);

データモデルと検証

型付きモデルを使用してください。

interface CategoryShare {
    category: string;
    value: number;
    label: string;
}

意味のあるデータを定義してください。

const chartData:
    CategoryShare[] = [
        {
            category:
                'January',
            value:
                22,
            label:
                'January: 22%'
        },
        {
            category:
                'February',
            value:
                24,
            label:
                'February: 24%'
        },
        {
            category:
                'March',
            value:
                26,
            label:
                'March: 26%'
        },
        {
            category:
                'April',
            value:
                28,
            label:
                'April: 28%'
        }
    ];

レンダリング前に検証してください。

const validateCategoryShares = (
    data:
        CategoryShare[],
    requirePercentageTotal:
        boolean
): void => {
    if (
        data.length ===
        0
    ) {
        throw new Error(
            'The Accumulation Chart requires at least one data point.'
        );
    }

    const categories:
        Set<string> =
            new Set<string>();

    let positiveValueFound:
        boolean =
            false;

    let total:
        number =
            0;

    data.forEach(
        (
            item:
                CategoryShare,
            index:
                number
        ): void => {
            const category:
                string =
                    item.category.trim();

            if (!category) {
                throw new Error(
                    'Data point ' +
                    index +
                    ' requires a category.'
                );
            }

            if (
                categories.has(
                    category
                )
            ) {
                throw new Error(
                    'Duplicate category: ' +
                    category
                );
            }

            if (
                !Number.isFinite(
                    item.value
                ) ||
                item.value < 0
            ) {
                throw new Error(
                    'Data point "' +
                    category +
                    '" requires a finite nonnegative value.'
                );
            }

            if (
                item.value > 0
            ) {
                positiveValueFound =
                    true;
            }

            if (
                !item.label.trim()
            ) {
                throw new Error(
                    'Data point "' +
                    category +
                    '" requires a label.'
                );
            }

            total +=
                item.value;

            categories.add(
                category
            );
        }
    );

    if (
        !positiveValueFound
    ) {
        throw new Error(
            'At least one data point must have a positive value.'
        );
    }

    if (
        requirePercentageTotal &&
        Math.abs(
            total -
            100
        ) >
        0.0001
    ) {
        throw new Error(
            'Percentage data must total 100.'
        );
    }
};

検証を呼び出してください。

validateCategoryShares(
    chartData,
    true
);

グラフにパーセンテージではなく生の値を表示する場合は、合計を 100 にする必要はありません。

クイックスタートの例

TypeScript

import {
    AccumulationChart,
    AccumulationDataLabel,
    AccumulationLegend,
    AccumulationTooltip,
    PieSeries
} from '@syncfusion/ej2-charts';

interface CategoryShare {
    category: string;
    value: number;
    label: string;
}

AccumulationChart.Inject(
    PieSeries,
    AccumulationDataLabel,
    AccumulationLegend,
    AccumulationTooltip
);

const chartData:
    CategoryShare[] = [
        {
            category:
                'January',
            value:
                22,
            label:
                'January: 22%'
        },
        {
            category:
                'February',
            value:
                24,
            label:
                'February: 24%'
        },
        {
            category:
                'March',
            value:
                26,
            label:
                'March: 26%'
        },
        {
            category:
                'April',
            value:
                28,
            label:
                'April: 28%'
        }
    ];

const host:
    HTMLElement | null =
        document.getElementById(
            'accumulation-chart'
        );

if (!host) {
    throw new Error(
        'The Accumulation Chart host was not found.'
    );
}

const chart:
    AccumulationChart =
        new AccumulationChart({
            width:
                '100%',

            height:
                '500px',

            theme:
                'Fluent2',

            title:
                'Monthly Distribution',

            series: [
                {
                    dataSource:
                        chartData,
                    xName:
                        'category',
                    yName:
                        'value',
                    type:
                        'Pie',
                    name:
                        'Distribution',

                    dataLabel: {
                        visible:
                            true,
                        position:
                            'Outside',
                        name:
                            'label'
                    }
                }
            ],

            tooltip: {
                enable:
                    true
            },

            legendSettings: {
                visible:
                    true,
                position:
                    'Right'
            }
        });

chart.appendTo(
    host
);

この集積グラフの簡潔な例だけを使用する場合、Syncfusion のテーマスタイルシートを別途用意する必要はありません。

完全バンドルを使用した JavaScript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>EJ2 Accumulation Chart</title>

    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>

    <style>
        #accumulation-chart {
            width: 100%;
            min-height: 500px;
        }
    </style>
</head>

<body>
    <div id="accumulation-chart"></div>

    <script>
        if (
            typeof window.ej ===
                'undefined' ||
            !window.ej.charts ||
            !window.ej.charts.AccumulationChart
        ) {
            throw new Error(
                'The EJ2 Accumulation Chart global bundle was not loaded.'
            );
        }

        var chartData = [
            {
                category:
                    'January',
                value:
                    22,
                label:
                    'January: 22%'
            },
            {
                category:
                    'February',
                value:
                    24,
                label:
                    'February: 24%'
            },
            {
                category:
                    'March',
                value:
                    26,
                label:
                    'March: 26%'
            },
            {
                category:
                    'April',
                value:
                    28,
                label:
                    'April: 28%'
            }
        ];

        var chart =
            new ej.charts.AccumulationChart({
                width:
                    '100%',

                height:
                    '500px',

                theme:
                    'Fluent2',

                title:
                    'Monthly Distribution',

                series: [
                    {
                        dataSource:
                            chartData,
                        xName:
                            'category',
                        yName:
                            'value',
                        type:
                            'Pie',
                        name:
                            'Distribution',

                        dataLabel: {
                            visible:
                                true,
                            position:
                                'Outside',
                            name:
                                'label'
                        }
                    }
                ],

                tooltip: {
                    enable:
                        true
                },

                legendSettings: {
                    visible:
                        true,
                    position:
                        'Right'
                }
            });

        chart.appendTo(
            '#accumulation-chart'
        );
    </script>
</body>
</html>

完全なグローバルバンドルに対して AccumulationChart.Inject(...) を呼び出さないでください。

一般的なパターン

凡例付きの基本的な円グラフ

const chart:
    AccumulationChart =
        new AccumulationChart({
            series: [
                {
                    dataSource:
                        chartData,
                    xName:
                        'category',
                    yName:
                        'value',
                    type:
                        'Pie'
                }
            ],

            legendSettings: {
                visible:
                    true,
                position:
                    'Right'
            }
        });

chart.appendTo(
    '#accumulation-chart'
);

中央ラベル付きのドーナツグラフ

innerRadius を指定した Pie シリーズを使用します。

const chart:
    AccumulationChart =
        new AccumulationChart({
            series: [
                {
                    dataSource:
                        chartData,
                    xName:
                        'category',
                    yName:
                        'value',
                    type:
                        'Pie',
                    innerRadius:
                        '40%'
                }
            ],

            centerLabel: {
                text:
                    'Sales',
                hoverTextFormat:
                    '${point.x}: ${point.y}'
            }
        });

chart.appendTo(
    '#accumulation-chart'
);

次の設定は使用しないでください。

type:
    'Doughnut'

中央ラベルは、Pie または Doughnut 形式のビジュアライゼーションを対象としています。

ファネルチャート

import {
    AccumulationChart,
    AccumulationDataLabel,
    FunnelSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    FunnelSeries,
    AccumulationDataLabel
);

interface FunnelStage {
    stage: string;
    users: number;
    label: string;
}

const stageData:
    FunnelStage[] = [
        {
            stage:
                'Visited',
            users:
                1000,
            label:
                'Visited: 1,000'
        },
        {
            stage:
                'Downloaded',
            users:
                760,
            label:
                'Downloaded: 760'
        },
        {
            stage:
                'Subscribed',
            users:
                420,
            label:
                'Subscribed: 420'
        },
        {
            stage:
                'Renewed',
            users:
                190,
            label:
                'Renewed: 190'
        }
    ];

const chart:
    AccumulationChart =
        new AccumulationChart({
            series: [
                {
                    dataSource:
                        stageData,
                    xName:
                        'stage',
                    yName:
                        'users',
                    type:
                        'Funnel',
                    width:
                        '70%',
                    height:
                        '80%',
                    neckWidth:
                        '15%',
                    neckHeight:
                        '5%',
                    gapRatio:
                        0.08,

                    dataLabel: {
                        visible:
                            true,
                        position:
                            'Inside',
                        name:
                            'label'
                    }
                }
            ]
        });

chart.appendTo(
    '#accumulation-chart'
);

ファネルチャートでは、コンバージョン率は自動計算されません。必要な場合は、アプリケーションコードで率を計算してください。

ピラミッドチャート

import {
    AccumulationChart,
    AccumulationDataLabel,
    PyramidSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    PyramidSeries,
    AccumulationDataLabel
);

const chart:
    AccumulationChart =
        new AccumulationChart({
            series: [
                {
                    dataSource:
                        chartData,
                    xName:
                        'category',
                    yName:
                        'value',
                    type:
                        'Pyramid',
                    pyramidMode:
                        'Linear',
                    gapRatio:
                        0.05,

                    dataLabel: {
                        visible:
                            true,
                        position:
                            'Inside',
                        name:
                            'label'
                    }
                }
            ]
        });

chart.appendTo(
    '#accumulation-chart'
);

次のように、検証済みの Pyramid モードを使用します。

Linear
Surface

次の設定は追加しないでください。

reverse:
    true

ただし、インストール済みの Pyramid モデルが明示的にサポートしている場合を除きます。

データラベル

次をインポートして挿入します。

import {
    AccumulationDataLabel
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    AccumulationDataLabel
);

ラベルはシリーズ内で設定します。

dataLabel: {
    visible:
        true,
    position:
        'Outside',
    name:
        'label'
}

Accumulation のデータラベルをチャートのルートで設定しないでください。

アプリケーションの値がパーセンテージを表す場合、またはパーセンテージが正しく計算されている場合にのみ、パーセンテージラベルを使用してください。

ツールチップ

次をインポートして挿入します。

import {
    AccumulationTooltip
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    AccumulationTooltip
);

次を有効にします。

tooltip: {
    enable:
        true,
    format:
        '${point.x}: ${point.y}'
}

実行可能な HTML は、サポートされており、必要な場合にのみ使用できます。

format:
    '${point.x}: <b>${point.y}</b>'

エンコードされた HTML は使用しないでください。

format:
    '${point.x}: <b>${point.y}</b>'

値がパーセンテージでない限り、% を追加しないでください。

選択

次をインポートして挿入します。

import {
    AccumulationSelection
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    AccumulationSelection
);

インストール済みの Accumulation Chart モデルで検証された選択モードを設定します。

selectionMode:
    'Point'

選択パターンと複数選択のサポートについて、ドキュメントに記載する前に検証してください。

通常の Cartesian Chart のシリーズ選択の動作が、同じように適用されると想定しないでください。

ハイライト表示

次をインポートして挿入します。

import {
    AccumulationHighlight
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    AccumulationHighlight
);

インストール済みパッケージでサポートされているモードとパターンのみを設定します。

コントラストや読みやすさが低下する場合は、装飾だけを目的としてハイライト表示を有効にしないでください。

注釈

次をインポートして挿入します。

import {
    AccumulationAnnotation
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
    AccumulationAnnotation
);

注釈と Doughnut の中央ラベルは、異なる機能です。

チャートに対する相対位置に配置するコンテキスト用の HTML コンテンツには、注釈を使用します。

Doughnut 形式の中央に表示するコンテンツには、centerLabel を使用します。

必須情報の唯一の情報源として、注釈のコンテンツを使用しないでください。

ポイントの色

必要な場合は、データからポイントの色を割り当てます。

interface CategoryShare {
    category: string;
    value: number;
    color: string;
}

series: [
    {
        dataSource:
            chartData,
        xName:
            'category',
        yName:
            'value',
        pointColorMapping:
            'color',
        type:
            'Pie'
    }
]

通常の Chart の marker プロパティを、Accumulation のあらゆるシリーズで使用できるオプションとして記載しないでください。

Pie、Funnel、Pyramid のポイントは、Cartesian のマーカーではなくセグメントとして描画されます。

ポイントの分離

ポイントの分離を有効にします。

series: [
    {
        type:
            'Pie',
        explode:
            true,
        explodeIndex:
            0,
        explodeOffset:
            '10%'
    }
]

分離は控えめに使用してください。セグメントを過度に離すと、全体を解釈しにくくなることがあります。

Funnel と Pyramid の間隔の検証

gapRatio を検証します。

const validateGapRatio = (
    value:
        number
): void => {
    if (
        !Number.isFinite(
            value
        ) ||
        value < 0 ||
        value > 1
    ) {
        throw new Error(
            'The gap ratio must be between 0 and 1.'
        );
    }
};

内部テーマとアプリケーション CSS

組み込みのチャートテーマを適用します。

theme:
    'Fluent2'

ここで取り上げる Accumulation Chart の例だけを目的とする場合、別の Syncfusion テーマパッケージやスタイルシートは必要ありません。

次の用途には、アプリケーション独自の CSS を使用します。

• ホストの寸法。
• ページの背景。
• カードレイアウト。
• テキストによる概要。
• データテーブル。
• 外部ボタン。
• レスポンシブな間隔。

例：

.chart-card {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
}

#accumulation-chart {
    width: 100%;
    min-height: 500px;
}

選択したテーマが、インストール済みの Accumulation Chart テーマモデルに対応していることを検証してください。

動的なデータ更新

シリーズのデータソースを置き換えます。

chart.series[0]
    .dataSource =
        updatedData;

chart.dataBind();

タイトルを更新します。

chart.title =
    'Updated Distribution';

chart.dataBind();

変更をまとめて適用します。

chart.title =
    'Updated Distribution';

chart.series[0]
    .dataSource =
        updatedData;

chart.dataBind();

通常のプロパティ変更には dataBind() を使用します。

次の場合は refresh() を使用します。

• ホストの寸法が変更された場合。
• 非表示だった親要素が表示された場合。
• チャートの種類が大幅に変更された場合。
• レイアウト全体の再計算が必要な場合。

アクセシビリティに関するガイダンス

次の方法で、アクセシブルな実装をサポートします。

• 意味的な見出し。
• 簡潔なチャートの説明。
• 常時表示されるテキストによる概要。
• 意味的なデータテーブル。
• 意味のあるカテゴリラベル。
• 十分なコントラスト。
• 外部コントロールの視認できるフォーカス表示。
• キーボードとスクリーンリーダーでのテスト。
• ブラウザーのズームとレスポンシブなリフローのテスト。
• 補足コンテンツとしてのツールチップ。
• 色だけに頼らない情報伝達手段。

自動的に WCAG に準拠すると主張しないでください。

次のものだけに頼らないでください。

• セグメントの色。
• セグメントの角度。
• スライスの面積。
• ファネルの幅。
• ピラミッド内の位置。
• ホバー時のツールチップ。

正確な値を示す表を用意します。

<table>
    <caption>
        Category distribution
    </caption>

    <thead>
        <tr>
            <th scope="col">Category</th>
            <th scope="col">Value</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>22%</td>
        </tr>
    </tbody>
</table>

高度なアクセシビリティプロパティを設定する前に、チャートレベルとシリーズレベルのアクセシビリティモデルを、インストール済みのパッケージに照らして検証してください。

パフォーマンスとクリーンアップ

• 描画前にデータを検証します。
• カテゴリー数を制限します。
• 必要に応じて、少数のポイントをグループ化します。
• ツールチップのテンプレートはシンプルに保ちます。
• データラベルのテンプレートはシンプルに保ちます。
• 不要なアニメーションは避けます。
• 空の値やゼロ値を意図的に処理します。
• 更新をまとめて行います。
• 関連する変更の後に dataBind() を一度だけ呼び出します。
• refresh() はレイアウトの再計算にのみ使用します。
• アプリケーションが所有するリスナーを削除します。
• タイマーをクリアします。
• 保留中のリモートリクエストをキャンセルします。
• 動的なホストが削除されたときに、チャートを破棄します。

chart.destroy();

実行時検証チェックリスト

✅ @syncfusion/ej2-charts is installed.
✅ No external theme package is required solely for AccumulationChart.
✅ A supported built-in theme is configured through theme.
✅ AccumulationChart is imported.
✅ PieSeries is injected for Pie and Doughnut.
✅ FunnelSeries is injected for Funnel.
✅ PyramidSeries is injected for Pyramid.
✅ AccumulationDataLabel is injected when labels are visible.
✅ AccumulationLegend is injected when the legend is visible.
✅ AccumulationTooltip is injected when tooltips are enabled.
✅ AccumulationSelection is injected when selection is enabled.
✅ AccumulationHighlight is injected