SKILL.md
唯讀
名稱
chart-designer
描述
設計有效的資料視覺化與圖表。產生 ECharts、Chart.js 等圖表庫的設定檔。建立儀表板與報表。
版本
1.0.0
Chart Designer Skill
概述
我協助你設計有效的資料視覺化，推薦合適的圖表類型、產生熱門圖表庫的設定檔，並套用資料視覺化最佳實務。
我能做什麼：
- 為你的資料推薦合適的圖表類型
- 產生 ECharts / Chart.js 設定檔
- 設計儀表板版面
- 套用視覺化最佳實務
- 建立 Excel 圖表規格
- 建議配色與樣式
我不能做什麼：
- 直接渲染圖表（請在工具中使用產生的設定檔）
- 從無到有建立自訂圖表類型
- 直接存取你的資料
如何使用我
步驟 1：描述你的資料
告訴我：
- 你有哪些類型的資料
- 你想傳達什麼故事
- 你的觀眾（技術人員、高階主管、一般大眾）
- 圖表將顯示在哪裡（簡報、儀表板、報表）
步驟 2：取得建議
我會建議：
- 最適合你資料的圖表類型
- 設定選項
- 配色方案
- 版面考量
步驟 3：接收圖表設定
我會提供：
- ECharts JSON 設定
- Chart.js 設定
- Excel 圖表設定說明
- CSS / 樣式建議
圖表選擇指南
比較圖表
| 圖表類型 | 最佳用途 | 資料需求 |
|---|---|---|
| 長條圖 | 比較類別 | 類別 + 數值 |
| 群組長條圖 | 多系列比較 | 類別 + 多個系列 |
| 堆疊長條圖 | 部分對整體比較 | 類別 + 組成數值 |
趨勢圖表
| 圖表類型 | 最佳用途 | 資料需求 |
|---|---|---|
| 折線圖 | 隨時間變化 | 時間序列資料 |
| 面積圖 | 累積趨勢 | 時間序列（可堆疊） |
| 迷你圖 | 緊湊趨勢 | 簡單時間序列 |
分佈圖表
| 圖表類型 | 最佳用途 | 資料需求 |
|---|---|---|
| 直方圖 | 數值分佈 | 數值資料 |
| 盒狀圖 | 分佈摘要 | 含四分位數的數值資料 |
| 散佈圖 | 相關性 | 兩個數值變數 |
部分對整體圖表
| 圖表類型 | 最佳用途 | 資料需求 |
|---|---|---|
| 圓餅圖 | 簡單比例（≤5 項） | 類別 + 百分比 |
| 甜甜圈圖 | 含總數的比例 | 類別 + 百分比 |
| 矩形樹狀圖 | 階層式比例 | 階層資料 + 數值 |
特殊圖表
| 圖表類型 | 最佳用途 | 資料需求 |
|---|---|---|
| 漏斗圖 | 流程階段 / 轉換 | 階段 + 數值 |
| 儀表圖 | 單一 KPI 與目標比較 | 目前值 + 目標值 |
| 熱力圖 | 矩陣比較 | 列 + 欄 + 數值 |
| 雷達圖 | 多維度比較 | 每個項目的多個指標 |
| 桑基圖 | 流量 / 轉換 | 來源 + 目標 + 數值 |
決策樹
你想呈現什麼？
│
├─ 比較
│ ├─ 項目之間 → 長條圖
│ ├─ 隨時間變化 → 折線圖
│ └─ 多個系列 → 群組 / 堆疊長條圖
│
├─ 組成
│ ├─ 靜態 → 圓餅 / 甜甜圈圖（≤5）或矩形樹狀圖
│ ├─ 隨時間變化 → 堆疊面積圖
│ └─ 階層式 → 矩形樹狀圖 / 旭日圖
│
├─ 分佈
│ ├─ 單一變數 → 直方圖
│ ├─ 多個資料集 → 盒狀圖
│ └─ 兩個變數 → 散佈圖
│
├─ 關係
│ ├─ 兩個變數 → 散佈圖
│ ├─ 三個變數 → 泡泡圖
│ └─ 相關矩陣 → 熱力圖
│
└─ 流程 / 程序
├─ 順序階段 → 漏斗圖
├─ 轉換 → 桑基圖
└─ 單一指標 → 儀表圖
輸出格式
# 圖表設計：[標題]
**資料類型**：[描述]
**目的**：[要傳達的故事]
**建議圖表**：[圖表類型]
---
## 圖表設定
### ECharts
```javascript
const option = {
title: {
text: '圖表標題',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['系列 1', '系列 2'],
bottom: 10
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '系列 1',
type: 'bar',
data: [120, 200, 150, 80, 70, 110]
},
{
name: '系列 2',
type: 'line',
data: [100, 180, 160, 90, 80, 100]
}
]
};
Chart.js
const config = {
type: 'bar',
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '系列 1',
data: [120, 200, 150, 80, 70, 110],
backgroundColor: 'rgba(54, 162, 235, 0.8)'
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: '圖表標題'
}
}
}
};
樣式建議
色板
- 主色：
#5470c6 - 輔色：
#91cc75 - 強調色：
#fac858 - 中性色：
#73c0de
字體
- 標題：16px，粗體
- 標籤：12px，一般
- 軸：11px，細體
套用的最佳實務
- [實務 1]
- [實務 2]
- [實務 3]
替代圖表
如果這個效果不好，可以考慮：
- [替代 1] - 當 [條件]
- [替代 2] - 當 [條件]
---
### ECharts 常用設定
#### 長條圖
```javascript
{
xAxis: { type: 'category', data: categories },
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: values,
itemStyle: { color: '#5470c6' }
}]
}
折線圖
{
xAxis: { type: 'category', data: categories },
yAxis: { type: 'value' },
series: [{
type: 'line',
data: values,
smooth: true,
areaStyle: {} // 用於面積圖
}]
}
圓餅圖
{
series: [{
type: 'pie',
radius: ['40%', '70%'], // 甜甜圈
data: [
{ value: 100, name: 'A' },
{ value: 200, name: 'B' }
]
}]
}
散佈圖
{
xAxis: { type: 'value' },
yAxis: { type: 'value' },
series: [{
type: 'scatter',
data: [[x1, y1], [x2, y2]],
symbolSize: 10
}]
}
色板
專業
#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4
冷色
#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd
暖色
#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d
無障礙（色盲友善）
#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB
最佳實務
資料墨水比
- 移除不必要的格線
- 減少圖表垃圾
- 讓資料成為焦點
清晰度
- 清楚、具描述性的標題
- 標示軸線與單位
- 適當的精確度（不要太多小數位）
比較
- 長條圖的 Y 軸從零開始
- 比較時使用一致的尺度
- 邏輯排序資料
顏色
- 有目的地使用顏色
- 考慮色盲使用者
- 不要使用太多顏色（≤7）
互動
- 提示框顯示細節
- 密集資料可縮放
- 階層資料可向下鑽取
製作更好圖表的技巧
- 了解你的觀眾 - 技術人員 vs. 高階主管
- 從問題開始 - 你想回答什麼？
- 選擇正確的圖表 - 不要硬把資料塞進錯誤的格式
- 簡化 - 少即是多
- 清楚標示 - 假設觀眾沒有背景知識
- 用真實使用者測試 - 訊息是否清楚？
- 考慮無障礙 - 顏色、對比、替代文字
限制
- 無法直接渲染圖表
- 設定可能需要針對特定工具調整
- 複雜的自訂視覺化可能需要撰寫程式碼
- 即時資料需要額外設定
由 Claude Office Skills 社群建置。歡迎貢獻！
