HTML5曲線圖表代碼
HTML5在圖表繪制方面的優(yōu)化使其成為我們現(xiàn)在最好的選擇。其中一個(gè)最有用的選項(xiàng)是可以使用canvas元素繪制曲線圖表。下面是一個(gè)使用HTML5和JavaScript代碼實(shí)現(xiàn)的曲線圖表。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Curve Chart</title>
<style>
canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="chart" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('chart');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var strokeWidth = 10;
var radius = (canvas.width / 2) - strokeWidth;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = strokeWidth;
context.strokeStyle = '#222';
context.stroke();
var data = [0.8, 0.5, 0.2];
var total = data.reduce(function(a, b) { return a + b; });
var currentAngle = -0.5 * Math.PI;
data.forEach(function(item) {
var sliceAngle = (2 * Math.PI * item) / total;
var halfSliceAngle = sliceAngle / 2;
context.beginPath();
context.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle, false);
context.lineTo(centerX, centerY);
context.closePath();
context.fillStyle = getRandomColor();
context.fill();
currentAngle += sliceAngle;
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i< 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>