
在進行數據視覺化時,圓餅圖是一個強大而直觀的工具,特別適合展示整體中各部分的比例關係。讓我們深入探討如何製作既美觀又實用的圓餅圖,並了解在什麼情況下應該使用或避免使用圓餅圖。
網頁設計中的圓餅圖UI設計提醒和技巧
在進行數據視覺化時,圓餅圖是一個強大而直觀的工具,特別適合展示整體中各部分的比例關係。讓我們深入探討如何製作既美觀又實用的圓餅圖,並了解在什麼情況下應該使用或避免使用圓餅圖。
選擇圓餅圖的基本原則
在決定使用圓餅圖之前,我們需要評估數據的性質。圓餅圖最適合用於展示簡單的數據點,並且當不同百分比之間的對比較為明顯時特別有效。比如,當我們要比較整體中的各個部分(即總計為100%的數據)時,圓餅圖就是一個很好的選擇。
程式碼範例
<!DOCTYPE html>
<html>
<head>
<style>
.pie-chart-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px;
}
.pie-chart-svg {
overflow: visible; /* 允許內容超出 SVG 範圍 */
width: 100%;
height: 100%;
}
.tooltip {
position: absolute;
background: white;
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: none;
pointer-events: none;
font-size: 14px;
z-index: 100;
}
.legend {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 10px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.legend-item:hover {
background-color: #f5f5f5;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.pie-slice {
transition: transform 0.3s ease;
transform-origin: center;
cursor: pointer;
}
.pie-slice:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
}
/* 新增圖表容器的樣式 */
.chart-wrapper {
padding: 15px; /* 提供放大空間 */
box-sizing: border-box;
}
</style>
<script>
class PieChart {
constructor(container, data) {
this.container = container;
this.data = data;
this.radius = 120; // 稍微縮小半徑以適應padding
this.padding = 15; // 設定padding值
this.centerPoint = this.radius + this.padding; // 中心點位置
this.init();
}
createSVGSlice(startAngle, endAngle, color) {
const start = this.polarToCartesian(startAngle);
const end = this.polarToCartesian(endAngle);
const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
const pathData = [
"M", this.centerPoint, this.centerPoint,
"L", start.x, start.y,
"A", this.radius, this.radius, 0, largeArcFlag, 1, end.x, end.y,
"Z"
].join(" ");
return pathData;
}
polarToCartesian(angle) {
const angleInRadians = (angle - 90) * Math.PI / 180.0;
return {
x: this.centerPoint + (this.radius * Math.cos(angleInRadians)),
y: this.centerPoint + (this.radius * Math.sin(angleInRadians))
};
}
init() {
const total = this.data.reduce((sum, item) => sum + item.value, 0);
let currentAngle = 0;
// 創建包裝容器
const wrapper = document.createElement('div');
wrapper.className = 'chart-wrapper';
// 創建SVG元素,設定較大的viewBox以容納放大效果
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "pie-chart-svg");
// viewBox 設定為總尺寸(直徑+兩側padding)
const viewBoxSize = (this.radius + this.padding) * 2;
svg.setAttribute("viewBox", `0 0 ${viewBoxSize} ${viewBoxSize}`);
// 創建工具提示
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
// 創建圖例
const legend = document.createElement('div');
legend.className = 'legend';
this.data.forEach((item, index) => {
const percentage = (item.value / total) * 100;
const startAngle = currentAngle;
const endAngle = currentAngle + (percentage * 3.6);
// 創建扇形
const slice = document.createElementNS("http://www.w3.org/2000/svg", "path");
slice.setAttribute("d", this.createSVGSlice(startAngle, endAngle, item.color));
slice.setAttribute("fill", item.color);
slice.classList.add("pie-slice");
// 添加滑鼠事件
const updateTooltip = (e) => {
tooltip.style.display = 'block';
tooltip.innerHTML = `${item.label}: ${percentage.toFixed(1)}%`;
tooltip.style.left = `${e.pageX + 10}px`;
tooltip.style.top = `${e.pageY + 10}px`;
};
slice.addEventListener('mouseenter', updateTooltip);
slice.addEventListener('mousemove', updateTooltip);
slice.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
});
svg.appendChild(slice);
// 創建圖例項
const legendItem = document.createElement('div');
legendItem.className = 'legend-item';
legendItem.innerHTML = `
<div class="legend-color" style="background: ${item.color}"></div> <span>${item.label} (${percentage.toFixed(1)}%)</span> `;
// 圖例互動效果
legendItem.addEventListener('mouseenter', (e) => {
slice.style.transform = 'scale(1.05)';
updateTooltip(e);
});
legendItem.addEventListener('mouseleave', () => {
slice.style.transform = 'scale(1)';
tooltip.style.display = 'none';
});
legend.appendChild(legendItem);
currentAngle = endAngle;
});
wrapper.appendChild(svg);
this.container.appendChild(wrapper);
this.container.appendChild(tooltip);
this.container.appendChild(legend);
}
}
// 使用示例
document.addEventListener('DOMContentLoaded', () => {
const data = [
{ label: '產品A', value: 30, color: '#FF6B6B' },
{ label: '產品B', value: 25, color: '#4ECDC4' },
{ label: '產品C', value: 20, color: '#45B7D1' },
{ label: '產品D', value: 15, color: '#96CEB4' },
{ label: '其他', value: 10, color: '#FFEEAD' }
];
const container = document.querySelector('#pieChart');
new PieChart(container, data);
});
</script>
</head>
<body>
<div id="pieChart" class="pie-chart-container"></div>
</body>
</html>
結果展示
使用技巧
在實際應用中,圓餅圖的展示效果直接影響用戶對數據的理解。以下是一些實用技巧:
技巧 | 說明 | 重要性 |
---|---|---|
響應式設計 | 確保圓餅圖在不同設備上都能正常顯示 | 高 |
動畫效果 | 加入適當的動畫提升用戶體驗 | 中 |
標籤位置 | 避免標籤重疊,保持清晰可讀 | 高 |
互動功能 | 懸停顯示詳細數據 | 中 |
圓餅圖設計要點
1. 數據類別控制
在設計圓餅圖時,控制數據類別的數量至關重要:
- 限制在5-7個類別以內,避免視覺混亂
- 較小的數據可以合併為"其他"類別
- 確保各個類別之間有明顯的差異
2. 視覺設計原則
良好的視覺設計能夠提升圖表的可讀性:
- 使用對比色區分不同類別
- 在相鄰區塊間添加1像素的分隔線
- 堅持使用2D設計,避免使用3D效果
- 從12點鐘方向開始順時針排列,數值由大到小
3. 互動設計
添加適當的互動效果可以提升用戶體驗:
- 懸停時顯示詳細數據
- 點擊時突出顯示選中區塊
- 提供清晰的圖例說明
- 支持響應式設計
不適合使用圓餅圖的場景
以下情況建議選擇其他圖表類型:
- 數據不是整體的組成部分
- 需要精確的數據比較
- 展示時間序列數據
- 比較多個數據集
最佳實踐建議
- 資料呈現
- 確保數據總和為100%
- 按照數值大小排序
- 提供清晰的標籤說明
- 視覺優化
- 使用高對比度的配色方案
- 確保色彩搭配適合色盲用戶
- 保持簡潔的設計風格
- 互動體驗
- 實現流暢的動畫效果
- 提供詳細的數據提示
- 支持移動端適配
通過這些設計原則和技巧,我們可以製作出既美觀又實用的圓餅圖,為用戶提供清晰直觀的數據可視化體驗。記住,圓餅圖的核心目標是幫助用戶快速理解數據構成,因此在設計時要始終以提升可讀性和可用性為首要考慮因素。
筆者是使用Bootstrap 5 框架,所以實際範例會與我執行的成品有不同的寫法,請依據自己的需求調整!
CONTACT INFORMATION
其他新聞
-
網頁設計必備良品!Uiverse是我學習的好幫手。
Published on 2025-02-05 21:30:00 -
優雅的幫文字截斷,讓響應式網頁設計排版更美觀的小技巧!
Published on 2025-02-03 21:30:00 -
訪問者模式是一種行為設計模式,應用於網頁設計中可以大大提高用戶體驗!
Published on 2025-01-30 20:00:00 -
網頁導入3D的互動式設計讓我大吃一驚,網頁設計要導入3D元素,並且要有互動功能,有哪些方案!
Published on 2025-01-24 23:50:00 -
CSS的字體相關特殊單位介紹:ex、ch、cap、lh,您用過那些?
Published on 2025-01-20 22:50:00 -
Neumorphism(新擬物設計)進一步改進了現代網頁設計風格
Published on 2025-01-19 00:20:00 -
CSS @scope即將登場,網頁設計更靈活!
Published on 2025-01-18 19:30:00 -
用 inert 讓網頁設計更有溫度!打造絕讚的 CX 體驗
Published on 2025-01-11 22:50:00 -
CSS的繼承技能currentColor,搭配color-mix,我的按鈕跟網頁看起來終於是"一路人"!
Published on 2025-01-10 15:30:00 -
直接創造自己的CSS!瘋狂的Houdini API,網頁設計更靈活!
Published on 2025-01-09 19:40:00 -
CSS 的垂直對齊屬性終於來了!就是 align-content 屬性,它之前只適用於 Flexbox 和 Grid 佈局,現在也可以用於普通的區塊啦!
Published on 2025-01-05 13:00:00 -
有使用過CSS focus-within嗎?我用他提升了CX!focus-within網頁應用範例。
Published on 2025-01-04 16:40:00 -
使用新式CSS完成視窗滾動觸發動畫的網頁設計技巧animation-timeline: view()
Published on 2025-01-01 16:30:00 -
網頁視覺設計的好幫手color-mix()應用,了解 CSS 中有效提升VIS的好工具
Published on 2024-12-27 11:50:00 -
進階網頁設計應用,了解 CSS 中的數學函數
Published on 2024-12-26 14:00:00 -
網頁設計新語法Popover API,彈出式內容強化網站CX
Published on 2024-12-24 21:40:00 -
提升網頁設計CX就差這一個設定!CSS Smooth Scroll讓用戶取得過渡資訊。
Published on 2024-12-23 16:00:00 -
網站配色少不了的CSS屬性accent-color!大家的網頁設計就差這一個設定!
Published on 2024-12-23 12:00:00 -
網頁設計屬性fetchPriority您用過嗎?讓您可以控制資源載入優先權!提升用戶體驗的新用法!
Published on 2024-12-22 16:30:00