syncfusion-react-smithchart

Syncfusion React Smith Charts の実装

Syncfusion React Smith Chart コンポーネントを実装、カスタマイズするための包括的なスキルです。Smith Chart は、電気工学や RF 設計でインピーダンス、反射係数、伝送線路のパラメーターを可視化するために使用される特殊な図表です。

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

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

• 伝送線路のインピーダンスと反射データを可視化する
• RF 回路のパラメーター（S パラメーター、インピーダンス整合）をプロットする
• 抵抗とリアクタンスの関係を表示する
• マーカーやツールチップを備えたインタラクティブな Smith Chart を作成する
• 電気工学のデータ可視化を実装する
• Smith Chart の軸（水平方向および放射方向）を設定する
• 凡例、データラベル、注釈を追加する
• ドキュメントやレポート用に Smith Chart をエクスポートする
• 技術チャートのアクセシビリティ要件への準拠を確保する

コンポーネントの概要

Syncfusion React Smith Chart は、次の機能を備えた特殊なチャートコンポーネントです。

• 抵抗とリアクタンスの座標でデータポイントをプロットする
• カスタマイズ可能なスタイルで複数の系列をサポートする
• 水平軸と放射軸の設定を提供する
• インタラクティブ機能（ツールチップ、凡例、マーカー）を備える
• 印刷およびエクスポート機能（PNG、JPEG、SVG、PDF）を提供する
• WCAG 2.2 のアクセシビリティ要件に準拠する
• レスポンシブなサイズ設定とテーマ設定をサポートする

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

はじめに

📄 参照: references/getting-started.md

• 依存関係とパッケージのインストール
• npm を使用した @syncfusion/ej2-react-charts のインストール
• 基本的な SmithchartComponent の実装
• モジュールの注入（SmithchartLegend、TooltipRender）
• CSS テーマのインポートと設定
• 初回のレンダリングと初期化
• 完全な動作サンプル

データと系列の設定

📄 参照: references/series-configuration.md

• Smith Chart への複数系列の追加
• 2 種類のデータバインド方法（dataSource と points）
• 抵抗フィールドとリアクタンスフィールドのマッピング
• 系列のカスタマイズ（塗りつぶし、透明度、幅、表示状態）
• スマートラベルの設定
• 複数系列のサンプルとパターン

軸の設定

📄 参照: references/axis-configuration.md

• 水平軸（直線）の設定
• 放射軸（円形パス）の設定
• ラベルのカスタマイズ（位置、交差の処理、スタイル）
• 主グリッド線と補助グリッド線の設定
• 軸線のプロパティ（幅、破線パターン、表示状態）
• 軸をカスタマイズする完全なサンプル

視覚要素：マーカーとデータラベル

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

• データポイントのマーカーを有効化してカスタマイズする
• マーカーのプロパティ（サイズ、形状、色、境界線、透明度）
• データラベルの実装とスマートな配置
• データラベルのスタイル設定（フォント、色、境界線）
• 視認性を高めるためのベストプラクティス

凡例の設定

📄 参照: references/legend-configuration.md

• SmithchartLegend モジュールを使用して凡例を有効にする
• 配置（上、下、左、右、カスタム）
• 配置オプション（near、center、far）
• 凡例のカスタマイズ（形状、サイズ、パディング）
• 表示切り替え機能
• 凡例表示用の系列名

ツールチップとインタラクティブ機能

📄 参照: references/tooltip-configuration.md

API リファレンス

📄 参照: references/api-reference.md

• TooltipRender モジュールを使用してツールチップを有効にする
• 系列ごとのツールチップ設定
• ツールチップの表示状態と外観
• ツールチップとデータラベルの使い分け
• インタラクティブなホバー動作

外観とサイズ設定

📄 参照: references/dimensions-and-sizing.md

• コンテナーに基づくサイズ設定（CSS／インラインスタイル）
• ピクセル単位の固定サイズ
• パーセンテージに基づくレスポンシブなサイズ設定
• レスポンシブデザインに関する考慮事項
• 各サイズ設定方法の使い分け

タイトルとサブタイトル

📄 参照： references/title-and-subtitle.md

• チャートに説明的なタイトルを追加する
• サブタイトルの設定
• 長いテキストのタイトルをトリミングする
• フォントと配置のカスタマイズ
• 表示の制御

印刷、エクスポート、アクセシビリティ

📄 参照： references/print-export-accessibility.md

• ブラウザーから Smith Charts を直接印刷する
• 複数の形式（PNG、JPEG、SVG、PDF）にエクスポートする
• WCAG 2.2 および Section 508 への準拠
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• WAI-ARIA 属性
• アクセシビリティのテストとベストプラクティス

クイックスタートの例

import * as React from 'react';
import { SmithchartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

function App() {
  const transmissionData = [
    { resistance: 0, reactance: 0.05 },
    { resistance: 0, reactance: 0.1 },
    { resistance: 0, reactance: 0.2 },
    { resistance: 0.3, reactance: 0.3 },
    { resistance: 0.5, reactance: 0.4 },
    { resistance: 1.0, reactance: 0.5 }
  ];

  return (
    <SmithchartComponent
      id="smithchart"
      title={{ text: 'Transmission Line Impedance' }}
      legendSettings={{ visible: true }}
    >
      <Inject services={[SmithchartLegend, TooltipRender]} />
      <SmithChartSeriesCollectionDirective>
        <SmithChartSeriesDirective
          name="Transmission1"
          points={transmissionData}
          marker={{ visible: true }}
          tooltip={{ visible: true }}
        />
      </SeriesCollectionDirective>
    </SmithchartComponent>
  );
}

export default App;

よく使われるパターン

DataSource を使用した複数の系列

const series1Data = [
  { resistance: 0, reactance: 0.05 },
  { resistance: 0.3, reactance: 0.2 },
  { resistance: 1.0, reactance: 0.4 }
];

const series2Data = [
  { resistance: 0.1, reactance: 0.1 },
  { resistance: 0.5, reactance: 0.3 },
  { resistance: 1.5, reactance: 0.5 }
];

<SmithchartComponent legendSettings={{ visible: true }}>
  <Inject services={[SmithchartLegend]} />
  <SmithChartSeriesCollectionDirective>
    <SmithChartSeriesDirective
      name="Line 1"
      dataSource={series1Data}
      resistance="resistance"
      reactance="reactance"
      fill="blue"
    />
    <SmithChartSeriesDirective
      name="Line 2"
      dataSource={series2Data}
      resistance="resistance"
      reactance="reactance"
      fill="red"
    />
  </SeriesCollectionDirective>
</SmithchartComponent>

マーカーとラベルのカスタマイズ

<SmithChartSeriesDirective
  name="Impedance Data"
  points={data}
  marker={{
    visible: true,
    height: 10,
    width: 10,
    shape: 'Diamond',
    fill: 'green',
    dataLabel: {
      visible: true,
      textStyle: { color: 'black', size: '10px' }
    }
  }}
/>

画像へのエクスポート

import { useRef } from 'react';

function ChartWithExport() {
  const chartRef = useRef(null);

  const exportChart = () => {
    chartRef.current.export('PNG', 'smithchart');
  };

  return (
    <>
      <button onClick={exportChart}>Export as PNG</button>
      <SmithchartComponent ref={chartRef} id="smithchart">
        {/* series configuration */}
      </SmithchartComponent>
    </>
  );
}

主な Props と機能

SmithchartComponent の Props

プロパティ	型	説明
id	string	コンポーネントの一意の識別子
title	object	テキストとスタイルを含むタイトルの設定
legendSettings	object	凡例の表示、位置、スタイル
width	string	チャートの幅（ピクセルまたはパーセンテージ）
height	string	チャートの高さ（ピクセルまたはパーセンテージ）
horizontalAxis	object	水平軸の設定
radialAxis	object	放射軸の設定

SeriesDirective の Props

プロパティ	型	説明
name	string	凡例に表示する系列名
points	array	{resistance, reactance} オブジェクトの配列
dataSource	array	カスタムフィールドのマッピングを含むデータ配列
resistance	string	抵抗値のフィールド名
reactance	string	リアクタンス値のフィールド名
fill	string	系列の線の色
width	number	系列の線の幅
opacity	number	系列の線の不透明度（0～1）
marker	object	マーカーの設定
tooltip	object	ツールチップの設定
enableSmartLabels	boolean	スマートラベルの配置

必須のモジュールインジェクション

import { SmithchartLegend, TooltipRender } from '@syncfusion/ej2-react-charts';

<Inject services={[SmithchartLegend, TooltipRender]} />

• SmithchartLegend：凡例機能に必要です
• TooltipRender：ツールチップの表示に必要です

トラブルシューティングガイド

チャートが描画されない

• @syncfusion/ej2-react-charts パッケージがインストールされていることを確認してください
• アプリに CSS テーマがインポートされていることを確認してください
• データに有効な resistance フィールドと reactance フィールドがあることを確認してください
• コンテナーに寸法が定義されていることを確認してください

凡例が表示されない

• legendSettings.visible が true に設定されていることを確認してください
• SmithchartLegend モジュールがインジェクションされていることを確認してください
• 系列に name プロパティが定義されていることを確認してください

ツールチップが機能しない

• TooltipRender モジュールがインジェクションされていることを確認してください
• 系列の tooltip.visible が true であることを確認してください
• マウスのホバーイベントが有効になっていることを確認してください

データが表示されない

• データ形式を確認してください。抵抗とリアクタンスを含むオブジェクトの配列である必要があります
• フィールド名が dataSource プロパティの設定と一致していることを確認してください
• 数値が有効であり、NaN や undefined ではないことを確認してください
• 系列の表示が false に設定されていないことを確認してください

エクスポートに失敗する

• チャートに有効な id プロパティがあることを確認してください
• エクスポート形式がサポートされていることを確認してください（PNG、JPEG、SVG、PDF）
• マウントされたコンポーネントの参照に対してエクスポートメソッドが呼び出されていることを確認してください

スタイルの問題

• 正しい Syncfusion テーマの CSS ファイルをインポートしてください
• カスタムスタイルがコンポーネントのクラスと競合していないことを確認してください
• width と height のプロパティが適切な形式であることを確認してください
• コンテナーのスタイルによってチャートが描画できることを確認してください

その他のリソース

詳細なドキュメントはすべて、上記の参照ファイルに記載されています。各参照ファイルには、その機能領域に特化した完全な例、設定オプション、ベストプラクティスがまとめられています。