syncfusion-aspnetcore-sparkline

Syncfusion スパークラインの実装

このスキルを使用するタイミング

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

• コンパクトなデータビジュアライゼーションを作成する - スパークラインは、軸や座標を使わずにデータを簡潔な形式で可視化する、とても小さなグラフです
• ASP.NET Core アプリケーションと統合する - Razor ページや MVC アプリケーションで Syncfusion スパークラインコントロールを設定します
• 時間的なデータの傾向を表示する - 最小限のスペースで時間経過に伴うデータのパターンを示します（ダッシュボードやグリッドに最適です）
• 特定のデータポイントを強調する - マーカーを使用して、最大値、最小値、開始値、終了値、または負の値を示します
• インタラクティブなデータ探索をサポートする - ツールチップやトラックラインを追加して、ユーザーが操作できるようにします
• アクセシビリティ要件を満たす - WCAG 2.2 への準拠とキーボードナビゲーションのサポートを確保します

コンポーネントの概要

Syncfusion スパークラインは、一般的なデータの形状を非常にコンパクトな形式で表示する軽量なグラフコンポーネントです。主な特徴は次のとおりです。

• 使用スペースを最小限に抑える - ダッシュボードやグリッドへの統合に最適です
• 5 種類のグラフタイプ - 線、縦棒、面、勝敗、円
• 視覚的な拡張機能 - マーカー、データラベル、範囲帯
• インタラクティブな機能 - ツールチップとトラックライン
• 外観をカスタマイズ可能 - テーマ、色、境界線、パディング
• アクセシビリティ対応 - キーボードショートカットに対応し、WCAG 2.2 AA に準拠しています

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

API リファレンス

📄 参照: references/api-reference.md

• Sparkline クラスの完全な API ドキュメント（40 以上のプロパティ）
• SparklineAxisSettings、ContainerArea、Padding、Border の設定
• ポイントを強調表示する MarkerSettings（All、Start、End、High、Low、Negative）
• ラベルの設定と配置を行う DataLabelSettings
• カスタムテンプレートを使用したインタラクティブなツールチップ用の TooltipSettings
• 値の範囲を強調表示する RangeBandSettings
• マウスの追跡線用の TrackLineSettings
• 5 種類の SparklineType オプション（Line、Column、Area、Win-Loss、Pie）
• SparklineValueType オプション（Numeric、Category、DateTime）
• テーマのサポート（Material、Fabric、Bootstrap、HighContrast）
• RangePadding オプション（None、Normal、Additional、Round）
• イベントの包括的なリファレンス（Load、Loaded、AxisRendering、SeriesRendering など）
• ユーザー操作イベント（SparklineMouseClick、PointRegionMouseMove など）
• データ描画イベント（PointRendering、MarkerRendering、DataLabelRendering、TooltipInitialize）
• すべてのスパークラインタイプの使用パターンとコード例
• Syncfusion 公式 API リファレンスへのリンク

はじめに

📄 参照: references/getting-started.md

• ASP.NET Core プロジェクトのセットアップ要件
• NuGet パッケージのインストール（Syncfusion.EJ2.AspNet.Core）
• TagHelper の設定とスクリプトマネージャーの登録
• 最初のスパークラインの作成
• データソースのバインドと初期化
• スパークラインタイプの変更
• ツールチップの有効化

スパークラインタイプと設定

📄 参照: references/sparkline-types.md

• 5 種類のグラフタイプ（Line、Column、Area、Win-Loss、Pie）
• さまざまなデータシナリオにおける各タイプの使いどころ
• 各スパークラインタイプの実装パターン
• すべてのタイプのバリエーションのコード例

データ機能とカスタマイズ

📄 参照: references/data-features.md

• データバインディングの方法とデータソースの準備
• マーカーの追加（All、Start、End、High、Low、Negative）
• マーカーの外観のカスタマイズ（塗りつぶし、境界線、サイズ、不透明度）
• データラベルの設定とポイントの選択
• 値の範囲を強調表示する範囲帯
• データラベルのカスタマイズ（塗りつぶし、境界線、テキストスタイル）
• データラベルテキストの書式設定

外観とテーマ設定

📄 参照： references/appearance-theming.md

• コンテナー領域の境界線とパディングの設定
• 背景色のカスタマイズ
• テーマの選択（Material、Fabric、Bootstrap、Highcontrast）
• テーマに応じたテキストの色とデータラベルの外観
• サイズと間隔の調整
• CSS のカスタマイズ方法

ユーザー操作とツールチップ

📄 参照： references/user-interaction.md

• ツールチップの実装とモジュールの挿入
• ツールチップのカスタマイズ（塗りつぶし、テキストスタイル、書式、境界線）
• カスタム HTML を使用したツールチップのテンプレート
• トラックラインの設定と動作
• マウスによるポイントの追跡
• ツールチップの書式設定オプション

アクセシビリティとデプロイ

📄 参照： references/accessibility-deployment.md

• WCAG 2.2 AA への準拠と標準への適合
• Section 508 のサポートとスクリーンリーダーとの互換性
• キーボード操作のショートカット（印刷は Ctrl+P）
• WAI-ARIA の属性とパターン
• 右から左に記述する言語（RTL）のサポート
• 色のコントラストとモバイルデバイスに関する考慮事項
• アクセシビリティ検証ツールとチェックリスト

クイックスタートの例

最小限のスパークラインの実装例です。

// Controller: Index.cs
public class DataSource
{
    public int x { get; set; }
    public string xval { get; set; }
    public double yval { get; set; }
    
    public static List<DataSource> GetData()
    {
        List<DataSource> data = new List<DataSource>();
        data.Add(new DataSource() { x = 0, xval = "2020", yval = 2000 });
        data.Add(new DataSource() { x = 1, xval = "2021", yval = 3000 });
        data.Add(new DataSource() { x = 2, xval = "2022", yval = 2500 });
        data.Add(new DataSource() { x = 3, xval = "2023", yval = 4000 });
        return data;
    }
}

<ejs-sparkline id="sparkline" 
    type="Line" 
    dataSource="ViewBag.DataPoints">
    <e-sparkline-tooltipsettings visible="true"></e-sparkline-tooltipsettings>
</ejs-sparkline>

一般的なパターン

パターン 1：ダッシュボードの概要スパークライン

ダッシュボードの概要カードでコンパクトな Line スパークラインを使用し、主要な指標の傾向をひと目で把握できるようにします。

パターン 2：グリッドへの統合

グリッドの列にスパークラインを埋め込み、過剰なスペースを使わずに行全体のデータ分布を可視化します。

パターン 3：Win-Loss によるステータス表示

Win-Loss スパークラインを使用し、履歴データにおける成功／失敗のパターンや、プラス／マイナスの結果を表示します。

パターン 4：財務チャート

収益と費用の比較には Column スパークラインを、財務の累積傾向には Area スパークラインを使用します。

パターン 5：データポイントの強調表示

マーカーと範囲帯を組み合わせ、特異な値（高値／安値）や目標範囲を強調します。

主なプロパティ

プロパティ	目的	例
type	スパークラインのチャートタイプを設定します	type="Line"
dataSource	データをスパークラインにバインドします	dataSource="@ViewBag.Data"
xName	X 軸のデータフィールドです	xName="xval"
yName	Y 軸のデータフィールドです	yName="yval"
theme	配色テーマを設定します	theme="Material"
markerSettings.visible	ポイントにマーカーを表示します	visible="All"
dataLabelSettings.visible	データラベルを表示します	visible="All"
tooltipSettings.visible	ツールチップを有効にします	visible="true"
trackLineSettings.visible	ホバー時にトラックラインを表示します	visible="true"

一般的な使用例

1. 財務ダッシュボード：概要ウィジェットの Area スパークラインを使用して、収益の傾向を表示します
2. KPI の監視：Line スパークラインと強調表示された範囲帯を使用して、パフォーマンス指標を表示します
3. データテーブル：売上履歴や経時的なパフォーマンスを示すスパークラインをグリッドの列に追加します
4. ステータスレポート：Win-Loss スパークラインを使用して、プロジェクトの結果やテスト結果を可視化します
5. モバイルダッシュボード：コンパクトな Pie スパークラインを使用して、ポートフォリオの配分やカテゴリ別の分布を表示します