syncfusion-angular-smith-chart

Syncfusion Angular Smith Chart コンポーネントの実装

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

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

• 伝送線路を可視化する - 回路解析のために、スミスチャート上にインピーダンスまたはアドミタンスのパラメーターをプロットします
• スミスチャートを作成する - 適切な設定とデータバインディングでスミスチャートコンポーネントを描画します
• 複数の系列を追加する - 1 つのチャート上に複数の伝送線路系列を表示します
• 軸をカスタマイズする - 水平軸と放射軸に、カスタムラベル、グリッド線、スタイルを設定します
• データポイントを強調表示する - マーカーとデータラベルを追加して、重要な値を目立たせます
• 凡例を表示する - 位置、配置、表示切り替え機能を備えた凡例を実装します
• インタラクティブ機能を有効にする - ツールチップ、印刷機能、イベント処理を追加します
• スタイルとテーマを適用する - Syncfusion のテーマ、カスタムカラー、レスポンシブなサイズ設定を適用します
• アクセシビリティを確保する - WCAG 準拠、キーボード操作、RTL レイアウトをサポートします

コンポーネントの概要

Syncfusion Angular Smith Chart は、高周波回路アプリケーション向けの専用データ可視化コンポーネントです。抵抗一定の円とリアクタンス一定の円という 2 組の同心円を使用して、インピーダンスとアドミタンスの解析用に伝送線路のパラメーターをプロットします。

主な特徴：

• デュアル軸システム - 水平軸（抵抗を表す直線）と放射軸（リアクタンスを表す円形の経路）
• 描画タイプ - Impedance（既定）と Admittance の両方のパラメーターをサポート
• 複数系列のサポート - 色やスタイルを変えて、複数の伝送線路系列を同時に表示
• データバインディング - points 配列、または resistance／reactance のプロパティマッピングを使用する dataSource の 2 種類の方法
• インタラクティブ要素 - マーカー、データラベル、ツールチップ、表示切り替え機能付きの凡例、エクスポート機能
• スタイルのカスタマイズ - 軸ラベル、主／補助グリッド線、色、テーマ（Material、Bootstrap、Tailwind）、レスポンシブなサイズ設定
• アクセシビリティ機能 - WCAG 準拠、キーボード操作、RTL（右から左）サポート、スクリーンリーダー対応
• イベント駆動型 - 読み込みイベント、系列の描画、凡例操作、ツールチップのカスタマイズ
• エクスポート機能 - レポートやドキュメント向けの PNG、JPEG、SVG 形式

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

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

はじめに

📄 参照先： references/getting-started.md

• Angular 19 以降のインストールとパッケージのセットアップ
• スミスチャートコンポーネントの基本的な実装
• モジュールのインジェクション要件
• 抵抗値と矩形値を使用したデータバインディング
• CSS のインポートとテーマ設定
• 参照するタイミング：初めてスミスチャートを実装する前

系列とデータの管理

📄 参照先： references/series-and-data.md

• 系列の概念とデータ構造の理解
• データ入力における points と dataSource の違い
• Impedance と Admittance の描画タイプ
• 系列のカスタマイズ（塗りつぶし、不透明度、幅、表示状態）
• 複数系列の例とパターン
• スマートラベルと重なりの防止
• 参照するタイミング：データをバインドし、複数の系列を設定するとき

軸のカスタマイズ

📄 参照先： references/axis-customization.md

• 水平軸と放射軸の設定
• 軸ラベル（配置、交差の処理、スタイル設定）
• 主グリッド線と補助グリッド線（表示、幅、破線パターン、不透明度）
• 軸線のカスタマイズ
• ラベルと値の書式設定
• 参照するタイミング：軸の外観や動作をカスタマイズするとき

マーカーとデータラベル

📄 参照先： references/markers-and-labels.md

• マーカーの設定と表示状態
• データラベルの表示と書式設定
• 重なりを避けるためのマーカーとラベルの配置
• カスタムラベルの内容（抵抗値、リアクタンス値）
• 数値の書式設定
• 参照するタイミング：特定のデータポイントを強調表示したり、詳細な値を表示したりするとき

凡例と操作

📄 参照: references/legend-and-interaction.md

• 凡例の表示と配置（上、下、左、右、カスタム）
• 凡例の配置と整列
• 凡例の形状のカスタマイズ（円、四角形、三角形）
• 凡例のサイズ調整とレスポンシブ対応
• 凡例のクリックによる系列の表示切り替え
• 読むタイミング：系列を識別するために凡例を追加して設定するとき

高度な機能

📄 参照: references/advanced-features.md

• ツールチップの設定と書式設定
• 印刷とエクスポート機能
• RTL（右から左）への対応
• テーマ設定と CSS のカスタマイズ
• コンテナーのサイズ調整とレスポンシブ動作
• WCAG アクセシビリティへの準拠
• キーボード操作
• イベント処理（クリック、ホバー、凡例の切り替え）
• 読むタイミング：ツールチップ、エクスポート、イベント、アクセシビリティなどの複雑な機能を実装するとき

トラブルシューティング

📄 参照: references/troubleshooting.md

• よくある実装上の問題と解決策
• データ形式の検証とエラー
• モジュールのインポートに関するトラブルシューティング
• パフォーマンス最適化のヒント
• チャートのレンダリングと表示に関する問題
• 読むタイミング：問題をデバッグするときや、チャートのパフォーマンスを最適化するとき

クイックスタートの例

基本的なスミスチャートを描画する最小限の例です。

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

@Component({
  imports: [SmithchartModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-smithchart 
    id='smithchart-container'
    [series]="series">
  </ejs-smithchart>`
})
export class AppComponent {
  series = [{
    points: [
      { resistance: 10, reactance: 10 },
      { resistance: 20, reactance: 15 },
      { resistance: 30, reactance: 5 },
      { resistance: 40, reactance: -5 },
      { resistance: 50, reactance: -15 }
    ]
  }]
}

出力: 伝送線路のインピーダンス値を示す、1 つの系列を含む基本的なスミスチャートです。

よくあるパターン

パターン 1：複数の伝送線路を比較する

インピーダンスを比較するため、異なる色で複数の伝送線路系列を表示します。

series = [
  {
    name: 'Transmission Line A',
    points: [
      { resistance: 0.2, reactance: 0.1 },
      { resistance: 0.5, reactance: 0.3 },
      { resistance: 1.0, reactance: 0.5 }
    ],
    fill: '#0066CC',
    marker: { visible: true },
    tooltip: { visible: true }
  },
  {
    name: 'Transmission Line B',
    points: [
      { resistance: 0.3, reactance: 0.15 },
      { resistance: 0.6, reactance: 0.4 },
      { resistance: 1.2, reactance: 0.6 }
    ],
    fill: '#FF6633',
    marker: { visible: true },
    tooltip: { visible: true }
  }
]

パターン 2：インタラクティブなツールチップ、凡例、マーカー

系列を識別する凡例、詳細な値を示すツールチップ、データポイントを強調するマーカーを有効にします。

@Component({
  template: `
    <ejs-smithchart [series]="series" [legendSettings]="legendSettings">
    </ejs-smithchart>
  `
})
export class AppComponent {
  series = [
    {
      name: 'Device A',
      marker: { 
        visible: true, 
        shape: 'Circle', 
        width: 8,
        height: 8,
        dataLabel: { visible: true }  // ✓ dataLabel INSIDE marker
      },
      tooltip: { visible: true, template: 'R:${resistance}+jX:${reactance}' },
      points: [...]
    }
  ];

  legendSettings = { 
    visible: true, 
    position: 'Bottom',
    alignment: 'Center' 
  };
}

パターン 3：軸をカスタマイズしたアドミタンスのレンダリングタイプ

アドミタンスのレンダリングに切り替え、グリッド線で軸をカスタマイズします。

@Component({
  template: `
    <ejs-smithchart
      renderType: 'Admittance'
      [series]="series"
      [horizontalAxis]="hAxis"
      [radialAxis]="rAxis">
    </ejs-smithchart>
  `
})
export class AppComponent {
  series = [
    {
      points: [...],
    }
  ];

  hAxis = {
    labelPosition: 'Outside',
    majorGridLines: { visible: true, width: 1, opacity: 0.8 },
    minorGridLines: { visible: true, count: 4, opacity: 0.4 }
  };

  rAxis = {
    majorGridLines: { visible: true, width: 1, opacity: 0.8 },
    minorGridLines: { visible: true, count: 4, opacity: 0.4 }
  };
}

パターン 4：外部ソースからのデータ駆動型系列

dataSource プロパティを使って、配列の系列データをバインドします。

series = [
  {
    name: 'Test Results',
    dataSource: [
      { impedance: 50, phase: 0 },     // Will be mapped to resistance/reactance
      { impedance: 75, phase: 15 },
      { impedance: 100, phase: 30 }
    ],
    resistance: 'impedance',
    reactance: 'phase'
  }
];

パターン 5：エクスポートと印刷の統合

ドキュメント作成のために、エクスポートと印刷の機能を有効にします。

@Component({
  template: `
    <div>
      <button (click)="exportChart('PNG')">Export PNG</button>
      <button (click)="exportChart('SVG')">Export SVG</button>
      <button (click)="printChart()">Print</button>
    </div>
    <ejs-smithchart #smithchart [series]="series"></ejs-smithchart>
  `
})
export class AppComponent {
  @ViewChild('smithchart') smithchart!: any;

  exportChart(format: string) {
    this.smithchart.export(format, 'smith-chart-export');
  }

  printChart() {
    this.smithchart.print();
  }
}

## Import Best Practices

### ✅ Minimal Imports (Most Cases)

For basic smith charts without advanced features, import only what you need:

```typescript
import { SmithchartModule } from '@syncfusion/ej2-angular-charts'
import { Component, ViewEncapsulation } from '@angular/core'

@Component({
  imports: [SmithchartModule],  // ✓ Only SmithchartModule needed
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  template: `<ejs-smithchart [series]="series"></ejs-smithchart>`
})
export class AppComponent {
  series = [{ points: [...] }]
}

❌ 不要なモジュールをインポートしない

使用していないモジュールやサービスのインポートは避けてください。

// ✗ WRONG - CommonModule not needed in standalone component
import { CommonModule } from '@angular/common'
@Component({
  imports: [SmithchartModule, CommonModule],  // CommonModule is unnecessary
  standalone: true
})

// ✗ WRONG - SmithchartLegendService not needed without custom legend events
import { SmithchartLegendService } from '@syncfusion/ej2-angular-charts'
@Component({
  providers: [SmithchartLegendService],  // Only for custom legend click handling
  standalone: true
})
export class AppComponent {
  legendSettings = { visible: true }  // Basic legend doesn't need the service
}

// ✗ WRONG - TooltipRenderService not needed without tooltips
import { TooltipRenderService } from '@syncfusion/ej2-angular-charts'
@Component({
  providers: [TooltipRenderService],  // Only needed if tooltip: { visible: true }
  standalone: true
})
export class AppComponent {
  series = [{ points: [...] }]  // No tooltip configuration
}

✅ 必要な場合にのみサービスを追加する

使用例	サービス	インポート
基本的なチャート	なし	SmithchartModule のみ
ツールチップを使用	TooltipRenderService	tooltip: { visible: true } を使用する場合に追加
高度な凡例クリック	SmithchartLegendService	凡例の操作イベントを処理する場合に追加

例：ツールチップを使用する場合のみ

import { SmithchartModule, TooltipRenderService } from '@syncfusion/ej2-angular-charts'

@Component({
  imports: [SmithchartModule],
  providers: [TooltipRenderService],  // ✓ Add only if using tooltips
  standalone: true
})
export class AppComponent {
  series = [{
    points: [
      { resistance: 0.2, reactance: 0.1 },
      { resistance: 0.4, reactance: 0.3 }
    ],
    tooltip: { visible: true }  // ✓ Tooltips are configured
  }]
}

主な設定プロパティ

プロパティ	型	デフォルト	用途
series	Array	[]	可視化するポイントデータを含むシリーズの配列
points	Array	-	シリーズのデータ配列（抵抗とリアクタンスのペア）
dataSource	Array	-	外部ソースまたはデータ配列のデータをバインドします
resistance	string	-	dataSource の X 軸値（抵抗）のプロパティ名
reactance	string	-	dataSource の Y 軸値（リアクタンス）のプロパティ名
name	string	-	凡例に表示するシリーズ名
renderType	string	'Impedance'	描画タイプ：'Impedance' または 'Admittance'
fill	string	-	シリーズの線の色（16 進数または色名）
width	number	2	シリーズの線幅（ピクセル単位）
opacity	number	1	シリーズの線の不透明度（0～1）
marker	object	-	マーカーの設定（表示、形状、サイズ）
dataLabel	object	-	データラベルの設定（表示、書式）
tooltip	object	-	ツールチップの設定（表示、書式、テンプレート）
title	object	-	タイトルの設定（テキスト、表示、スタイル）
height	string/number	'400px'	グラフの高さ（ピクセルまたはパーセンテージ）
width	string/number	'100%'	グラフの幅（ピクセルまたはパーセンテージ）
theme	string	'Material'	組み込みテーマ（Material、Bootstrap、Tailwind など）
legendSettings	object	-	凡例の設定（表示、位置、配置）
horizontalAxis	object	-	水平軸のカスタマイズとラベル
radialAxis	object	-	放射軸のカスタマイズとグリッド線
enableRtl	boolean	false	右から左へのテキスト方向のサポートを有効にします
ariaLabel	string	-	スクリーンリーダー向けのアクセシビリティラベル

一般的なユースケース

1. 回路解析とインピーダンス整合 - 高周波回路のインピーダンス整合と伝送線路の特性を可視化します
2. ネットワークとフィルターの調整 - 比較と最適化のため、複数のフィルター応答とネットワークパラメーターを表示します
3. アンテナの設計と最適化 - アンテナ調整、SWR 解析、周波数応答の可視化のためにインピーダンス曲線をプロットします
4. RF エンジニアリング - 反射係数、定在波パターン、伝送線路の特性を解析します
5. マイクロ波エンジニアリング - 伝送線路、導波管、マイクロ波部品を設計・解析します
6. 教育コンテンツ - インタラクティブなチャートとリアルタイムのパラメーター可視化を使って、高周波回路の概念を教えます
7. パフォーマンスダッシュボード - 複数の伝送線路のメトリクスとネットワークパラメーターをリアルタイムで監視します
8. デバイスのテストと検証 - デバイスの特性評価のため、測定したインピーダンスデータとシミュレーションデータを比較します
9. 品質管理 - スミスチャート上で電子部品の製造テスト結果を可視化します
10. シグナルインテグリティ解析 - PCB 設計の検証に向けて、終端インピーダンスと信号反射を解析します

---

API リファレンス

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

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

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