syncfusion-aspnetcore-charts

Syncfusion ASP.NET Core Charts の実装

Syncfusion ASP.NET Core Chart コンポーネントは、25 種類以上のインタラクティブなチャートタイプをサポートする、豊富な機能を備えたデータ視覚化コントロールです。豊富なカスタマイズオプション、複数の軸、データバインディング機能に加え、ズーム、パン、十字線、ツールチップなどのインタラクティブ機能を提供します。

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
  • はじめに
  • チャートタイプ
  • データバインディング
  • 軸の設定
  • 系列の設定
  • 視覚要素
  • インタラクティブ機能
  • 高度な機能
  • 外観とテーマ設定
  • アクセシビリティとローカライズ
• クイックスタートの例
• よく使われるパターン
  • 複数系列のチャート
  • データラベルとマーカー付きチャート
  • 複合チャート
  • ズームと十字線付きチャート
• 主な設定オプション
  • チャートレベルのプロパティ
  • 主軸（e-chart-primaryxaxis）
  • 系列のプロパティ（e-series）
  • インタラクティブ機能
  • 視覚要素のオプション
• よくあるユースケース
  • 1. 売上ダッシュボード
  • 2. 財務分析
  • 3. トレンド分析
  • 4. 統計分布
  • 5. パフォーマンス監視
  • 6. 比較分析
• トラブルシューティングのヒント
• 関連コンポーネント
• API リファレンス
• その他のリソース

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

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

• ASP.NET Core アプリケーションで、あらゆる種類のチャートやグラフを作成する
• 折れ線、面、縦棒、横棒などのチャートタイプでデータを視覚化する
• ローソク足、OHLC、テクニカル指標を使用して財務データを表示する
• ズーム、パン、十字線、選択機能を備えたインタラクティブなチャートを実装する
• 複数系列のチャートや複合チャートを作成する
• チャートにデータラベル、マーカー、凡例、注釈を追加する
• 軸（数値、日時、カテゴリ、対数）を設定する
• チャートを PDF、SVG、画像形式でエクスポートする
• 複数のチャートコンポーネントを使用してダッシュボードを構築する
• WCAG に準拠したアクセシブルなチャートを実装する

コンポーネントの概要

主な機能：

• 25 種類以上のチャートタイプ： 折れ線、面、縦棒、横棒、散布図、バブル、ローソク足、OHLC など
• データバインディング： JSON 配列、DataManager、OData サービス、動的更新
• 複数の軸： スケールの異なる複数の X 軸と Y 軸をサポート
• インタラクティブ機能： ズーム、パン、十字線、トラックボール、選択、ツールチップ
• カスタマイズ： テーマ、色、グラデーション、カスタムテンプレート
• 高度な機能： 注釈、ストリップライン、トレンドライン、テクニカル指標、誤差範囲
• エクスポート： PDF、SVG、PNG、JPEG、CSV 形式
• アクセシビリティ： WCAG 2.0 準拠、キーボードナビゲーション、RTL サポート

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• ASP.NET Core プロジェクトへの Chart タグヘルパーの追加
• スクリプトマネージャーの登録
• 最初のチャートの作成
• 基本設定とアプリケーションの実行

グラフの種類

📄 参照： references/line-area-charts.md

• 折れ線、ステップ折れ線、スプラインの各グラフ
• エリア、ステップエリア、スプラインエリアの各グラフ
• 積み上げエリアと 100％ 積み上げエリア
• 範囲エリアとスプライン範囲エリア
• 各種類の用途と完全なサンプル

📄 参照： references/column-bar-charts.md

• 縦棒グラフと横棒グラフ
• 積み上げ縦棒／横棒グラフと 100％ 積み上げグラフ
• 範囲縦棒グラフ
• グラフの縦向き配置
• 完全な設定例

📄 参照： references/financial-charts.md

• ローソク足グラフ
• OHLC（始値・高値・安値・終値）グラフ
• HiLo グラフと HiLoOpenClose グラフ
• テクニカル指標（SMA、EMA、RSI、MACD など）
• 金融データのバインドパターン

📄 参照： references/scatter-bubble-charts.md

• 相関分析用の散布図
• 3 つの次元を持つバブルチャート
• ポイントのカスタマイズとサイズ設定
• 完全な実装例

📄 参照： references/specialized-charts.md

• 箱ひげ図（統計分布）
• ヒストグラム（度数分布）
• パレート図（累積分析）
• ウォーターフォール図（連続する値の変化）
• 極座標グラフとレーダーチャート
• 各種類の完全なサンプル

データバインド

📄 参照： references/data-binding.md

• JSON オブジェクト配列へのバインド
• DataManager との連携
• OData Web サービス
• 複雑なプロパティのバインド
• 動的なデータ更新
• ローカルデータとリモートデータ

軸の設定

📄 参照： references/axes-configuration.md

• 軸の種類：数値、日時、カテゴリ、対数
• 複数の軸の設定
• 軸の交差と位置
• 反転軸
• 軸のタイトルとスタイル
• 範囲と間隔のカスタマイズ

📄 参照： references/axis-labels.md

• ラベルのスマートな管理（省略、折り返し、回転、非表示）
• グループ化用の複数レベルのラベル
• ラベルの書式設定とテンプレート
• ラベルの配置のカスタマイズ
• 端のラベルの処理
• ラベルの回転と配置

系列の設定

📄 参照： references/series-configuration.md

• 複数の系列の追加
• 系列の種類とプロパティ
• 複合グラフ（グラフの種類の組み合わせ）
• 空のポイントの処理
• 系列のカスタマイズ
• パフォーマンスの最適化

視覚要素

📄 参照： references/data-labels.md

• データラベルの有効化と配置
• ラベルのテンプレートと書式設定
• データソースからのテキストマッピング
• ラベルのスマートな配置
• カスタマイズ（フォント、色、枠線）
• ラベルの接続線

📄 参照： references/markers-and-legends.md

• データマーカーの形状とカスタマイズ
• マーカーの表示とサイズ設定
• 凡例の位置とレイアウト
• 凡例のカスタマイズとテンプレート
• 凡例のページネーション
• 系列の表示切り替え

インタラクティブ機能

📄 参照： references/zooming-panning.md

• ズームのモード：選択、ピンチ、マウスホイール
• パンのサポート
• ズームツールバーの設定
• ズームのリセット機能
• プログラムによるズーム制御

📄 参照： references/crosshair-trackball.md

• クロスヘアの設定とカスタマイズ
• 複数系列向けのトラックボールモード
• ツールチップとの連携
• 線のスタイルとラベル
• 共有ツールチップ

📄 参照： references/tooltips.md

• ツールチップの有効化とカスタマイズ
• ツールチップのテンプレート
• 系列間で共有するツールチップ
• 書式設定とスタイル
• ツールチップのアニメーション

📄 参照： references/selection.md

• ポイントと系列の選択
• 選択モードとパターン
• 複数選択
• 選択イベント
• 視覚的なフィードバックのカスタマイズ

高度な機能

📄 参照： references/annotations-striplines.md

• チャートの注釈（テキスト、図形、画像）
• 注釈の位置と配置
• 領域を強調表示するストリップライン
• セグメントと繰り返しのパターン
• カスタマイズとスタイル設定

📄 参照： references/trendlines-error-bars.md

• トレンドラインの種類：線形、指数、対数、多項式
• トレンドラインによる予測
• 不確実性を示すエラーバー
• エラーバーのモードと種類
• カスタマイズのオプション

📄 参照： references/multiple-panes.md

• 複数のチャートペインの作成
• ペインの設定とサイズ調整
• ペインへの系列の割り当て
• 軸の同期
• レイアウトのカスタマイズ

外観とテーマ

📄 参照： references/appearance-customization.md

• 組み込みテーマ（Material、Bootstrap、Fabric など）
• チャートの寸法とサイズ調整
• 背景と枠線のカスタマイズ
• グラデーションの色と塗りつぶし
• チャートのタイトルとサブタイトル
• 印刷とエクスポートのサポート

アクセシビリティとローカライズ

📄 参照： references/accessibility-localization.md

• WCAG 2.0 準拠
• キーボード操作
• スクリーンリーダーのサポート
• RTL（右から左）サポート
• 国際化（i18n）
• チャート要素のローカライズ

クイックスタートの例

基本的な折れ線グラフを作成する最小限の例を示します。

@* Add to your .cshtml page *@
<ejs-chart id="container" title="Sales Analysis">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.ChartData" xName="Month" yName="Sales" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
    </e-series-collection>
</ejs-chart>

// In your controller
public IActionResult Index()
{
    ViewBag.ChartData = new object[]
    {
        new { Month = "Jan", Sales = 35 },
        new { Month = "Feb", Sales = 28 },
        new { Month = "Mar", Sales = 34 },
        new { Month = "Apr", Sales = 32 },
        new { Month = "May", Sales = 40 }
    };
    return View();
}

よく使われるパターン

複数系列のチャート

<ejs-chart id="container" title="Product Comparison">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.ProductA" xName="Month" yName="Sales" 
                  name="Product A" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
        <e-series dataSource="@ViewBag.ProductB" xName="Month" yName="Sales" 
                  name="Product B" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
    <e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart>

データラベルとマーカー付きのチャート

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="X" yName="Y" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true" height="10" width="10">
                <e-series-datalabel visible="true" position="Top">
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

複合チャート

<ejs-chart id="container" title="Weather Analysis">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="Month" yName="Temperature" 
                  name="Temperature" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
        <e-series dataSource="@ViewBag.Data" xName="Month" yName="Rainfall" 
                  name="Rainfall" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>

ズームと十字線を備えたチャート

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" ></e-chart-primaryxaxis>
    <e-chart-zoomsettings enableSelectionZooming="true" enablePinchZooming="true">
    </e-chart-zoomsettings>
    <e-chart-crosshairsettings enable="true">
    </e-chart-crosshairsettings>
    <e-series-collection>
        <e-series dataSource="@ViewBag.Data" xName="Date" yName="Value" 
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area">
        </e-series>
    </e-series-collection>
</ejs-chart>

主な設定オプション

チャートレベルのプロパティ

• title：チャートのタイトルテキスト
• width/height：チャートの寸法
• theme：ビジュアルテーマ（Material、Bootstrap、Fabric など）
• background：背景色
• palettes：系列用のカスタムカラーパレット

主軸（e-chart-primaryxaxis）

• valueType：Category、Numeric、DateTime、Logarithmic
• title：軸のタイトル
• minimum/maximum：軸の範囲
• interval：ラベルの間隔
• labelFormat：ラベルの書式文字列

系列のプロパティ（e-series）

• type：チャートの種類（Line、Column、Bar、Area など）
• dataSource：可視化するデータ
• xName/yName：X 値と Y 値のプロパティ名
• name：凡例に表示する系列名
• fill：カスタムカラー
• width：線／枠線の幅

インタラクティブ機能

• e-chart-zoomsettings：ズーム機能を有効化
• e-chart-crosshairsettings：十字線を設定
• e-chart-tooltipsettings：ツールチップをカスタマイズ
• e-chart-legendsettings：凡例を設定

視覚要素のオプション

• e-series-marker：データポイントのマーカー
• e-series-datalabel：データポイント上のラベル
• e-chart-annotations：カスタム注釈
• e-striplines：強調表示する領域

よくあるユースケース

1. 売上ダッシュボード

複数の系列を持つ縦棒グラフまたは横棒グラフを使って、製品、地域、期間ごとの売上を比較します。正確な値を示すデータラベルと、分かりやすくするための凡例を追加します。

2. 財務分析

株価を可視化するには、ローソク足チャートまたは OHLC チャートを使います。テクニカル指標（SMA、EMA、RSI）を追加し、詳細な分析のためにズームを有効にします。

3. トレンド分析

トレンドライン付きの折れ線グラフまたはスプライングラフを使って、時間の経過に伴うデータの傾向を示します。将来の値を予測するために予測機能を追加します。

4. 統計分布

統計分析には箱ひげ図、度数分布にはヒストグラム、相関分析には散布図を使います。

5. パフォーマンスの監視

複数の系列とリアルタイムのデータ更新に対応するエリアチャートを使います。重要なイベントやしきい値を示すために、注釈とストリップラインを追加します。

6. 比較分析

全体に対する割合を示すには、積み上げ縦棒／横棒グラフまたは 100% 積み上げグラフを使います。累積分析にはパレート図を使います。

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

チャートがレンダリングされない場合：

• Syncfusion.EJ2.AspNet.Core NuGet パッケージがインストールされていることを確認します
• _ViewImports.cshtml に @addTagHelper *, Syncfusion.EJ2 が記述されていることを確認します
• レイアウトの <body> の末尾に <ejs-scripts> が追加されていることを確認します
• <head> にスクリプト参照が含まれていることを確認します

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

• dataSource が正しくバインドされていることを確認します
• xName と yName がプロパティ名と一致していることを確認します（大文字と小文字は区別されます）
• データが null または空ではないことを確認します
• 軸の valueType がデータ型と一致していることを確認します

大規模なデータでパフォーマンスに問題がある場合：

• 大規模なデータセットには enableDataVirtualization を使用します
• マーカーのサイズを小さくするか、マーカーを無効にします
• より軽量なチャートの種類を使用します（Spline ではなく Line）
• データの集計またはサンプリングを検討します

スタイルが適用されない場合：

• テーマが正しく設定されていることを確認します
• CSS のインポート順序を確認します
• ブラウザーの開発者ツールを使用して要素を調査します
• カスタムスタイルの詳細度が適切であることを確認します

関連コンポーネント

• 3D Chart： 3 次元の可視化に使用
• Stock Chart： ナビゲーターを備えた、金融データに特化したチャート
• Range Navigator： 日付ベースのフィルタリング用タイムラインコントロール
• Sparkline： コンパクトなインラインチャート
• Bullet Chart： KPI の可視化に使用
• Smith Chart： 電気インピーダンスの可視化に使用

API リファレンス

Chart API のすべてのプロパティ、メソッド、イベントを網羅したリファレンスについては、以下を参照してください。

📄 参照： references/api-reference.md

• すべてのプロパティの完全な一覧（設定、データバインディング、表示、インタラクティブ性、アクセシビリティ）
• すべてのイベントプロパティとその用途
• シリーズおよび軸の設定オプション
• 一般的なプロパティの組み合わせと使用パターン
• Syncfusion の公式ドキュメントへのリンク

追加リソース

• 公式 API ドキュメント： Chart API リファレンス
• ライブデモ： ASP.NET Core Chart デモ
• GitHub サンプル： ASP.NET Core の例