JavaScript实现动态数据可视化的示例详解

const data = [  
    { date: '2023-01-01', visits: 100 },  
    { date: '2023-01-02', visits: 120 },  
    // ... 更多数据  
];

<div id="chart"></div>

const canvas = document.getElementById('chart');  
const ctx = canvas.getContext('2d');  
  
// 设置图表尺寸  
canvas.width = 800;  
canvas.height = 400;  
  
// 绘制坐标轴  
function drawAxes() {  
    ctx.beginPath();  
    ctx.moveTo(0, canvas.height / 2);  
    ctx.lineTo(canvas.width, canvas.height / 2);  
    ctx.strokeStyle = 'black';  
    ctx.stroke();  
  
    ctx.beginPath();  
    ctx.moveTo(canvas.width / 2, 0);  
    ctx.lineTo(canvas.width / 2, canvas.height);  
    ctx.strokeStyle = 'black';  
    ctx.stroke();  
}  
  
// 绘制数据点  
function drawDataPoints(data) {  
    data.forEach(item => {  
        const x = canvas.width / 2 + (item.date - '2023-01-01').split('-').pop() * 50; // 根据日期计算x坐标  
        const y = canvas.height / 2 - item.visits * 2; // 根据访问量计算y坐标  
        ctx.beginPath();  
        ctx.arc(x, y, 5, 0, 2 * Math.PI);  
        ctx.fillStyle = 'blue';  
        ctx.fill();  
    });  
}  
  
// 绘制图表  
function drawChart(data) {  
    drawAxes();  
    drawDataPoints(data);  
}  
  
// 调用函数绘制图表  
drawChart(data);

// 获取canvas元素，准备在其上进行绘图  
const canvas = document.getElementById('chart');  
  
// 获取2D渲染上下文，用于绘制图形  
const ctx = canvas.getContext('2d');  
  
// 设置图表的宽度和高度  
canvas.width = 800;  
canvas.height = 400;  
  
// 绘制坐标轴的函数  
function drawAxes() {  
    // 开始绘制路径  
    ctx.beginPath();  
    // 绘制X轴，从画布中间开始，水平向右延伸  
    ctx.moveTo(canvas.width / 2, 0);  
    ctx.lineTo(canvas.width / 2, canvas.height);  
    // 设置线条颜色为黑色  
    ctx.strokeStyle = 'black';  
    // 绘制线条  
    ctx.stroke();  
  
    // 开始绘制Y轴，从画布中间开始，垂直向下延伸  
    ctx.beginPath();  
    ctx.moveTo(0, canvas.height / 2);  
    ctx.lineTo(canvas.width, canvas.height / 2);  
    // 绘制线条  
    ctx.stroke();  
}  
  
// 绘制数据点的函数  
function drawDataPoints(data) {  
    data.forEach(item => {  
        // 根据日期计算数据点在X轴上的位置  
        const x = canvas.width / 2 + (item.date - '2023-01-01').split('-').pop() * 50;  
        // 根据访问量计算数据点在Y轴上的位置  
        const y = canvas.height / 2 - item.visits * 2;  
  
        // 开始绘制圆形数据点  
        ctx.beginPath();  
        ctx.arc(x, y, 5, 0, 2 * Math.PI);  
        // 设置填充颜色为蓝色  
        ctx.fillStyle = 'blue';  
        // 填充圆形  
        ctx.fill();  
        // 关闭路径  
        ctx.closePath();  
    });  
}  
  
// 绘制图表的函数  
function drawChart(data) {  
    // 绘制坐标轴  
    drawAxes();  
    // 绘制数据点  
    drawDataPoints(data);  
}  
  
// 调用函数绘制图表  
drawChart(data);  
  
// 图表样式设置部分  
  
// 设置坐标轴样式  
ctx.lineWidth = 2; // 设置坐标轴线宽  
ctx.strokeStyle = '#333'; // 设置坐标轴颜色  
  
// 设置数据点样式  
ctx.fillStyle = '#66b3ff'; // 设置数据点填充颜色  
ctx.strokeStyle = '#333'; // 设置数据点边框颜色  
ctx.lineWidth = 2; // 设置数据点边框线宽  
  
// 设置图表标题  
ctx.font = '20px Arial'; // 设置字体大小和样式  
ctx.fillStyle = '#333'; // 设置标题文字颜色  
ctx.fillText('User Visits Over Time', canvas.width / 2, 20); // 在画布顶部中央绘制标题  
  
// 设置图例  
ctx.fillStyle = '#66b3ff'; // 设置图例颜色  
ctx.fillRect(canvas.width - 100, canvas.height - 30, 10, 10); // 在画布右下角绘制一个小的方形图例  
ctx.fillText('100 Visits', canvas.width - 80, canvas.height - 25); // 在图例旁边标注访问量