syncfusion-angular-sparkline

Syncfusion Angular Sparkline コンポーネントの実装

このスキルを使う場面

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

• コンパクトなデータを可視化する - テーブル、グリッド、ダッシュボード内に小規模な時系列データセットをインライン表示する
• スパークラインチャートを追加する - 折れ線、縦棒、エリア、円、勝敗スパークラインを描画する
• データの表示を充実させる - 重要なポイント（高値、安値、開始、終了、負の値）にマーカーを追加する
• メトリクスをインライン表示する - スパークライン内にデータラベルやツールチップを表示する
• 外観をカスタマイズする - テーマ、スタイル、アクセシビリティ機能、範囲バンドを適用する
• 既存のアプリに統合する - 適切なサービス注入を行い、Sparkline モジュールをセットアップする
• レガシー版から移行する - EJ1 Sparkline から EJ2 Angular Sparkline に移行する

コンポーネントの概要

Syncfusion Angular Sparkline は、小さなスペースにコンパクトなチャートを表示する軽量なデータ可視化コンポーネントです。スパークラインは、次のような用途に適しています。

• テーブルやダッシュボード内の傾向インジケーター
• 連続データの視覚的な表現
• 時間経過に伴うパフォーマンスや変化を示すインラインメトリクス

主な特徴：

• コンパクトな描画 - グリッドセルやインラインメトリクスに収まります
• 複数の種類 - 折れ線、縦棒、エリア、円、勝敗の各種表示
• インタラクティブな機能 - ツールチップ、マーカー、データラベル
• カスタマイズ可能 - マーカー、色、軸の設定、テーマ
• アクセシビリティ対応 - WCAG 対応、キーボード操作、RTL 対応

⚠️ 重要：複数のスパークラインには一意の ID が必要です

同じページで複数のスパークラインコンポーネントを使用する場合、正しく描画するために、各スパークラインに一意の id 属性を指定する必要があります。

<ejs-sparkline id="sparkline1" [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline id="sparkline2" [dataSource]="data2"></ejs-sparkline>
<ejs-sparkline id="sparkline3" [dataSource]="data3"></ejs-sparkline>


<ejs-sparkline [dataSource]="data1"></ejs-sparkline>
<ejs-sparkline [dataSource]="data2"></ejs-sparkline>

一意の ID を指定しない場合、スパークラインは次のような状態になることがあります。

• まったく描画されない
• 誤ったデータで描画される
• 互いに重なったり、競合したりする
• 一貫性のないスタイルで表示される

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

このスキルでは、スパークラインの実装方法を説明します。主なトピックは次のとおりです。

はじめに

📄 読む： references/getting-started.md

• Angular 19 以降のインストールとパッケージのセットアップ
• スパークラインコンポーネントの基本的な実装
• SparklineTooltipService のモジュール注入
• dataSource、xName、yName を使ったデータバインディング
• ツールチップの有効化とアプリケーションの実行
• 読むタイミング：最初のスパークラインを実装する前

スパークラインの種類

📄 読む： references/sparkline-types.md

• 折れ線タイプ（デフォルト、折れ線グラフ表示）
• 縦棒タイプ（縦棒による表示）
• エリアタイプ（塗りつぶしエリアチャート）
• 円タイプ（構成比データ）
• 勝敗タイプ（成功／失敗の二値結果）
• 種類の比較と選択基準
• 読むタイミング：データを最適に表現できるスパークラインの種類を選ぶとき

マーカー

📄 読む： references/markers.md

• すべてのポイントまたは特定のポイントでマーカーを有効にする
• マーカーのオプション：すべて、開始、終了、高値、安値、負の値
• マーカーの外観（塗りつぶし、枠線、サイズ、不透明度）をカスタマイズする
• 複数のマーカータイプを組み合わせる
• 読むタイミング：重要なデータポイント（ピーク、谷、開始／終了）を強調するとき

データラベル

📄 読む： references/data-labels.md

• 特定のポイントのデータラベルを有効にする
• ラベルのオプション：すべて、開始、終了、高値、安値、負の値
• ラベルのスタイル（塗りつぶし、枠線、テキストの色）をカスタマイズする
• カスタム書式でラベルのテキストを整形する
• ラベルに x 値と y 値を表示する
• 読むタイミング：数値や書式設定した値をスパークライン上に直接表示するとき

高度な機能

📄 参照: references/advanced-features.md

• レンジバンドの可視化（背景領域の網掛け）
• 軸のカスタマイズ（最小値、最大値、間隔の設定）
• ユーザー操作（ツールチップの設定、イベント処理）
• 特殊ポイントのカスタマイズ（高値・安値ポイントの色）
• コンテナーのサイズ設定とレスポンシブな寸法
• RTL（右から左）への対応
• 読むタイミング: レンジバンド、軸の制御、イベントなどの複雑な機能を実装するとき

外観とアクセシビリティ

📄 参照: references/appearance-and-accessibility.md

• CSS テーマとテーマの切り替え
• CSS クラスによる外観のカスタマイズ
• ローカライズ（ロケール固有の書式設定）
• WCAG アクセシビリティ基準への準拠
• キーボードナビゲーションへの対応
• さまざまな画面サイズに対応したレスポンシブデザイン
• 読むタイミング: スパークラインのスタイル設定、複数のロケールへの対応、アクセシビリティの確保を行うとき

移行ガイド

📄 参照: references/migration-guide.md

• EJ1 Sparkline から EJ2 への移行
• API プロパティの対応関係と変更点
• 互換性を損なう変更と非推奨機能
• 従来の機能に相当する機能の検索
• 読むタイミング: 古い Syncfusion バージョンからアップグレードするとき

クイックスタートの例

基本的なスパークラインを描画する最小限の例を示します。

import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SparklineModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-sparkline 
    id='sparkline-container'
    [dataSource]="data"
    xName="x"
    yName="y"
    type="Line">
  </ejs-sparkline>`
})
export class AppComponent {
  data = [
    { x: 'Jan', y: 2 },
    { x: 'Feb', y: 6 },
    { x: 'Mar', y: 4 },
    { x: 'Apr', y: 8 },
    { x: 'May', y: 5 }
  ]
}

出力: 月ごとの推移を示すシンプルな折れ線スパークラインです。

よくあるパターン

パターン 1: テーブルセル内のスパークライン

グリッドまたはテーブル内にスパークラインを埋め込み、各行の傾向を表示します。

<table>
  <tr>
    <td>Product A</td>
    <td><ejs-sparkline [dataSource]="salesA" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
  <tr>
    <td>Product B</td>
    <td><ejs-sparkline [dataSource]="salesB" type="Column" height="50px" width="150px"></ejs-sparkline></td>
  </tr>
</table>

パターン 2: マーカーで重要なポイントを強調する

高値と安値のポイントにマーカーを表示して、パフォーマンスのピークを強調します。

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Line"
    [markerSettings]="markerSettings">
  </ejs-sparkline>`
})
export class HighlightComponent {
  data = [10, 25, 15, 35, 20, 30]
  markerSettings = {
    visible: ['High', 'Low'],
    fill: '#FF5733',
    size: 8,
    opacity: 1
  }
}

パターン 3: 詳細を表示するツールチップの追加

ツールチップを有効にして、ホバー時にカスタム書式で正確な値を表示します。

import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'

@Component({
  imports: [SparklineModule],
  standalone: true,
  providers: [SparklineTooltipService],
  template: `<ejs-sparkline 
    [dataSource]="data"
    xName="month"
    yName="sales"
    [tooltipSettings]="tooltipSettings">
  </ejs-sparkline>`
})
export class TooltipComponent {
  data = [
    { month: 'Jan', sales: 10000 },
    { month: 'Feb', sales: 15000 }
  ]
  tooltipSettings = { 
    visible: true,
    format: '${month}: ${sales} units'
  }
}

パターン 4: しきい値を示すレンジバンド

網掛け領域を表示して、許容可能なパフォーマンスの範囲を示します。

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    type="Area"
    [rangeBandSettings]="rangeBandSettings">
  </ejs-sparkline>`
})
export class RangeBandComponent {
  data = [20, 30, 25, 35, 28, 32, 40]
  rangeBandSettings = [
    { startRange: 25, endRange: 35, color: '#90EE90', opacity: 0.3 },  // Good range
    { startRange: 15, endRange: 25, color: '#FFD700', opacity: 0.3 }   // Warning range
  ]
}

パターン 5: イベント処理

ユーザー操作に対応するスパークラインのイベントを処理します。

@Component({
  template: `<ejs-sparkline 
    [dataSource]="data"
    (pointRegionMouseClick)="onPointClick($event)"
    (sparklineMouseClick)="onSparklineClick($event)">
  </ejs-sparkline>`
})
export class EventComponent {
  data = [10, 25, 15, 35, 20]
  
  onPointClick(args: any) {
    console.log('Point clicked:', args.pointIndex, args.value)
  }
  
  onSparklineClick(args: any) {
    console.log('Sparkline clicked')
  }
}

主要プロパティ

プロパティ	型	デフォルト	目的
dataSource	Array	[]	データ配列（プリミティブ値またはオブジェクト）—スパークラインにデータをバインドします
xName	string	-	X 値に使用するオブジェクトのプロパティ名（例：'month'、'date'）
yName	string	-	Y 値に使用するオブジェクトのプロパティ名（例：'sales'、'count'）
type	string	'Line'	スパークラインの種類：Line、Column、Area、Pie、WinLoss
markerSettings	object	-	塗りつぶし、枠線、サイズ、不透明度のプロパティを使用して、マーカーの表示とスタイルを設定します（High、Low、Start、End、Negative、All）
dataLabelSettings	object	-	visible 配列、書式文字列、塗りつぶし色、枠線、textStyle、edgeLabelMode を使用して、データラベルの表示を設定します
tooltipSettings	object	-	ツールチップの設定（visible、${x}/${y} トークンを含む format、fill、border、textStyle、trackLineSettings）
height	string/number	'100px'	コンテナーの高さ（px、例：'150px'）または割合（例：'100%'）
width	string/number	'100%'	コンテナーの幅（px、例：'300px'）または割合（例：'100%'）
rangeBandSettings	object/array	-	背景の網掛け領域を設定します（startRange、endRange、color、opacity）。単一のオブジェクトまたは複数のバンドを指定する配列に対応しています
axisSettings	object	-	軸の設定（minX、maxX、minY、maxY、intervalX、intervalY、valueType：Numeric/Category/DateTime）
highPointColor	string	-	データ系列の最高値のポイントの色（16進数または名前付き色）
lowPointColor	string	-	データ系列の最低値のポイントの色（16進数または名前付き色）
startPointColor	string	-	系列の最初のポイントの色
endPointColor	string	-	系列の最後のポイントの色
negativePointColor	string	-	負のデータ値（ゼロ未満）の色
fill	string	-	スパークラインの領域、列、またはバーの塗りつぶし色（主系列の色）
lineWidth	number	1	線タイプのスパークラインの太さ（推奨範囲：1～10）
opacity	number	1	スパークライン系列の不透明度（範囲：0～1）
enableRtl	boolean	false	RTL 言語（アラビア語、ヘブライ語）向けの右から左へのレイアウトを有効にします
valueType	string	'Numeric'	軸の値のデータ型：Numeric、Category、DateTime
format	string	-	軸の値の数値書式（例：小数点以下2桁の場合は'n2'、通貨の場合は'c'）
useGroupingSeparator	boolean	false	桁区切りの書式を有効にします（例：1,000）
theme	string	'Material'	ビジュアルテーマ：Material、Fabric、Bootstrap、HighContrast など
border	object	-	スパークラインコンテナーの枠線設定（色、幅）
containerArea	object	-	コンテナーのカスタマイズ（背景色、枠線の設定）
padding	object	-	スパークラインのパディング（左、右、上、下のピクセル値）

一般的なユースケース

1. ダッシュボードのメトリクス - リアルタイムのダッシュボードやメトリクスビューに、KPI の傾向を示すミニチャートを表示します。複数のメトリクスをコンパクトなグリッドレイアウトで表示するエグゼクティブダッシュボードに最適です。

2. 財務データの可視化 - サポートゾーンやレジスタンスゾーンを示すレンジバンドを使用して、株価、取引高、通貨の傾向を可視化します。マーカーで重要な価格ポイントを強調し、ツールチップで詳細な値を表示します。

3. パフォーマンスの監視 - 24 時間にわたって監視したシステムメトリクス（CPU、メモリ、ディスク使用量、ネットワークスループット）を表示します。負のスパイクを色分けし、レンジバンドで許容される動作範囲を示します。

4. データテーブルとの統合 - データグリッドのセルにスパークラインを埋め込み、テーブルの行で複数の製品、ユーザー、地域のパフォーマンス傾向を比較します。各行には、それぞれのミニトレンド可視化が表示されます。

5. 勝敗分析 - WinLoss タイプを使用して、成功／失敗の結果（合格／不合格、承認／却下、勝ち／負け）をコンパクトな二値形式で追跡します。ゲームの結果、テストの結果、承認ワークフローに最適です。

6. 時系列の簡易表示 - トレンドの可視化とともに、履歴データを簡易形式で表示します。画面スペースを大きく占有することなく、週次、月次、年次のパターンを示します。

7. セールスパイプラインの追跡 - 製品カテゴリーや販売地域ごとの月次／四半期の売上傾向を表示します。異なるメトリクスを表すために、異なるスパークラインタイプを使用します（収益には Area、販売数には Column）。

8. ユーザーアクティビティ分析 - 特定の期間におけるエンゲージメントメトリクス（ページ訪問数、アクティブユーザー数、セッション時間）を追跡します。マーカーで強調表示してパターンや異常を特定します。

9. 品質メトリクスのダッシュボード - 生産バッチごとの不良率、稼働率、品質スコアを表示します。レンジバンドで許容品質ゾーンを示し、マーカーで外れ値を示します。

10. リソース使用状況の監視 - 帯域幅の消費量、ストレージ容量の傾向、ライセンス使用状況のパターンを一目で監視します。軸の境界を設定して容量の上限を示し、しきい値を超えた点を色分けします。

11. IoT センサーデータ - IoT 監視ダッシュボード内のコンパクトなチャートに、リアルタイムのセンサー測定値（温度、湿度、圧力）を表示します。各センサーの 24 時間の傾向を最小限のスペースで示します。

12. ソーシャルメディア分析 - フォロワー数の増加、エンゲージメント率、投稿のリーチを経時的に追跡します。Pie スパークラインを使用して、さまざまなプラットフォーム間のエンゲージメント比率を示します。

---

次のステップ： getting-started.md から始めて、最初のスパークラインをインストールして描画し、ニーズに応じて他のリファレンスガイドを確認してください。

API リファレンス

Syncfusion Angular の Sparkline の簡潔な API リファレンスは、references フォルダーにあります。プロパティのアンカー、メソッドへのリンク、公式ドキュメントに対応付けられたイベント引数の型が含まれています。

API リファレンスを読む：references/api-reference.md