CSS3 Canvas是一種流行的圖表技術，它使用HTML5 Canvas元素來繪制動態圖表。它可以輕松創建各種類型的圖表，例如線形圖，餅狀圖，柱形圖等。下面我們來了解一下如何在CSS3 Canvas中創建圖表。

/*Css代碼*/
.chart {
position: relative;
width: 500px;
height: 300px;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}

CSS代碼用于定義一個包含圖表的容器，并設置容器的位置和寬高屬性，然后通過絕對定位將Canvas元素插入到該容器中。接下來，我們需要編寫JavaScript代碼繪制圖表，示例代碼如下所示：

/*JavaScript代碼*/
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var data = [10, 20, 30, 40, 50];
var colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff"];
var total_value = data.reduce(function(sum, value){
return sum + value;
}, 0);
var start_angle = 0;
for (var i = 0; i< data.length; i++) {
var slice_angle = 2 * Math.PI * data[i] / total_value;
drawSlice(ctx, canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), start_angle, start_angle + slice_angle, colors[i]);
start_angle += slice_angle;
}
function drawSlice(ctx, centerX, centerY, radius, start_angle, end_angle, color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, start_angle, end_angle);
ctx.closePath();
ctx.fill();
}

上述JavaScript代碼使用canvas.getContext方法獲取Canvas上下文，然后使用Math庫和循環語句繪制餅狀圖。繪制函數drawSlice通過指定中心坐標、半徑、起始角度和結束角度來繪制圖表切片。由于所有餅狀圖的切片都必須繪制在一起，因此我們要確保它們以正常的角度加在一起。

在CSS3 Canvas中創建圖表的優點是靈活性和可定制性都非常高，同時使用它可以實現動畫效果和交互式功能。總的來說，CSS3 Canvas是一個非常有用的圖表技術，適用于各種不同的項目。