syncfusion-aspnetcore-circular-chart-3d

Syncfusion ASP.NET Core 3D Circular Chart

Syncfusion の 3D Circular Chart は、3D 円グラフ形式を使用して割合データを可視化するための強力なコンポーネントです。このスキルでは、基本的な設定から高度なインタラクティブ機能まで、ASP.NET Core アプリケーションで円グラフ／ドーナツグラフを実装、構成、カスタマイズする方法を説明します。

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

次のような場合に、このスキルを使用してください。

• 割合データを表示する円グラフまたはドーナツグラフを作成する
• データラベル、凡例、ツールチップを構成して書式設定する
• タイトル、色、スタイルでグラフの外観をカスタマイズする
• 空または欠損しているデータポイントを処理する
• 印刷やエクスポートなどのインタラクティブ機能を有効にする
• 円グラフのスライスに対するユーザー操作を実装する
• ASP.NET Core アプリケーションでグラフの動作を構成する

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールと NuGet パッケージの設定
• タグヘルパーとスクリプト参照の追加
• 最初の円グラフの作成
• ASP.NET Core の基本設定
• プロジェクト構造の設定

円グラフとドーナツグラフのバリエーション

📄 参照: references/pie-donut-variations.md

• 円グラフシリーズとドーナツシリーズの描画
• 半径のカスタマイズと構成
• ドーナツ効果のための内側半径
• 複数シリーズの描画
• 色のマッピングとスタイル設定

データラベル

📄 参照: references/data-labels.md

• データラベルの有効化と配置
• ラベルテンプレートとカスタム書式設定
• コネクター線とスタイル設定
• データソースからのテキストマッピング
• パーセンテージと値の書式設定
• イベントを使用したラベルのカスタマイズ

凡例とツールチップ

📄 参照: references/legend-tooltips.md

• 凡例の構成と配置
• 凡例の配置、サイズ、形状
• 凡例のページ送りとナビゲーション
• ツールチップの有効化と書式設定
• カスタムツールチップテンプレート
• インタラクティブなツールチップの動作
• スタイルと外観

タイトル、サブタイトル、空のデータポイント

📄 参照: references/titles-empty-points.md

• タイトルとサブタイトルの追加
• タイトルのカスタマイズとスタイル設定
• 空または null のデータポイントの処理
• 空のデータポイントのモード（Gap、Average、Drop、Zero）
• 空のデータポイントの外観のカスタマイズ
• サブタイトルのスタイル設定と配置

印刷とエクスポート

📄 参照: references/print-export.md

• 円グラフ／ドーナツグラフの印刷
• enableExport="true" を使用したエクスポートの有効化
• 画像形式（JPEG、PNG、SVG）へのエクスポート
• PDF エクスポート機能
• エクスポート構成オプション
• ユーザー操作のためのボタン連携

クイックスタート

円グラフをすぐに始めるための、最小限の動作例を示します。

// CSHTML View
<ejs-circularchart3d id="chartContainer" title="Sales Distribution" tilt="-45">
    <e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Right">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="@chartData" xName="Category" yName="Value">
            <e-circularchart3d-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
                <e-connectorstyle length="40px"></e-connectorstyle>
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

// Code-behind
public class ChartData
{
    public string Category { get; set; }
    public double Value { get; set; }
}

// Controller
List<ChartData> chartData = new()
{
    new ChartData { Category = "Product A", Value = 35 },
    new ChartData { Category = "Product B", Value = 28 },
    new ChartData { Category = "Product C", Value = 37 }
};

よくあるパターン

パターン 1：書式設定されたデータラベル付きの円グラフ

<e-circularchart3d-series-datalabel visible="true" format="n1" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
    <e-font size="12px" fontWeight="600"></e-font>
    <e-connectorstyle length="50px" color="gray"></e-connectorstyle>
</e-circularchart3d-series-datalabel>

パターン 2：ドーナツグラフの構成

<e-circularchart3d-series dataSource="@data" xName="X" yName="Y" innerRadius="50%">
</e-circularchart3d-series>

パターン 3：外観をカスタマイズした凡例

<e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Bottom" 
    alignment="@Syncfusion.EJ2.Charts.Alignment.Center" width="100%">
</e-circularchart3d-legendsettings>

パターン 4：カスタム書式のツールチップ

<e-circularchart3d-tooltipsettings enable="true" format="${point.x}: ${point.y}%"></e-circularchart3d-tooltipsettings>

主な構成プロパティ

プロパティ	用途	デフォルト
Type	シリーズの種類（円グラフは Pie、ドーナツグラフは InnerRadius を使用）	Pie
Radius	円グラフの半径の割合	80%
InnerRadius	ドーナツ効果のための内側半径（0～100%）	0%
DataLabel.Visible	データラベルの表示／非表示	false
DataLabel.Position	ラベルの位置（Inside／Outside）	Inside
LegendSettings.Visible	凡例の表示／非表示	true
Tooltip.Enable	ホバー時のツールチップの有効化	false
EmptyPointSettings.Mode	null 値の処理（Gap／Average／Drop／Zero）	Gap

よくあるユースケース

1. 市場シェアの可視化：円グラフまたはドーナツグラフを使って、製品や市場セグメントの構成比を表示します
2. 予算の内訳：費目を割合付きの円グラフのスライスとして表示します
3. アンケート結果：アンケート回答の分布を割合で可視化します
4. ステータスの分布：プロジェクトのステータス（完了、進行中、保留など）の分布を表示します
5. 販売実績：地域別または製品カテゴリ別に売上を比較します
6. 在庫レベル：倉庫別またはカテゴリ別の在庫分布を表示します
7. ダッシュボード分析：ビジネス分析ダッシュボードに円グラフやドーナツグラフを含めます

次のステップ

• はじめにガイドを読んで、最初のグラフを設定します
• さまざまな視覚スタイルについて、円グラフとドーナツグラフのバリエーションを確認します
• データをより適切に表現するため、データラベルを設定します
• インタラクティブなデータ探索のため、凡例とツールチップを追加します
• タイトルと空のデータポイントを設定して、内容を整えます
• レポートを作成するため、印刷とエクスポートを有効にします