syncfusion-aspnetcore-3d-chart

Syncfusion 3D Chart の実装

Syncfusion 3D Chart は、ASP.NET Core アプリケーション向けの強力なデータ可視化コンポーネントです。複数のチャートタイプ、データバインディング、軸の設定、豊富なインタラクティブ機能を包括的にサポートします。

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

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

• ASP.NET Core Razor アプリケーションで 3D チャートを描画する
• ローカル、リモート、または OData ソースからデータをバインドする
• 複数のチャートタイプ（バー、縦棒、積み上げ形式）を設定する
• 軸、凡例、データラベルをカスタマイズする
• スタイルと外観をカスタマイズする
• ユーザー操作（選択、ツールチップ）を実装する
• チャートデータをエクスポートまたは印刷する
• チャートのアクセシビリティを向上させる

コンポーネントの概要

Syncfusion 3D Chart（<ejs-chart3d>）は、タグヘルパーコンポーネントです。次の機能を備えています。

• マウスとタッチに対応したインタラクティブな 3D ビジュアライゼーションを描画します
• スマートなラベル配置で、複数のシリーズとデータポイントをサポートします
• 設定可能な凡例、データラベル、ツールチップを提供します
• データポイント、シリーズ、またはクラスターを選択できます
• カスタムカラーパレットと CSS による幅広いスタイル設定が可能です

主な機能：

• 積み上げオプションを備えた複数のチャートタイプ
• ローカル、リモート、OData のデータバインディング
• レスポンシブデザインと RTL のサポート
• PNG/SVG 形式へのエクスポート
• 印刷機能
• WCAG アクセシビリティへの準拠

ドキュメントとナビゲーションガイド

はじめに

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

• インストールと NuGet パッケージのセットアップ
• ASP.NET Core プロジェクトの設定
• タグヘルパーの登録
• スクリプトとスタイルの参照
• 最小限のサンプルを使用した基本的なチャート描画
• 初期データバインディングのセットアップ

データバインディングとシリーズの設定

📄 参照先： references/data-binding-series.md

• ローカル JSON データのシリーズへのバインド
• DataManager によるリモートデータバインディング
• OData アダプターの設定
• 空のデータポイントの処理
• XName および YName プロパティのマッピング
• リモートデータのクエリフィルタリング

チャートタイプとシリーズ

📄 参照先： references/chart-types-series.md

• バーチャートタイプの実装
• 縦棒チャートタイプの設定
• 積み上げバーおよび積み上げ縦棒チャート
• 100% 積み上げバーおよび縦棒のバリエーション
• シリーズの表示設定とデータマッピング
• タイプ固有の設定

軸とスケールの設定

📄 参照先： references/axes-configuration.md

• カテゴリ軸の設定とラベル
• 数値軸の設定と範囲
• 日時軸のバインディングと書式設定
• 指数データ向けの対数軸
• 1 つのチャートでの複数ペイン
• 軸のカスタマイズとラベルの配置

データラベルと凡例

📄 参照先： references/data-labels-legends.md

• データラベルの有効化と配置
• データラベルのテンプレートと書式設定
• 凡例の配置（上、下、左、右）
• 座標を使用した凡例のカスタム配置
• 凡例の配置揃えと逆順オプション
• ラベルの表示と重なりの処理

スタイルと外観

📄 参照先： references/styling-appearance.md

• シリーズ用のカスタムカラーパレット
• データからのポイント単位の色のマッピング
• チャートの背景と枠線のカスタマイズ
• 個々のデータポイントのカスタマイズ
• 枠線のスタイル設定とチャートの寸法
• テーマと配色の設定

ユーザー操作とイベント

📄 参照先： references/user-interactions.md

• 選択モード：ポイント、シリーズ、クラスター
• ポイント選択時の強調表示とイベント
• シリーズ選択の動作
• ツールチップの有効化と設定
• 固定表示と追従表示のツールチップ配置
• ツールチップの書式テンプレートとスタイル設定
• 選択イベントの処理

高度な機能

📄 参照： references/advanced-features.md

• 印刷機能の設定
• PNG／SVG 形式へのエクスポート
• アクセシビリティ機能と WCAG 準拠
• イベント処理（PointRender、TextRender、SelectionComplete）
• 大規模データセットのパフォーマンス最適化
• クロスブラウザー互換性

クイックスタートの例

データを使って 3D 縦棒グラフを描画する最小限の例を以下に示します。

<ejs-chart3d id="container" title="Product Sales" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.chartData" 
                          xName="month" 
                          yName="sales" 
                          type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
        </e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-legendsettings position="@Syncfusion.EJ2.Charts.LegendPosition.Bottom"></e-chart3d-legendsettings>
    <e-chart3d-tooltipsettings enable="true"></e-chart3d-tooltipsettings>
</ejs-chart3d>

// Controller
public class HomeController : Controller
{
    public IActionResult Index()
    {
        List<ChartData> chartData = new List<ChartData>
        {
            new ChartData { month = "Jan", sales = 35 },
            new ChartData { month = "Feb", sales = 28 },
            new ChartData { month = "Mar", sales = 34 }
        };
        ViewBag.chartData = chartData;
        return View();
    }
}

public class ChartData
{
    public string month { get; set; }
    public double sales { get; set; }
}

よく使われるパターン

パターン 1：複数系列の比較

複数のデータ系列を比較のために可視化する場合：

1. 異なるデータソースを指定した <e-chart3d-series> 要素を複数定義します
2. カスタムパレットを使って対照的な色を指定します
3. 系列を識別できるように凡例を有効にします
4. 凡例のクリックイベントを使って系列の表示／非表示を切り替えます

パターン 2：インタラクティブなデータ探索

データとのユーザーインタラクションを有効にする場合：

1. 個々のポイントを選択できるよう、SelectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Point" を設定します
2. カスタム書式テンプレートを使ってツールチップを有効にします
3. 動的なスタイル設定のために PointRender イベントを処理します
4. 更新のための選択イベントコールバックを実装します

パターン 3：リアルタイムのデータ更新

変化するデータを表示する場合：

1. データを動的なデータソースにバインドします
2. データコレクションを更新して、更新処理を呼び出します
3. 大規模データセットではリモートデータバインディングの使用を検討します
4. データ範囲に適した軸スケーリングを実装します

パターン 4：複数ペインの表示

異なるスケールのデータを比較する場合：

1. グラフ内に行スパンを指定して複数の行を定義します
2. インデックスを使って系列を特定の行に割り当てます
3. 各行に独立した軸を設定します
4. 配置をそろえるために x 軸を同期します

主なプロパティのクイックリファレンス

プロパティ	目的	一般的な値
type	グラフの種類	Column, Bar, StackingColumn, StackingBar, StackingColumn100, StackingBar100
xName	X 軸のデータフィールド	データオブジェクトのフィールド名
yName	Y 軸のデータフィールド	データオブジェクトのフィールド名
dataSource	系列データ	オブジェクトのリストまたは DataManager
visible	系列の表示状態	true, false
cornerRadius	棒／縦棒の角の丸み	0～10（ピクセル）
marker.visible	データポイントのマーカーを表示	true, false
dataLabel.visible	データラベルを表示	true, false
tooltip.enable	ツールチップを有効化	true, false
selectionMode	選択動作	None, Point, Series, Cluster
background	グラフの背景色	16 進数の色コードまたは色名
wallColor	3D の背面の色	16 進数の色コード

ヘルプの利用

詳しい例や高度な使い方については、上記の個別リファレンスガイドを参照してください。それぞれのガイドでは、特定の機能領域について、完全なコードサンプル、特殊なケース、トラブルシューティングを取り上げています。

---

次のステップ：

• 「Getting Started」から始めて、最初のグラフを設定します
• 必要な機能に応じて、関連するリファレンスガイドを選びます
• 各リファレンスファイルには、必要な例がすべて含まれています