Function renderHeatmap

apps/chart-maker/chart-generator.js:815–922

(ctx, data, options)

// 渲染热力图（自定义实现）
function renderHeatmap(ctx, data, options) {
    // 清除Canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    // 设置尺寸和边距
    const margin = {
        top: 50,
        right: 30,
        bottom: 50,
        left: 60
    };
    
    const width = ctx.canvas.width - margin.left - margin.right;
    const height = ctx.canvas.height - margin.top - margin.bottom;
    
    // 获取数据
    const rows = data.labels;
    const columns = data.datasets.map(dataset => dataset.label);
    
    // 创建值矩阵
    const matrix = [];
    rows.forEach((_, rowIndex) => {
        const row = [];
        data.datasets.forEach(dataset => {
            row.push(dataset.data[rowIndex]);
        });
        matrix.push(row);
    });
    
    // 找出最大值和最小值
    const allValues = matrix.flat();
    const min = Math.min(...allValues);
    const max = Math.max(...allValues);
    
    // 绘制标题
    if (options.plugins && options.plugins.title && options.plugins.title.display) {
        ctx.textAlign = 'center';
        ctx.font = '18px Arial';
        ctx.fillStyle = '#333';
        ctx.fillText(options.plugins.title.text, ctx.canvas.width / 2, 25);
    }
    
    // 绘制单元格和标签
    const cellWidth = width / columns.length;
    const cellHeight = height / rows.length;
    
    // 行标签（Y轴）
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.font = '12px Arial';
    ctx.fillStyle = '#666';
    
    rows.forEach((label, i) => {
        const y = margin.top + i * cellHeight + cellHeight / 2;
        ctx.fillText(label, margin.left - 10, y);
    });
    
    // 列标签（X轴）