syncfusion-angular-linear-gauge

Syncfusion Angular Linear Gauge の実装

Linear Gauge は、測定値や指標を直線スケール上に可視化するコンポーネントです。範囲、ポインター、ラベルを備えた水平または垂直のバーに値を表示し、データをわかりやすく表現します。

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

• ゲージコンポーネントの作成：スカラー値を直線スケール上に表示します
• 測定インターフェース：温度、圧力、速度、その他の指標を表示します
• 範囲の追加：値の範囲ごとに色分けされたゾーンを定義します
• ポインターの設定：異なるスタイルのポインターで複数の値を表示します
• 外観のカスタマイズ：色、フォント、背景、アニメーションを変更します
• インタラクションの処理：クリック、ドラッグ、ホバーのイベントを追加します
• 注釈の追加：ゲージを補足するテキストや画像を含めます
• エクスポートと印刷：PNG、PDF、SVG の出力を生成します
• 国際化対応：i18n と RTL のサポートを有効にします
• アクセシビリティ：アクセシブルなインターフェースのために WCAG 準拠を確保します

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

実現したい内容に応じて、参照先を選択してください。

API リファレンス

📄 参照： references/api-reference.md

はじめに

📄 参照： references/getting-started.md

• インストールと npm パッケージのセットアップ
• Linear Gauge モジュールのインポート
• 最初のゲージコンポーネントの作成
• CSS テーマのインポート
• 基本設定

軸とスケールの設定

📄 参照： references/axis-and-scales.md

• 軸のプロパティと範囲の設定
• スケールの設定と制限
• 主目盛りと副目盛り
• ラベルの書式設定と配置
• 1 つのゲージ上の複数の軸

範囲とポインターの追加

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

• 範囲の作成とスタイル設定
• 範囲のアニメーションとオフセット
• ポインターの種類（マーカーとバー）
• ポインターのアニメーションとトランジション
• ユーザー入力に対応したドラッグ可能なポインター
• 1 つのゲージ上の複数のポインター

カスタマイズと外観

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

• コンテナーのスタイル設定とサイズ調整
• 配色とテーマの適用
• フォントとラベルのカスタマイズ
• 境界線とシャドウ効果
• 背景とグラデーションのスタイル設定
• カスタムラベルテンプレート

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

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

• マウスイベントの処理
• クリック、ホバー、ドラッグのインタラクション
• イベントコールバックとリスナー
• フォームとの連携パターン
• ユーザー入力による値の動的な更新

高度な機能

📄 参照： references/advanced-features.md

• 印刷とエクスポート機能（PNG、PDF、SVG）
• 追加情報を示す注釈
• アニメーションの設定とタイミング
• 国際化（i18n）の設定
• 右から左（RTL）へのテキスト表示のサポート
• WCAG アクセシビリティ準拠
• ej1 から ej2/ej3 への移行

レスポンシブデザインとサイズ

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

• コンテナーのサイズ調整とレスポンシブレイアウト
• サイズのプロパティ
• 印刷レイアウトに関する考慮事項
• モバイル向けのゲージデザイン

クイックスタート

import { Component, OnInit } from '@angular/core';
import { LinearGaugeAllModule } from '@syncfusion/ej2-angular-gauges';

@Component({
  selector: 'app-linear-gauge',
  template: `
    <ejs-lineargauge 
      [orientation]="'Horizontal'" 
      [container]="{ width: '100', height: '150' }">
      <e-axes>
        <e-axis [minimum]="0" [maximum]="100" 
                [majorTicks]="majorTicks" 
                [minorTicks]="minorTicks">
          <e-ranges>
            <e-range [start]="0" [end]="30" [color]="'#F6B53F'"></e-range>
            <e-range [start]="30" [end]="70" [color]="'#0DC451'"></e-range>
            <e-range [start]="70" [end]="100" [color]="'#F64C38'"></e-range>
          </e-ranges>
          <e-pointers>
            <e-pointer [value]="45" [type]="'Bar'"></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-lineargauge>
  `
})
export class LinearGaugeComponent implements OnInit {
  majorTicks = { interval: 20 };
  minorTicks = { interval: 5 };

  ngOnInit(): void {
    // Component initialized
  }
}

よく使われるパターン

パターン 1：温度ゲージ

高温・低温のゾーンとともに現在の温度を表示します。

<e-axis [minimum]="0" [maximum]="50">
  <e-ranges>
    <e-range [start]="0" [end]="15" [color]="'#3498db'" ></e-range>
    <e-range [start]="15" [end]="30" [color]="'#2ecc71'" ></e-range>
    <e-range [start]="30" [end]="50" [color]="'#e74c3c'" ></e-range>
  </e-ranges>
  <e-pointers>
    <e-pointer [value]="currentTemp" [type]="'Marker'"></e-pointer>
  </e-pointers>
</e-axis>

パターン 2：インタラクティブなゲージ

ユーザーがポインターをドラッグして値を変更できるようにします。

<e-pointer 
  [value]="gaugeValue" 
  [type]="'Bar'" 
  enableDrag=true
  [markerType]="'Circle'"
  (dragEnd)='dragEnd($event)'>
</e-pointer>

dragEnd(args: IPointerDragEventArgs): void {
  this.gaugeValue = event.currentValue;
  console.log('Gauge value changed to:', this.gaugeValue);
}

パターン 3：複数のポインター

同じスケール上で複数の値を比較します。

<e-pointers>
  <e-pointer [value]="actualValue" [type]="'Bar'" [color]="'#0066cc'"></e-pointer>
  <e-pointer [value]="targetValue" [type]="'Marker'" [color]="'#ff6600'"></e-pointer>
</e-pointers>

主なプロパティと設定

プロパティ	型	目的
orientation	'Horizontal' | 'Vertical'	ゲージの方向
container.width	number	ゲージの幅（例：'100'、'300'）
container.height	number	ゲージの高さ（例：'150'）
axes[].minimum	number	目盛りの最小値
axes[].maximum	number	目盛りの最大値
ranges[].start	number	範囲の開始値
ranges[].end	number	範囲の終了値
ranges[].color	string	範囲の色（16 進数または名前）
pointers[].value	number	現在のポインター値
pointers[].type	'Bar' | 'Marker'	ポインターの表示スタイル
animationDuration	number	0 より大きい場合、ポインターのアニメーションを有効にします
print()	method	PNG/PDF としてエクスポート