> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ウィジェット
> Twentyのウィジェットの種類と可視化オプションを確認します。
export const ChartIcon = ({icon, size = 20}) => {
const icons = {
'database': ,
'filter': ,
'axis-x': ,
'axis-y': ,
'sum': ,
'chart-pie': ,
'chart-line': ,
'calendar': ,
'arrows-sort': ,
'filters': ,
'chart-bar-popular': ,
'math-min': ,
'math-max': ,
'color-swatch': ,
'gizmo': ,
'stack-2': ,
'badge-2k': ,
'text-caption': ,
'eye-off': ,
'caret-left': ,
'caret-right': ,
'number-123': ,
'frame': ,
'align-box-left-top':
};
const selectedIcon = icons[icon];
if (!selectedIcon) {
return null;
}
return selectedIcon;
};
## 利用可能なウィジェット
Twentyは、CRMデータを可視化するためのさまざまなウィジェットタイプを提供します。
### 棒グラフ
データを横棒または縦棒で表示します。
**最適な用途:**
* カテゴリ間の値を比較する
* ランキングを表示する
* 期間別の指標を追跡する
**使用例:**
* ステージ別の商談
* 営業担当者別の売上
* 月別のコンタクト追加数
**制限を表示**: 棒グラフは、Group Byを使用する場合、最大100小節、および1小節あたり50グループを表示できます。 警告 "Undisplayed data: max X bars per chart" が表示された場合は、フィルターを追加してデータを絞り込むか、グルーピングを変更します（例: 日単位ではなく週単位でグループ化）。
### 円グラフ
全体に占める割合を表示します。
**最適な用途:**
* 構成や分布を示す
* 部分と全体を比較する
* 主要セグメントを強調する
**使用例:**
* ソース別の商談分布
* 業種別のコンタクト内訳
* 担当者別のパイプライン構成
### 折れ線グラフ
時間の経過に伴う傾向を表示します。
**最適な用途:**
* 時間経過による変化を追跡する
* トレンドを把握する
* 複数の指標を比較する
**使用例:**
* 月次の商談数の推移
* 四半期ごとの売上成長
* 活動量の推移
### グラフ
重要な単一値を目立つ形で表示します。
**最適な用途:**
* KPIを強調する
* 合計や平均を表示する
* ステータスを素早く確認する
**使用例:**
* パイプラインの合計金額
* オープンな商談数
* コンバージョン率
**高度なオプション:**
* **比率**: Select フィールドで、値同士の比率を計算します。 **Data on display** → フィールドを選択 → **Ratio** オプションを有効にします。
* **Prefix & Suffix**: 可読性を高めるために、数値の前後にカスタムテキストを追加します（例: "\$" のプレフィックスや "%" のサフィックス）。
### iFrame
外部ツールやコンテンツをダッシュボードに直接埋め込みます。
**最適な用途:**
* 外部のレポートやダッシュボードを表示する
* サードパーティのセールスツールを統合する
* 他システムのライブコンテンツを表示する
**使用例:**
* サポートツールの指標
* ダイヤラーの指標
* セールスシーケンスツールのライブコンテンツ
### リッチテキスト
書式設定されたテキストとコンテンツをダッシュボードに直接追加します。
**最適な用途:**
* 説明または説明を追加する
* ダッシュボードの説明
* メモと注釈
**機能:**
* リッチテキストの書式設定（太字、斜体、リストなど）
* 画像とファイルのアップロード
* Markdown スタイルの編集
**近日提供予定**: ゲージチャートとテーブルはまだ利用できませんが、ロードマップに含まれています。
### ウィジェットの複製
1. ウィジェットをクリックします
2. **Options** を開きます
3. **Duplicate widget** をクリックします