syncfusion-react-3d-chart

Syncfusion React 3D Chart

React アプリケーションで Syncfusion の 3D Chart コンポーネントを実装し、カスタマイズするための包括的なスキルです。このスキルを使うと、縦棒、横棒、積み上げなどのグラフタイプで、インタラクティブな 3D ビジュアライゼーションを作成できます。

このスキルを使用するタイミング

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

• React アプリケーションに Syncfusion 3D グラフを実装する
• 縦棒、横棒、または積み上げの 3D グラフを作成する
• カテゴリ、数値、日時、または対数の軸を設定する
• グラフのデータソースをバインドして管理する
• 3D グラフの外観（回転、奥行き、壁面）をカスタマイズする
• 3D グラフにデータラベル、凡例、またはツールチップを追加する
• グラフの選択とインタラクションを実装する
• 3D グラフをエクスポートまたは印刷する
• 3D ビジュアライゼーションのアクセシビリティをサポートする
• 3D グラフの描画やパフォーマンスに関する問題を解決する

コンポーネントの概要

パッケージ： @syncfusion/ej2-react-charts

主なコンポーネント：

• Chart3DComponent - 3D グラフのルートコンテナー
• Chart3DSeriesCollectionDirective - 系列コレクションのラッパー
• Chart3DSeriesDirective - 個々の系列の設定
• Chart3DAxesDirective - 複数の軸の設定

グラフの種類： 縦棒、横棒、積み上げ縦棒、積み上げ横棒、100% 積み上げ縦棒、100% 積み上げ横棒

軸の種類： カテゴリ、数値、日時、対数

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

API リファレンス

📄 参照： references/api-reference.md

• 公開プロパティ、メソッド、イベント、子ディレクティブ、および使用例を簡潔にまとめています。リポジトリ内の API 概要として、こちらを正式な参照先として使用してください。

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-charts パッケージのインストール
• 依存関係と CSS テーマの設定
• 最初の 3D グラフの作成
• Chart3DComponent の基本的な使用方法
• TypeScript の設定

グラフの種類

📄 参照： references/chart-types.md

• 縦棒グラフ（垂直方向の 3D 棒）
• 横棒グラフ（水平方向の 3D 棒）
• 積み上げ縦棒グラフ
• 積み上げ横棒グラフ
• 100% 積み上げ縦棒グラフ
• 100% 積み上げ横棒グラフ
• 各グラフタイプを使用する場面
• 系列タイプの設定

データの操作

📄 参照： references/working-with-data.md

• データバインディングの方法
• データソースの構造要件
• 系列の設定（xName、yName）
• 複数の系列の処理
• 動的なデータ更新
• 空のポイントの処理

カテゴリ軸

📄 参照： references/category-axis.md

• カテゴリ軸の設定
• ラベルの書式設定と配置
• カテゴリのグループ化
• 間隔の設定
• カテゴリデータの使用例

数値軸

📄 参照： references/numeric-axis.md

• 数値軸の設定
• 範囲の設定（最小値、最大値）
• 間隔とステップサイズ
• ラベルの書式設定（小数、通貨）
• ゼロから開始する場合と範囲を自動設定する場合

日時軸

📄 参照： references/datetime-axis.md

• 日時軸の設定
• 日付形式のオプション
• 間隔の種類（日、月、年）
• 日付範囲の設定
• スケルトン形式
• タイムゾーンに関する考慮事項

対数軸

📄 参照： references/logarithmic-axis.md

• 対数スケールの概要
• 底の設定（log10、log2 など）
• 指数データの使用例
• 対数スケールのラベル書式設定
• 範囲と間隔の設定

軸のカスタマイズ

📄 参照： references/axis-customization.md

• 軸のタイトルとラベル
• 複数の軸（二次 Y 軸）
• 軸線のスタイル設定
• グリッド線の設定
• 目盛りのカスタマイズ
• ラベルの回転と書式設定
• 軸の交差値
• 軸の反転

複数ペイン

📄 参照： references/multiple-panes.md

• 複数ペインの概要
• 行の設定と配置
• ペインの高さ設定
• 系列を異なるペインに割り当てる
• ペインごとの軸のバインド
• 複数の指標を比較する場合の使用例

データラベル、凡例、ツールチップ

📄 参照： references/data-labels-legend-tooltip.md

• データラベルの設定と配置
• ラベルテンプレートと書式設定
• 凡例の位置とカスタマイズ
• 凡例の表示切り替え
• ツールチップの有効化と書式設定
• カスタムツールチップテンプレート
• 共有ツールチップ

選択と操作

📄 参照： references/selection-interaction.md

• 選択モード（ポイント、系列、クラスター）
• 単一選択と複数選択
• 選択イベントとハンドラー
• ホバー時のハイライト
• 選択スタイル
• インタラクティブ機能

印刷とエクスポート

📄 参照： references/print-export.md

• 印刷機能
• PNG、JPEG、SVG 形式でのエクスポート
• PDF 形式でのエクスポート
• エクスポート設定オプション
• ファイル名の規則
• エクスポートイベント

外観とテーマ設定

• 組み込みテーマ（Material、Bootstrap、Fluent、Tailwind）
• カスタムテーマの作成
• カラーパレット
• 3D の回転角度と傾斜角度
• 3D の奥行き設定
• 壁のカスタマイズ
• チャートの背景と枠線
• アニメーション設定

アクセシビリティ

• WCAG 2.1 準拠
• キーボードナビゲーションのサポート
• ARIA 属性
• スクリーンリーダーとの互換性
• ハイコントラストモード
• フォーカス管理
• アクセシブルな配色

クイックスタートの例

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { 
  Chart3DComponent, 
  Chart3DSeriesCollectionDirective, 
  Chart3DSeriesDirective,
  Inject,
  Category3D,
  ColumnSeries3D,
  Legend3D,
  DataLabel3D,
  Tooltip3D
} from '@syncfusion/ej2-react-charts';

function SalesChart() {
  const data = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }
  ];

  return (
    <Chart3DComponent
      id='chart'
      title='Monthly Sales'
      primaryXAxis={{ valueType: 'Category' }}
      primaryYAxis={{ title: 'Sales (K)' }}
      enableRotation={true}
      rotation={7}
      tilt={10}
      depth={100}
    >
      <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D, Tooltip3D]} />
      <Chart3DSeriesCollectionDirective>
        <Chart3DSeriesDirective
          dataSource={data}
          xName='month'
          yName='sales'
          type='Column'
          name='Sales'
        />
      </Chart3DSeriesCollectionDirective>
    </Chart3DComponent>
  );
}

export default SalesChart;
ReactDOM.render(<SalesChart />, document.getElementById('charts'));

よく使われるパターン

基本的な縦棒グラフ

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

積み上げ縦棒グラフ

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[StackingColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='StackingColumn'
      name='Product B'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

横棒グラフ

<Chart3DComponent primaryXAxis={{ valueType: 'Category' }}>
  <Inject services={[BarSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      type='Bar'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

データラベルと凡例を追加

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  legendSettings={{ visible: true }}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D, DataLabel3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
      name='Sales'
      dataLabel={{ visible: true }}
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

カスタム 3D 回転

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  enableRotation={true}
  rotation={15}
  tilt={5}
  depth={120}
  wallColor='transparent'
  wallSize={1}
>
  <Inject services={[ColumnSeries3D, Category3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data}
      xName='x'
      yName='y'
      type='Column'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

異なる色を使用した複数の系列

<Chart3DComponent
  primaryXAxis={{ valueType: 'Category' }}
  palettes={['#E94649', '#F6B53F', '#6FAAB0']}
>
  <Inject services={[ColumnSeries3D, Category3D, Legend3D]} />
  <Chart3DSeriesCollectionDirective>
    <Chart3DSeriesDirective
      dataSource={data1}
      xName='x'
      yName='y'
      type='Column'
      name='Product A'
    />
    <Chart3DSeriesDirective
      dataSource={data2}
      xName='x'
      yName='y'
      type='Column'
      name='Product B'
    />
    <Chart3DSeriesDirective
      dataSource={data3}
      xName='x'
      yName='y'
      type='Column'
      name='Product C'
    />
  </Chart3DSeriesCollectionDirective>
</Chart3DComponent>

主要な Props リファレンス

Chart3DComponent の Props

Prop	型	説明
primaryXAxis	Object	X 軸の設定（種類、タイトル、ラベル）
primaryYAxis	Object	Y 軸の設定（範囲、タイトル、書式）
rotation	number	水平方向の回転角度（0-360）
tilt	number	垂直方向の傾斜角度（0-90）
depth	number	3D チャートの奥行き（0-100）
enableRotation	boolean	マウスによる回転操作を有効化
wallColor	string	3D の壁の色
wallSize	number	壁の枠線の太さ
title	string	チャートのタイトルテキスト
legendSettings	Object	凡例の設定
tooltip	Object	ツールチップの設定
palettes	string[]	系列に使用する色の配列

Chart3DSeriesDirective の Props

Prop	型	説明
dataSource	any[]	データポイントの配列
xName	string	X 軸の値に使用するプロパティ名
yName	string	Y 軸の値に使用するプロパティ名
type	string	チャートの種類：'Column'、'Bar'、'StackingColumn'、'StackingBar'、'StackingColumn100'、'StackingBar100'
name	string	系列名（凡例に表示）
dataLabel	Object	データラベルの設定
fill	string	系列の色
opacity	number	系列の不透明度（0-1）

よくある使用例

1. 売上比較：製品ごとの月次／四半期売上を比較する縦棒グラフ
2. アンケート結果：回答や順位を示す棒グラフ
3. 市場シェア：市場の分布を表示する積み上げ縦棒グラフ
4. 時系列データ：時系列データを視覚化する DateTime 軸
5. 財務データ：株価や指数関数的な成長に使用する対数軸
6. 複数指標のダッシュボード：異なる KPI を表示する複数のペイン
7. パフォーマンスの追跡：割合の内訳を示す 100% 積み上げグラフ
8. カテゴリー分析：離散データをグループ化するカテゴリー軸
9. インタラクティブなレポート：ユーザー主導のデータ探索に使用する選択とエクスポート
10. アクセシブルな視覚化：すべてのユーザーが利用できる WCAG 準拠のチャート

TypeScript のサポート

すべてのコンポーネントは完全に型付けされています。必要に応じて型をインポートしてください。

import { 
  Chart3DComponent,
  IChart3DLoadedEventArgs,
  IChart3DPointRenderEventArgs,
  Chart3DModel
} from '@syncfusion/ej2-react-charts';

トラブルシューティングのクイックリファレンス

チャートが表示されない場合

• @syncfusion/ej2-react-charts がインストールされていることを確認します
• CSS テーマのインポートを確認します
• 必要なサービスが注入されていることを確認します

データが表示されない場合

• xName/yName がデータのプロパティ名と一致していることを確認します
• 軸の valueType がデータ型と一致していることを確認します
• データソースの構造を検証します

パフォーマンスに問題がある場合

• データポイント数を減らします（必要に応じて集計します）
• アニメーションを無効にします
• データ構造を最適化します

3D 効果が機能しない場合

• enableRotation={true} を設定します
• 回転、傾斜、奥行きの props を設定します
• 系列の種類が 3D に対応しているか確認します

詳しいトラブルシューティングについては、上記の該当するリファレンスファイルを参照してください。