syncfusion-angular-circular-gauge

Syncfusion Angular Circular Gauge の実装

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
• クイックスタートの例
• 一般的なパターン
• 主要な概念

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

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

• 放射状メトリクスの表示： 温度、RPM、速度、圧力、パフォーマンス指標
• ダッシュボードの構築： KPI ダッシュボード、監視システム、リアルタイムのデータ可視化
• スピードメーターの作成： 範囲内の連続値を視覚的に表現
• 進捗やステータスの表示： 複数段階のプロセス、完了率、ステータスインジケーター
• インタラクティブなゲージの実装： ドラッグ可能なポインター、範囲インジケーター、ユーザーが制御する値
• ゲージの外観のカスタマイズ： 複数のスタイル、テーマ、アニメーション、レイアウトオプション

コンポーネントの概要

Syncfusion の Circular Gauge コンポーネントは、放射状データを柔軟かつ多機能に可視化するためのコントロールです。主な機能は次のとおりです。

機能	説明
軸	開始角度と終了角度、ラベル、目盛り、範囲を設定できるカスタマイズ可能な円形の軸
ポインター	3 種類のポインター：針（キャップとテール付き）、RangeBar（塗りつぶしベース）、マーカー（図形または画像）
範囲	グラデーションに対応し、値の範囲を強調表示する色付きゾーン
注釈	ゲージ上の特定の位置にテキスト、図形、画像を配置
アニメーション	読み込み時や値の変更時にゲージ要素を滑らかにアニメーション表示
ユーザー操作	ドラッグ可能なポインター、ツールチップ、クリックイベント、動的な値の更新
レスポンシブデザイン	柔軟なサイズ設定オプションにより、コンテナーのサイズに適応
複数の軸	独立した範囲とポインターを持つ複数の軸を同時にサポート

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

現在のニーズに合ったリファレンスを選択してください。

-### API リファレンス 📄 参照： references/api-reference.md

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ（Ivy および ngcc バージョン）
• モジュールの登録とサービスプロバイダー
• 基本的なゲージの実装
• ポインター値の設定
• クイック統合の例

参照するタイミング： 初回セットアップ、インストールに関する問題、基本的なゲージの描画

軸の設定

📄 参照： references/axes-configuration.md

• 軸のカスタマイズ（線のスタイル、背景、色）
• 角度と方向（時計回り／反時計回り、開始角度と終了角度）
• 軸の半径（ピクセルベースおよびパーセンテージベースのサイズ設定）
• 目盛りの設定（主目盛り／副目盛り、位置、オフセット、スタイル）
• ラベル（フォント、配置、形式、角度の回転、スマートなラベル処理）
• 最小値／最大値の範囲
• 1 つのゲージ上の複数の軸

参照するタイミング： ゲージのレイアウト設定、目盛りやラベルの外観調整、要素の配置

ポインターと種類

📄 参照： references/pointers-and-types.md

• ポインターの種類の概要（針、RangeBar、マーカー）
• 針ポインター（半径、キャップのカスタマイズ、テールの長さ、幅の変化）
• RangeBar ポインター（バー型インジケーター、角丸）
• マーカーポインター（図形：円、長方形、三角形、ひし形、カスタム画像）
• ポインターのドラッグ（全体の有効化／無効化、個々のポインターの設定）
• 1 つの軸上の複数のポインター
• ポインターのアニメーション（有効化、時間、タイミング）
• グラデーションカラー（線形および放射状グラデーション）

参照するタイミング： ポインターの種類の選択、ポインターの外観のカスタマイズ、ユーザー操作の追加

範囲とスタイル設定

📄 参照： references/ranges-and-styling.md

• 範囲の基本（開始値／終了値、色付きゾーン）
• 範囲のカスタマイズ（色、太さ、角丸）
• 1 つの軸上に複数の範囲を設定
• 見た目を整える角丸の半径
• 範囲の配置（軸の内側／外側）
• 範囲のドラッグ機能
• グラデーションのサポート（線形および放射状）
• 範囲の色を目盛りやラベルに適用

参照するタイミング： 色付きゾーンの追加、レイヤー化されたビジュアライゼーションの作成、ゾーンのスタイル設定

外観とアニメーション

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

• ゲージのタイトル（テキスト、フォントのスタイル設定、配置）
• ゲージの位置（ピクセルまたはパーセンテージで指定する centerX、centerY）
• 背景と枠線のカスタマイズ
• マージンと間隔の設定
• ゲージの寸法（レスポンシブなサイズ設定、固定寸法）
• アニメーション（すべての要素に適用するグローバルな animationDuration、ポインター固有のアニメーション）
• 半円形／四分円形ゲージの半径の計算
• 円形以外のゲージレイアウトの作成

参照するタイミング： ゲージコンテナーのスタイル設定、アニメーションの有効化、テーマに沿った表示の作成

注釈とインタラクション

📄 参照： references/annotations-and-interaction.md

• 注釈（カスタム HTML／要素、半径と角度による配置）
• サブゲージ（注釈内に配置する入れ子のゲージ）
• ツールチップ（ホバー時の情報、カスタムツールチップのコンテンツ）
• ユーザーインタラクションイベント（ポインターのドラッグ、値の変更、ゲージの操作）
• 印刷とエクスポート機能
• 国際化とローカライズ
• アクセシビリティ機能（WCAG 準拠、キーボード操作）

参照するタイミング： カスタムコンテンツの追加、ユーザーインタラクションの処理、アクセシブルなゲージの実装

クイックスタートの例

単一ポインターを備えた基本的な円形ゲージ：

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService],
  standalone: true,
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id='gauge-container' [title]='title'>
      <e-axes>
        <e-axis [startAngle]='200' [endAngle]='160' [minimum]='0' [maximum]='100'>
          <e-pointers>
            <e-pointer [value]='75' type='Needle'></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'Speed Gauge';
}

手順：

1. パッケージをインストールします：npm install @syncfusion/ej2-angular-circulargauge
2. コンポーネントで CircularGaugeModule をインポートします
3. 必要に応じてサービス（GaugeTooltipService など）を追加します
4. 軸とポインターを指定して ejs-circulargauge を設定します
5. ポインターの value と type を設定します

よく使われるパターン

パターン 1：速度計の表示

速度ゾーン（安全、警告、危険）を示す範囲を設定して、速度計ゲージを作成します：

// Basic structure:
<ejs-circulargauge>
  <e-axes>
    <e-axis [minimum]='0' [maximum]='200'>
      
      
      
      <e-ranges>
        <e-range [start]='0' [end]='80' color='green'></e-range>
        <e-range [start]='80' [end]='150' color='orange'></e-range>
        <e-range [start]='150' [end]='200' color='red'></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]='speedValue' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-cirulargauge>

参照： ranges-and-styling.md（複数の範囲）、pointers-and-types.md（針型ポインター）

パターン 2：複数の軸を使った複数の指標

関連する複数の指標（内側と外側の軸）を同時に表示します：

// Configure multiple axes:
<e-axes>
  <e-axis [radius]='60%'></e-axis>
  <e-axis [radius]='40%'></e-axis>
</e-axes>

参照： axes-configuration.md（複数の軸のセクション）

パターン 3：ドラッグ可能なポインターを備えたインタラクティブなゲージ

ポインターをドラッグして、ユーザーが値を調整できるようにします：

// Enable dragging globally or per-pointer:
<ejs-circulargauge [enablePointerDrag]='true'>
  
  <e-pointer [enableDrag]='true'></e-pointer>
</ejs-circulargauge>

参照： pointers-and-types.md（ポインターのドラッグのセクション）

パターン 4：ゲージ読み込み時のアニメーション

ゲージの読み込み時に滑らかな開始アニメーションを追加します：

// Enable animation for all elements:
<ejs-circulargauge [animationDuration]='2000'>
  
</ejs-circulargauge>

参照： appearance-and-animation.md（アニメーションのセクション）

重要な概念

角度と方向

円形ゲージは円形の平面上で回転します。次の設定で表示する弧を制御できます：

• startAngle： 弧の開始位置（デフォルト：200°）
• endAngle： 弧の終了位置（デフォルト：160°）
• direction： ClockWise または AntiClockWise

これにより、全円（0～360°）または部分的なゲージ（半円、四分円）を作成できます。

半径とサイズ設定

ゲージでは柔軟なサイズ設定が可能です：

• ピクセル単位： 固定サイズ（例：500px）
• パーセンテージ単位： コンテナーに対する相対サイズ（例：80%）

軸、範囲、ポインター、注釈それぞれに、個別に半径を設定します。

ポインターと範囲

• ポインター： 特定の値を示します（速度計の針など）
• 範囲： ゾーンや区間を示します（色分けされた領域など）

組み合わせて、豊かなビジュアライゼーションを作成できます（例：ポインターで現在の速度を示し、範囲で安全ゾーン／警告ゾーンを示します）。

アニメーション

アニメーションは次の要素に影響します：

1. 軸線の描画（方向に沿って動きます）
2. 目盛りとラベル
3. 範囲
4. ポインター（個別に制御できます）
5. 注釈

animationDuration をミリ秒単位で設定します（0 = 無効）。

複数のポインターと軸

n 個以上のポインターと軸をサポートします：

• 複数のポインター： 異なる指標を表示します（湿度＋温度）
• 複数の軸： 情報を重ねて表示します（内側／外側のリング）

各軸は、範囲、ポインター、スタイルを個別に設定できます。

---

実装を始めましょうか？ インストールについては、まず getting-started.md を参照し、その後、必要に応じて機能ごとのリファレンスに進んでください。