syncfusion-blazor-sparkline-charts

スパークラインチャートの実装

NuGet: Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes（または個別パッケージの場合は Syncfusion.Blazor.Sparkline） 名前空間: Syncfusion.Blazor.Charts

このスキルを使うタイミング

アプリケーションに Syncfusion Blazor スパークラインチャートを実装する方法をユーザーに案内する場合に、このスキルを使用します。スパークラインは、データの傾向をひと目で把握できるように設計された、小さな単語サイズのチャートです。テキスト、テーブル、ダッシュボード内のインライン表示に最適です。

次のような場合に使用します:

• ダッシュボードやテーブルにインラインのトレンドチャートを追加したい
• 視覚的なトレンドを示すコンパクトな KPI インジケーターが必要
• 小さなチャート、ミニチャート、マイクロチャートについて質問している
• 完全なチャートの軸やラベルを使わずにトレンドを可視化したい
• 限られたスペースでデータ密度の高い可視化が必要
• スパークライン、折れ線のトレンド、インラインのデータ可視化について質問している
• メールレポートやモバイル表示に視覚的なインジケーターを追加したい

コンポーネントの概要

スパークラインチャートは、狭いスペースに最適化された特殊なデータ可視化です。多機能なチャートとは異なり、スパークラインには次の特長があります。

• 軸、凡例、多数のラベルを使わずにトレンドを表示します
• テキストやテーブルのセル内にインラインで配置できます
• データのパターンをひと目で示します
• 複数のチャートタイプ（折れ線、エリア、縦棒、WinLoss、円）をサポートします
• 特定のデータポイント（最高値、最低値、負の値、開始点、終了点）を強調表示します
• ホバー時に詳細情報をツールチップで表示します

最適な用途: KPI ダッシュボード、データテーブル、財務レポート、分析サマリー、モバイルインターフェイス、メールレポート、コンパクトなトレンドの可視化が必要なあらゆるシナリオ。

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

このスキルでは、段階的開示を採用しています。メインの SKILL.md（このファイル）では、概要とナビゲーションを説明します。ユーザーのニーズに応じて、適切なリファレンスファイルを参照してください。

API リファレンス

📄 参照: references/api-reference.md

• SfSparkline のプロパティ、メソッド、イベントの全容
• サポートされている子コンポーネントとネストされたタグ
• 列挙型と値型のリファレンス
• すぐに実装できるコンパクトな例

はじめに

📄 参照: references/getting-started.md

• インストールと NuGet パッケージの設定
• 基本的なスパークラインの実装
• CSS テーマのインポート
• 最初に動作する例
• WebAssembly と Server の設定の違い

チャートの種類と可視化

📄 参照: references/chart-types.md

• 折れ線スパークライン（既定。連続したトレンドを表示）
• エリアスパークライン（塗りつぶしの折れ線チャート）
• 縦棒スパークライン（縦棒）
• WinLoss スパークライン（勝敗を示す二値インジケーター）
• 円スパークライン（割合を示すセグメント）
• 各タイプの使いどころ
• タイプ固有のプロパティと例

📄 参照: references/data-binding.md

• DataSource プロパティの設定
• 配列およびリストのデータバインディング
• XName と YName のフィールドマッピング
• 値の型と書式設定
• 動的なデータ更新
• データ変換のパターン

データの表示

📄 参照: references/markers-and-data-labels.md

• マーカーの設定（形状、サイズ、色）
• データラベルの表示と書式設定
• 端のラベルの処理
• ラベルテンプレート
• 特定のポイントに対するマーカーの表示設定

📄 参照: references/special-points-customization.md

• 開始点と終了点の強調表示
• 最高値のカスタマイズ
• 最低値のカスタマイズ
• 負の値のスタイル設定
• 特定ポイントの色とサイズの設定

📄 参照: references/range-bands.md

• 範囲バンドの設定（水平のしきい値ゾーン）
• 範囲の開始値と終了値
• 色と不透明度のカスタマイズ
• 複数の範囲バンド
• 使用例: 目標値、しきい値、許容範囲

カスタマイズとスタイル設定

📄 参照： references/axis-customization.md

• 軸線の表示とスタイル設定
• 最小値と最大値の設定
• 値の表示モード
• 軸ラベルの書式設定
• グリッド線のカスタマイズ

📄 参照： references/dimensions-and-appearance.md

• 幅と高さの設定
• パディングとマージン
• 境界線のスタイル設定
• 背景色と塗りつぶし色
• 線幅のカスタマイズ
• RTL（右から左）サポート
• コンテナー領域のスタイル設定

インタラクションとイベント

📄 参照： references/user-interaction-and-events.md

• ツールチップの設定とテンプレート
• ツールチップの書式設定
• ホバー時の追跡線
• コンポーネントイベント（OnLoaded、OnPointRendering、OnSeriesRendering、OnMarkerRendering、OnDataLabelRendering、OnPointRegionMouseClick、OnResizing、OnAxisRendering）
• メソッド：RefreshAsync()
• ユーザーインタラクションのパターン

グローバル化とアクセシビリティ

📄 参照： references/globalization-and-accessibility.md

• 国際化とローカライズ
• 数値書式のカスタマイズ
• 通貨と日付の書式設定
• RTL サポート
• WCAG 準拠
• キーボード操作
• スクリーンリーダーのサポート

クイックスタートの例

売上の傾向を示す最小限のスパークラインの例です。

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts

<h3>Monthly Sales Trend</h3>

<SfSparkline DataSource="@SalesData" 
              XName="Month" 
              YName="Sales"
              Type="SparklineType.Line"
              Height="50px" 
              Width="200px"
              Fill="#3366cc"
              LineWidth="2"  TValue="SalesInfo">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                             Size="4" 
                             Fill="#ffffff" 
                             Border="new SparklineMarkerBorder { Color = "#3366cc", Width = 1 }">
    </SparklineMarkerSettings>
    <SparklineTooltipSettings  TValue="SalesInfo" Visible="true" Format="${Month}: ${Sales}"></SparklineTooltipSettings>
</SfSparkline>

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

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", Sales = 35000 },
        new SalesInfo { Month = "Feb", Sales = 28000 },
        new SalesInfo { Month = "Mar", Sales = 34000 },
        new SalesInfo { Month = "Apr", Sales = 32000 },
        new SalesInfo { Month = "May", Sales = 40000 },
        new SalesInfo { Month = "Jun", Sales = 32000 },
        new SalesInfo { Month = "Jul", Sales = 35000 }
    };
}

結果： マーカーとツールチップ付きで月ごとの売上傾向を示す、コンパクトな折れ線グラフです。

よくあるパターン

パターン 1：スパークラインを使った KPI ダッシュボード

傾向を示す指標とともに複数の KPI を表示するダッシュボードが必要な場合：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<div class="kpi-grid">
    <div class="kpi-card">
        <h4>Revenue</h4>
        <p class="value">$1.2M <span class="change positive">+15%</span></p>
        <SfSparkline DataSource="@RevenueData" Type="SparklineType.Area" Height="40px" Width="150px" Fill="#28a745">
        </SfSparkline>
    </div>
    
    <div class="kpi-card">
        <h4>Orders</h4>
        <p class="value">5,432 <span class="change negative">-3%</span></p>
        <SfSparkline DataSource="@OrdersData" Type="SparklineType.Column" Height="40px" Width="150px" Fill="#dc3545">
        </SfSparkline>
    </div>
</div>

@code {
    public List<double> RevenueData { get; set; } = new()
    {
        820000, 900000, 870000, 960000, 1100000, 1200000
    };

    public List<double> OrdersData { get; set; } = new()
    {
        5200, 5400, 5600, 5300, 5500, 5432
    };
}

ユーザーへの案内： 累積指標には Area タイプ、個別の数値には Column タイプを使用し、最大値や最小値を強調するには特別なポイントを設定してください。

パターン 2：インラインの傾向を表示するデータテーブル

テーブルのセルにスパークラインを追加したい場合：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<table class="data-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Current</th>
            <th>Trend (7 days)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Products)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.CurrentValue.ToString("C")</td>
                <td>
                    <SfSparkline DataSource="@product.TrendData" 
                                  Type="SparklineType.Line" 
                                  Height="30px" 
                                  Width="100px"
                                  LineWidth="1">
                    </SfSparkline>
                </td>
            </tr>
        }
    </tbody>
</table>
@code {
    public class ProductInfo
    {
        public string Name { get; set; }
        public decimal CurrentValue { get; set; }
        public List<double> TrendData { get; set; } = new();
    }

    public List<ProductInfo> Products { get; set; } = new()
    {
        new ProductInfo
        {
            Name = "Product A",
            CurrentValue = 1250.75m,
            TrendData = new List<double> { 1200, 1220, 1235, 1240, 1245, 1250, 1251 }
        },
        new ProductInfo
        {
            Name = "Product B",
            CurrentValue = 980.30m,
            TrendData = new List<double> { 950, 955, 960, 970, 975, 980, 980 }
        }
    };
}

ユーザーへの案内： スパークラインはシンプルに保ち（マーカーとラベルなし）、行全体でサイズを統一し、詳細を表示するためにツールチップを有効にしてください。

パターン 3：勝敗インジケーター

成功と失敗を二値で視覚化する必要がある場合：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@WinLossData" 
              Type="SparklineType.WinLoss"
              Height="50px" 
              Width="300px"
              TiePointColor="#ffc107">
    <SparklineAxisSettings MinY="-1" MaxY="1"></SparklineAxisSettings>
</SfSparkline>

ユーザーへの案内： WinLoss タイプを使用し、値には 1（勝ち）、-1（負け）、0（引き分け）を指定してください。中立の結果には TiePointColor を設定してください。

パターン 4：特別なポイントの強調表示

特定のデータポイントを目立たせたい場合：

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TemperatureData" 
              Type="SparklineType.Line"
              Height="60px" 
              Width="250px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }">
    </SparklineMarkerSettings>
    <SparklineHighPointColor>#28a745</SparklineHighPointColor>
    <SparklineLowPointColor>#dc3545</SparklineLowPointColor>
</SfSparkline>

@code {
    public List<int> WinLossData { get; set; } = new()
    {
        1, 1, -1, 0, 1, -1, 1, 1, 0, -1
    };
}

ユーザーへの案内： VisibleType 列挙型を使用して、High／Low／Start／End／Negative ポイントのマーカーのみを表示してください。視覚的に強調する色を設定してください。

API サーフェスのリファレンス

SfSparkline のサーフェスの正式な情報は、API リファレンスファイルを参照してください。特に重要なメンバーは次のとおりです。

コンポーネントのプロパティ：

• DataSource、EnableGroupingSeparator、EnableRtl、EndPointColor、Fill、Format、Height、HighPointColor、ID、LineWidth、LowPointColor、NegativePointColor、Opacity、Palette、Query、RangePadding、StartPointColor、Theme、TiePointColor、Type、ValueType、Width、XName、YName

メソッド：

• RefreshAsync()

イベント：

• OnAxisRendering、OnDataLabelRendering、OnLoaded、OnMarkerRendering、OnPointRegionMouseClick、OnPointRendering、OnResizing、OnSeriesRendering

子コンポーネント：

• SparklineAxisLineSettings、SparklineAxisSettings、SparklineBorder、SparklineContainerArea、SparklineContainerAreaBorder、SparklineDataLabelBorder、SparklineDataLabelOffset、SparklineDataLabelSettings、SparklineEvents、SparklineFont、SparklineMarkerBorder、SparklineMarkerSettings、SparklinePadding、SparklineRangeBand、SparklineRangeBandSettings、SparklineTooltipBorder、SparklineTooltipSettings、SparklineTooltipTextStyle、SparklineTrackLineSettings

列挙型：

• SparklineRangePadding、SparklineType、SparklineValueType、VisibleType

よくあるユースケース

ユースケース 1：財務ダッシュボード

ユーザーは、株価、ポートフォリオのパフォーマンス、またはインラインの傾向を含む財務 KPI を表示したいと考えています。案内する内容： 高値／安値を強調表示する特別なポイントを備えた、折れ線または面のスパークライン。

ユースケース 2：分析ダッシュボード

ユーザーは、ページビュー、ユーザーエンゲージメント、またはコンバージョン率のコンパクトな可視化を必要としています。案内する内容： 個別の指標には縦棒スパークライン、累積データには面スパークライン。

ユースケース 3：レポートテーブル

ユーザーは、レイアウトを煩雑にせず、データテーブルに視覚的な傾向を追加したいと考えています。案内する内容： ツールチップを有効にした、最小限の折れ線スパークライン（高さ 30～40px）。

ユースケース 4：メールレポート

ユーザーは、サイズに制約のあるメールクライアントでも適切に表示されるグラフを必要としています。案内する内容： 複雑なスタイルを避け、寸法を固定したシンプルなスパークライン。

ユースケース 5：モバイルダッシュボード

ユーザーは、小さな画面に最適化されたデータの可視化を必要としています。案内する内容： タッチ操作に適したツールチップと、レスポンシブな寸法を備えたコンパクトなスパークライン。

ユースケース 6：パフォーマンス監視

ユーザーは、サーバーの指標、応答時間、またはシステムの健全性を可視化したいと考えています。案内する内容： しきい値ゾーン（緑／黄／赤）の範囲帯を備えた折れ線スパークライン。

ユースケース 7：E コマース分析

ユーザーは、製品のパフォーマンス傾向、販売速度、または在庫の指標を必要としています。案内する内容： 販売数には縦棒スパークライン、在庫状況には WinLoss。

実装のヒント

ユーザーを案内する際は、次の点に留意してください。

1. シンプルに始める： 基本的な DataSource と Type から始め、機能を段階的に追加します
2. データに基づいて種類を選ぶ： 継続的な傾向には折れ線、個別の件数には縦棒、二値の結果には WinLoss を使用します
3. 最小限に抑える： スパークラインは最小限のスタイルで最も効果を発揮します。煩雑にならないようにします
4. ツールチップを有効にする： スパークラインには軸がないため、ツールチップで重要な詳細を補います
5. コンテキストを考慮する： スパークラインのサイズを周囲のコンテンツに合わせます（インラインか単独表示か）
6. 特別なポイントを使用する： 意味のあるデータポイント（高値／安値）を強調して、すばやく把握できるようにします
7. サイズを統一する： 複数のスパークラインを表示する場合は、寸法を統一します
8. レスポンシブ対応をテストする： さまざまな画面サイズで、スパークラインが適切に拡大縮小されることを確認します

ユーザーが実装する必要のある機能に応じて、上記の適切なリファレンスファイルを参照してください。