bubble-chart
✓BubbleChart コンポーネントを構築します。サイズエンコーディングを使用した散布図に使用し、3 つの変数間の関係を示します。
SKILL.md
BubbleChart displays data points as circles where position (x, y) and size encode three different variables. Great for showing relationships and clusters.
| data | T[] | required | Array of data objects | | categories | Record | required | Color mapping for categoryKey values | | categoryKey | keyof T | required | Data key for bubble coloring | | xAccessor | (d: T) => number | - | Function to get x-position | | yAccessor | (d: T) => number | - | Function to get y-position |
| sizeAccessor | (d: T) => number | - | Function to get bubble size | | sizeRange | [number, number] | [1, 20] | Min/max bubble radius in pixels | | opacity | number | - | Bubble opacity (0-1) | | height | number | required | Chart height in pixels | | xFormatter | (tick, i?, ticks?) => string | - | X-axis label formatter |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-02
- 更新日
- 2026-02-18
クイックアンサー
bubble-chart とは？
BubbleChart コンポーネントを構築します。サイズエンコーディングを使用した散布図に使用し、3 つの変数間の関係を示します。 ソース: dennisadriaans/vue-chrts。
bubble-chart のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/dennisadriaans/vue-chrts
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-02