基于HTML5 Canvas与JavaScript实现动态条形图

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动态交互式条形图</title>  
</head>  
<body>  
    <canvas id="chartCanvas" width="600" height="400"></canvas>  
    <script src="chart.js"></script>  
</body>  
</html>

// 获取canvas元素和绘图上下文  
const canvas = document.getElementById('chartCanvas');  
const ctx = canvas.getContext('2d');  
  
// 定义数据  
const data = [12, 19, 3, 5, 2, 3];  
  
// 定义颜色  
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF6384', '#36A2EB'];  
  
// 定义条形的宽度和间距  
const barWidth = 50;  
const barSpacing = 10;  
  
// 计算画布上每个条形的位置  
const xPositions = [];  
for (let i = 0; i < data.length; i++) {  
    xPositions.push(i * (barWidth + barSpacing) + barWidth / 2);  
}  
  
// 绘制条形图  
function drawBarChart() {  
    // 清空画布  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  
  
    // 绘制每个条形  
    for (let i = 0; i < data.length; i++) {  
        const x = xPositions[i];  
        const y = canvas.height - data[i] * 20; // 假设每个单位数据对应20像素的高度  
        const height = data[i] * 20;  
  
        // 绘制条形  
        ctx.fillStyle = colors[i];  
        ctx.fillRect(x, y, barWidth, height);  
    }  
}  
  
// 初始绘制  
drawBarChart();  
  
// 假设我们有一个函数可以动态更新数据  
function updateData(newData) {  
    data = newData;  
    drawBarChart();  
}  
  
// 模拟数据更新  
setTimeout(() => {  
    updateData([5, 10, 15, 20, 12, 8]);  
}, 2000);