syncfusion-blazor-3D-charts

Syncfusion Blazor 3D Chart の実装

NuGet: Syncfusion.Blazor.Chart3D + Syncfusion.Blazor.Themes
名前空間: Syncfusion.Blazor.Chart3D

Syncfusion の Blazor 3D Chart コンポーネントを実装およびカスタマイズするための包括的なスキルです。3D Chart は、回転、傾斜、奥行き、さまざまな軸タイプなど、豊富なカスタマイズオプションを備えた、縦棒、横棒、積み上げグラフタイプの美しい三次元ビジュアライゼーションを提供します。

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

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

• Blazor アプリケーションで三次元グラフを作成する
• 3D 縦棒、横棒、積み上げグラフタイプでデータを可視化する
• 回転および傾斜が可能な 3D ビジュアライゼーションを実装する
• 3D グラフのカテゴリ、数値、日時、対数軸を設定する
• さまざまなソース（IEnumerable、リモートデータ、動的オブジェクト）からデータをバインドする
• 3D グラフの外観（色、奥行き、壁の色、回転）をカスタマイズする
• 3D グラフにデータラベル、凡例、ツールチップを追加する
• 軸ラベル、目盛り線、グリッド線を設定する
• 3D グラフで選択、ハイライト、操作を有効にする
• 複数ペインの 3D グラフレイアウトを作成する
• 3D グラフをエクスポートまたは印刷する
• 3D ビジュアライゼーションの WCAG アクセシビリティ準拠を確保する
• 3D グラフの描画や設定に関する問題をトラブルシューティングする

コンポーネントの概要

パッケージ: Syncfusion.Blazor.Chart3D
コンポーネント: SfChart3D
サポートされるグラフタイプ: Column、Bar、StackedColumn、StackedBar
サポートされる軸タイプ: Category、Numeric、DateTime、Logarithmic
プラットフォーム: Blazor Server、Blazor WebAssembly、Blazor Web App（.NET 8 以降）

3D Chart コンポーネントは、視覚的なインパクトを高めるため、回転、傾斜、奥行きを設定できる三次元空間にデータを描画します。複数の系列、豊富なツールチップ、凡例、データラベル、幅広いカスタマイズオプションなど、標準的なグラフ機能をすべてサポートしています。

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

API リファレンス

📄 参照: references/api-reference.md

• Syncfusion.Blazor.Chart3D 名前空間の完全な API リファレンス
• SfChart3D コンポーネントのプロパティ、メソッド、イベント
• すべてのグラフ系列、軸、凡例、ツールチップのクラス
• データラベル、境界線、余白、スタイルのコンポーネント
• すべてのグラフイベントのイベント引数クラス
• 列挙型（Chart3DSeriesType、ValueType、SelectionMode など）
• インターフェイス定義と基底クラス
• 一般的な API シナリオの使用例
• 詳細なオンライン API ドキュメントへのリンク

イベントリファレンス

📄 参照: references/events.md

• すべての 3D グラフイベントの完全なイベントリファレンス
• ライフサイクルイベント（OnCreated、OnResized）
• 描画イベント（OnSeriesRender、OnPointRender、OnAxisLabelRender など）
• ユーザー操作イベント（OnPointClick、OnLegendClick、OnSelectionChanged）
• マウスイベント（OnChartMouseMove、OnChartMouseClick など）
• エクスポートおよびデータイベント（OnExported、OnAxisRangeRendered）
• イベント引数のプロパティと使用例
• 複数のイベントを含む完全な実用例
• イベント処理のベストプラクティス

はじめに

📄 参照: references/getting-started.md

• Blazor Server、WebAssembly、Web App のインストールとセットアップの完全ガイド
• NuGet パッケージのインストール（Syncfusion.Blazor.Chart3D）
• サービス登録と名前空間のインポート
• スクリプトとテーマの設定
• 完全なコード例を使って最初の 3D グラフを作成する方法
• データソースの設定と基本的なバインド
• .NET 8 以降のレンダーモードの設定
• 一般的なセットアップの問題のトラブルシューティング

グラフタイプ

📄 参照: references/chart-types.md

• Column グラフ — 縦型の 3D 棒
• Bar グラフ — 横型の 3D 棒
• Stacked Column グラフ — 縦方向に積み上げた系列
• Stacked Bar グラフ — 横方向に積み上げた系列
• グラフタイプの設定（Chart3DSeriesType 列挙型）
• 縦棒／横棒の間隔と幅のカスタマイズ
• GroupName プロパティを使用した縦棒のグループ化
• 1 つのグラフで複数の系列を使用する方法
• 各タイプの完全なコード例

データバインディング

📄 参照： references/data-binding.md

• IEnumerable オブジェクトを使用したリストバインディング
• 動的なデータ構造に対する ExpandoObject バインディング
• 実行時データに対する DynamicObject バインディング
• SfDataManager を使用したリモートデータバインディング
• DataSource、XName、YName プロパティのマッピング
• 複雑なデータ構造とネストされたプロパティ
• 動的なデータの更新とリフレッシュ
• パフォーマンスの最適化に関するヒント

軸の設定

📄 参照： references/axes-configuration.md

• カテゴリ軸 — 離散カテゴリ用
• 数値軸 — 連続的な数値データ用
• DateTime 軸 — 時系列データ用
• 対数軸 — 指数スケールのデータ用
• ValueType プロパティの設定
• 軸範囲（Minimum、Maximum、Interval）
• 軸タイトルとタイトルの回転
• 目盛線とグリッド線のカスタマイズ
• 複数軸のサポート
• 各軸タイプの完全なサンプル

軸ラベル

📄 参照： references/axis-labels.md

• ラベルの書式設定（LabelFormat プロパティ）
• カスタムラベルテンプレート
• ラベルの回転（LabelRotationAngle）
• ラベルの配置（BetweenTicks、OnTicks）
• ラベルのスタイルのカスタマイズ（フォント、色、サイズ）
• スマートなラベルの重なり処理
• イベントを使用したカスタムラベルテキスト
• 端のラベルの配置
• マルチレベルラベル

データラベル

📄 参照： references/data-labels.md

• 系列でのデータラベルの有効化
• ラベル位置の設定
• ラベルテンプレートのカスタマイズ
• ラベルのスタイル設定（フォント、色、背景）
• スマートなラベル配置
• 書式のカスタマイズ
• 条件に応じたラベルの表示設定
• 完全な実装例

凡例

📄 参照： references/legend.md

• 凡例の有効化と配置
• 凡例の配置オプション
• 系列名のカスタマイズ
• 凡例のスタイルと外観
• インタラクティブな凡例の切り替え
• カスタム凡例項目とアイコン
• 凡例テンプレート
• 完全な設定例

ツールチップ

📄 参照： references/tooltip.md

• ホバー時のツールチップの有効化
• ツールチップの書式のカスタマイズ
• カスタムツールチップテンプレート
• ツールチップのスタイル設定（境界線、塗りつぶし、不透明度）
• 複数ポイントのツールチップコンテンツ
• 系列間で共有されるツールチップ
• 完全な実装例

外観とスタイル

📄 参照： references/appearance.md

• チャートの背景と壁面の色
• 系列の色とカラーパレット
• テーマとの統合（Material、Bootstrap、Fluent、Tailwind）
• CssClass を使用したカスタム CSS のスタイル設定
• 不透明度と透明効果
• 境界線のスタイルとカスタマイズ
• アニメーションの設定
• 視覚効果と拡張機能

チャートの寸法と 3D 効果

📄 参照： references/chart-dimensions.md

• チャートサイズの設定（Width、Height）
• レスポンシブなサイズ設定の手法
• 3D 回転（EnableRotation、RotationAngle）
• 傾斜角度の設定（TiltAngle）
• 奥行きの設定（Depth プロパティ）
• 壁面サイズのカスタマイズ
• パースペクティブと視角
• 完全な寸法設定例

選択とハイライト表示

📄 参照： references/selection.md

• 選択モード（Point、Series、Cluster）
• 選択機能の有効化
• 選択パターンと視覚スタイル
• 複数選択のサポート
• 選択イベントと処理
• プログラムによる選択
• ハイライトモードと効果
• 完全な選択例

複数ペイン

📄 参照： references/multiple-panes.md

• 複数ペインのチャートレイアウトの作成
• 行と列のペイン設定
• 特定のペインへの軸の割り当て
• ペイン間での系列の分配
• ペインの境界線と背景のカスタマイズ
• ペインの同期動作
• 複数ペインのユースケース
• 複数ペインの完全な例

印刷とエクスポート

📄 参照： references/print-export.md

• 印刷機能
• 画像形式（PNG、JPEG、SVG）へのエクスポート
• PDF ドキュメントへのエクスポート
• エクスポート設定オプション
• カスタムエクスポート設定
• 印刷プレビューのカスタマイズ
• エクスポートの完全なサンプル

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 準拠の概要
• キーボードナビゲーションのサポート
• ARIA 属性とロール
• スクリーンリーダーとの互換性
• フォーカス管理
• ハイコントラストモードのサポート
• 色のコントラスト要件
• アクセシブルなデザインパターン
• アクセシビリティのテスト

クイックスタートの例

@page "/3d-chart-demo"
@using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Sales Analysis" 
           WallColor="transparent" 
           EnableRotation="true" 
           RotationAngle="7" 
           TiltAngle="10" 
           Depth="100">
    
    <Chart3DPrimaryXAxis Title="Month" 
                         ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
    </Chart3DPrimaryXAxis>
    
    <Chart3DPrimaryYAxis Title="Sales (in thousands)">
    </Chart3DPrimaryYAxis>
    
    <Chart3DLegendSettings Visible="true"></Chart3DLegendSettings>
    
    <Chart3DTooltipSettings Enable="true"></Chart3DTooltipSettings>
    
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@SalesData" 
                       Name="Sales" 
                       XName="Month" 
                       YName="SalesValue" 
                       Type="Chart3DSeriesType.Column">
            <Chart3DDataLabel Visible="true"></Chart3DDataLabel>
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double SalesValue { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", SalesValue = 35 },
        new SalesInfo { Month = "Feb", SalesValue = 28 },
        new SalesInfo { Month = "Mar", SalesValue = 34 },
        new SalesInfo { Month = "Apr", SalesValue = 32 },
        new SalesInfo { Month = "May", SalesValue = 40 },
        new SalesInfo { Month = "Jun", SalesValue = 32 },
        new SalesInfo { Month = "Jul", SalesValue = 35 }
    };
}

よくあるパターン

複数系列のチャート

@using Syncfusion.Blazor.Chart3D

<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
    </Chart3DPrimaryXAxis>
    
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@Data" Name="Series 1" XName="X" YName="Y1" Type="Chart3DSeriesType.Column">
        </Chart3DSeries>
        <Chart3DSeries DataSource="@Data" Name="Series 2" XName="X" YName="Y2" Type="Chart3DSeriesType.Column">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Y1 { get; set; }
        public double Y2 { get; set; }
    }

    public List<ChartData> Data = new List<ChartData>
    {
        new ChartData { X = "Jan", Y1 = 35, Y2 = 28 },
        new ChartData { X = "Feb", Y1 = 28, Y2 = 32 },
        new ChartData { X = "Mar", Y1 = 34, Y2 = 30 },
        new ChartData { X = "Apr", Y1 = 32, Y2 = 36 },
        new ChartData { X = "May", Y1 = 40, Y2 = 38 },
        new ChartData { X = "Jun", Y1 = 32, Y2 = 34 },
        new ChartData { X = "Jul", Y1 = 35, Y2 = 37 }
    };
}

積み上げ縦棒グラフ

@using Syncfusion.Blazor.Chart3D

<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
    </Chart3DPrimaryXAxis>
    
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@Data" XName="X" YName="Y1" Type="Chart3DSeriesType.StackingColumn">
        </Chart3DSeries>
        <Chart3DSeries DataSource="@Data" XName="X" YName="Y2" Type="Chart3DSeriesType.StackingColumn">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    public class StackingData
    {
        public string X { get; set; }
        public double Y1 { get; set; }
        public double Y2 { get; set; }
    }

    public List<StackingData> Data = new List<StackingData>
    {
        new StackingData { X = "Jan", Y1 = 20, Y2 = 15 },
        new StackingData { X = "Feb", Y1 = 18, Y2 = 12 },
        new StackingData { X = "Mar", Y1 = 25, Y2 = 14 },
        new StackingData { X = "Apr", Y1 = 22, Y2 = 16 },
        new StackingData { X = "May", Y1 = 28, Y2 = 18 },
        new StackingData { X = "Jun", Y1 = 24, Y2 = 14 },
        new StackingData { X = "Jul", Y1 = 26, Y2 = 17 }  
    };
}

日時軸のチャート

@using Syncfusion.Blazor.Chart3D

<SfChart3D WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.DateTime" 
                         LabelFormat="yyyy">
    </Chart3DPrimaryXAxis>
    
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@TimeSeriesData" 
                       XName="Date" 
                       YName="Value" 
                       Type="Chart3DSeriesType.Column">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    public class TimeSeriesPoint
    {
        public DateTime Date { get; set; }
        public double Value { get; set; }
    }

    public List<TimeSeriesPoint> TimeSeriesData = new List<TimeSeriesPoint>
    {
        new TimeSeriesPoint { Date = new DateTime(2018, 1, 1), Value = 120 },
        new TimeSeriesPoint { Date = new DateTime(2019, 1, 1), Value = 135 },
        new TimeSeriesPoint { Date = new DateTime(2020, 1, 1), Value = 150 },
        new TimeSeriesPoint { Date = new DateTime(2021, 1, 1), Value = 170 },
        new TimeSeriesPoint { Date = new DateTime(2022, 1, 1), Value = 160 },
        new TimeSeriesPoint { Date = new DateTime(2023, 1, 1), Value = 185 },
        new TimeSeriesPoint { Date = new DateTime(2024, 1, 1), Value = 200 }
    };
}

主要なプロパティと API

SfChart3D コンポーネント

主なプロパティ：

• Title：チャートのタイトルテキスト
• SubTitle：チャートのサブタイトルテキスト
• Width/Height：チャートのサイズ（単位付きの文字列またはパーセンテージ）
• WallColor：3D 壁面の背景色
• EnableRotation：マウスによる回転を有効化（bool）
• RotationAngle：初期回転角度（0～360 度）
• TiltAngle：3D パースペクティブの傾斜角度（0～360 度）
• Depth：3D 描画の奥行き（数値）
• Theme：チャートのテーマ（Material、Bootstrap、Fluent、Tailwind など）
• Background：チャートの背景色
• BackgroundImage：背景画像の URL

メソッド：

• ExportAsync(ExportType, string) - チャートを PNG、JPEG、SVG、または PDF にエクスポートします
• PrintAsync() - チャートを印刷します
• Refresh() - チャートの描画を更新します

主なイベント：

• OnCreated - Chart3DCreatedEventArgs
• OnPointClick - Chart3DPointClickEventArgs
• OnSeriesRender - Chart3DSeriesRenderEventArgs
• OnPointRender - Chart3DPointRenderEventArgs
• OnLegendClick - Chart3DLegendClickEventArgs
• OnTooltipRender - Chart3DTooltipRenderEventArgs
• OnSelectionChanged - Chart3DSelectionChangedEventArgs
• OnAxisLabelRender - Chart3DAxisLabelRenderEventArgs

Chart3DSeries のプロパティ

• DataSource：バインドするデータコレクション
• XName：X 軸値のプロパティ名
• YName：Y 軸値のプロパティ名
• Name：凡例に表示する系列名
• Type：Chart3DSeriesType 列挙型（Column、Bar、StackingColumn、StackingBar）
• Fill：系列の色
• Opacity：系列の不透明度（0～1）
• ColumnSpacing：縦棒間の間隔（0～1）
• ColumnWidth：縦棒の幅（0～1）
• GroupName：グループ化された縦棒のグループ名
• Visible：系列の表示切り替え

子コンポーネント：

• Chart3DDataLabel - データラベルの設定
• Chart3DEmptyPointSettings - 空のポイントの処理
• Chart3DSeriesBorder - 境界線のカスタマイズ
• Chart3DAnimation - アニメーションの設定

軸コンポーネント（Chart3DPrimaryXAxis、Chart3DPrimaryYAxis、Chart3DAxis）

主なプロパティ：

• ValueType：ValueType 列挙型（Category、Numeric、DateTime、Double、DateTimeCategory、Logarithmic）
• Title：軸のタイトルテキスト
• Minimum/Maximum：軸範囲の下限と上限
• Interval：軸値の間隔
• LabelFormat：ラベルの書式文字列（例："yyyy"、"C"、"N2"）
• LabelRotationAngle：ラベルの回転角度
• EdgeLabelPlacement：EdgeLabelPlacement 列挙型（None、Shift、Hide）
• LabelPlacement：LabelPlacement 列挙型（OnTicks、BetweenTicks）
• RangePadding：ChartRangePadding 列挙型（Auto、None、Normal、Additional、Round）
• IsInversed：軸の方向を反転
• OpposedPosition：軸を反対側に配置

子コンポーネント：

• Chart3DAxisLabelStyle - ラベルのフォントのカスタマイズ
• Chart3DAxisTitleStyle - タイトルのフォントのカスタマイズ
• Chart3DMajorGridLines / Chart3DMinorGridLines - グリッド線の設定
• Chart3DMajorTickLines / Chart3DMinorTickLines - 目盛り線の設定

凡例の設定（Chart3DLegendSettings）

• Visible：凡例を表示／非表示にします
• Position：LegendPosition 列挙型（Top、Bottom、Left、Right、Custom）
• Alignment：Alignment 列挙型（Near、Center、Far）
• Height/Width：凡例の寸法
• ShapeHeight/ShapeWidth：アイコンの寸法
• ToggleVisibility：クリックによる系列の表示切り替えを有効にします
• Mode：Chart3DLegendMode 列挙型（Series、Point）

子コンポーネント：

• Chart3DLegendTextStyle - テキストのフォントスタイル
• Chart3DLegendBorder - 境界線のカスタマイズ
• Chart3DLegendMargin - 余白の設定

ツールチップの設定（Chart3DTooltipSettings）

• Enable：ツールチップを有効にします
• Fill：背景色
• Format：ツールチップの内容の書式文字列
• Shared：系列間でツールチップを共有します
• EnableMarker：ツールチップにマーカーを表示します
• FadeOutDuration：フェードアウト時間（ミリ秒）
• FadeOutMode：Chart3DFadeOutMode 列挙型（Click、Move）
• Template：カスタムツールチップ用のRenderFragment

子コンポーネント：

• Chart3DTooltipTextStyle - テキストのフォントスタイル
• Chart3DTooltipBorder - 境界線のカスタマイズ

選択の設定

• SelectionMode：SelectionMode 列挙型（None、Point、Series、Cluster）
• SelectionPattern：SelectionPattern 列挙型（None、Dots、DiagonalForward、Grid、Chessboard など）
• HighlightMode：HighlightMode 列挙型（None、Point、Series、Cluster）

Chart3DSelectedDataIndexes コレクションと Chart3DSelectedDataIndex を使用すると、ポイントをプログラムで選択できます。

一般的なユースケース

ビジネスダッシュボードの指標

経営層向けダッシュボードで、KPI、売上データ、パフォーマンス指標を強化された3D表示で表示します。

財務データの可視化

日時軸と複数の系列を使用して、株価、市場動向、財務比較を描画します。

科学データの提示

対数軸または数値軸を使用して、実験データ、測定値、研究結果を可視化します。

製品の比較

グループ化または積み上げ列を使用して、カテゴリごとの製品機能、評価、売上を比較します。

時系列分析

日時軸と、データ変更時の滑らかなアニメーションを使用して、時間の経過に伴う傾向を表示します。

地域別売上レポート

カテゴリ軸と色鮮やかな系列を使用して、地域、国、テリトリーごとの売上を表示します。

トラブルシューティングのヒント

チャートが描画されない場合：

• Program.cs で AddSyncfusionBlazor() サービスが登録されていることを確認します
• _Imports.razor の名前空間のインポートを確認します
• スクリプト参照がbodyタグの末尾にあることを確認します
• .NET 8以降のプロジェクトでは、レンダーモードを確認します

データが表示されない場合：

• XName と YName がプロパティ名と完全に一致していることを確認します（大文字と小文字は区別されます）
• DataSource が null ではなく、データを含んでいることを確認します
• ValueType がデータ型と一致していることを確認します（文字列の場合はCategory、数値の場合はNumeric）

3D回転が機能しない場合：

• EnableRotation="true" を設定します
• RotationAngle が0～360の範囲内であることを確認します
• オーバーレイによってマウスイベントがブロックされていないか確認します

パフォーマンスに問題がある場合：

• データポイント数を制限します（3D描画はリソースを大量に消費します）
• 不要な場合はアニメーションを無効にします
• データ量に適したチャートタイプを使用します

関連するSyncfusionコンポーネント

• Chart - 30種類以上のチャートタイプに対応する2Dチャートコンポーネント
• Stock Chart - テクニカル指標に対応した金融チャート
• Circular Gauge - 円形ゲージの可視化
• Pivot Table - 多次元データ分析
• TreeMap - 階層データの可視化