一、现代数据可视化技术选型

主流可视化方案对比：

• SVG方案：适合简单图表，DOM元素多性能差
• Canvas方案：高性能渲染，适合动态数据
• WebGL方案：3D可视化，学习曲线陡峭
• 混合渲染：Canvas+WebGL结合方案

二、Canvas核心渲染引擎

1. 基础架构设计

class ChartEngine {
    constructor(container, width, height) {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.container = container;
        this.resize(width, height);
        this.layers = [];
        this.animationId = null;
    }

    resize(width, height) {
        this.canvas.width = width * devicePixelRatio;
        this.canvas.height = height * devicePixelRatio;
        this.canvas.style.width = `${width}px`;
        this.canvas.style.height = `${height}px`;
        this.ctx.scale(devicePixelRatio, devicePixelRatio);
    }

    addLayer(layer) {
        this.layers.push(layer);
    }

    render() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.layers.forEach(layer => layer.draw(this.ctx));
        this.animationId = requestAnimationFrame(() => this.render());
    }

    destroy() {
        cancelAnimationFrame(this.animationId);
    }
}

2. 动态柱状图实现

class BarChart {
    constructor(data, options) {
        this.data = data;
        this.options = {
            colors: ['#4e79a7', '#f28e2b', '#e15759'],
            ...options
        };
        this.currentValues = data.map(() => 0);
    }

    draw(ctx) {
        const { width, height } = ctx.canvas;
        const barWidth = width / this.data.length * 0.6;
        const maxValue = Math.max(...this.data.map(d => d.value));
        
        // 动画过渡
        this.currentValues = this.currentValues.map((curr, i) => {
            return curr + (this.data[i].value - curr) * 0.1;
        });

        this.currentValues.forEach((value, i) => {
            const barHeight = (value / maxValue) * height * 0.8;
            const x = i * (width / this.data.length) + width * 0.1;
            const y = height - barHeight;
            
            ctx.fillStyle = this.options.colors[i % this.options.colors.length];
            ctx.fillRect(x, y, barWidth, barHeight);
            
            // 绘制数值标签
            ctx.fillStyle = '#333';
            ctx.textAlign = 'center';
            ctx.fillText(value.toFixed(0), x + barWidth/2, y - 10);
        });
    }
}

三、高性能优化策略

1. 离屏Canvas缓存

class CachedLayer {
    constructor(drawFunc) {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.drawFunc = drawFunc;
        this.dirty = true;
    }

    update() {
        this.dirty = true;
    }

    draw(ctx) {
        if (this.dirty) {
            this.drawFunc(this.ctx);
            this.dirty = false;
        }
        ctx.drawImage(this.canvas, 0, 0);
    }
}

2. WebWorker数据处理

// 主线程
const worker = new Worker('data-processor.js');
worker.postMessage({ action: 'process', data: rawData });
worker.onmessage = (e) => {
    if (e.data.type === 'update') {
        chart.updateData(e.data.payload);
    }
};

// Worker线程 (data-processor.js)
self.onmessage = function(e) {
    if (e.data.action === 'process') {
        // 复杂数据处理
        const result = heavyProcessing(e.data.data);
        
        // 分批发送结果
        for (let i = 0; i < result.length; i += 1000) {
            self.postMessage({
                type: 'update',
                payload: result.slice(i, i + 1000)
            });
        }
    }
};

四、动态数据对接方案

1. WebSocket实时数据

class DataFeed {
    constructor(url, callback) {
        this.socket = new WebSocket(url);
        this.callback = callback;
        this.buffer = [];
        this.timer = null;
        
        this.socket.onmessage = (event) => {
            this.buffer.push(JSON.parse(event.data));
            
            if (!this.timer) {
                this.timer = setTimeout(() => {
                    this.callback(this.buffer);
                    this.buffer = [];
                    this.timer = null;
                }, 100);
            }
        };
    }
}

2. 大数据分片加载

async function loadBigData(url, chunkSize = 10000) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    let partialData = '';
    let count = 0;
    
    while(true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        partialData += new TextDecoder().decode(value);
        const lines = partialData.split('n');
        partialData = lines.pop();
        
        const dataChunk = lines.slice(0, chunkSize)
            .filter(line => line.trim())
            .map(JSON.parse);
        
        if (dataChunk.length > 0) {
            renderPartialData(dataChunk);
            count += dataChunk.length;
            console.log(`已加载 ${count} 条数据`);
        }
    }
}

五、3D可视化进阶

1. WebGL基础集成

class GLChart {
    constructor(canvas) {
        this.gl = canvas.getContext('webgl') || 
                 canvas.getContext('experimental-webgl');
        
        // 初始化着色器程序
        this.program = this.createProgram(
            vertexShaderSource, 
            fragmentShaderSource
        );
        
        // 创建缓冲区
        this.positionBuffer = this.gl.createBuffer();
    }

    createProgram(vsSource, fsSource) {
        const vertexShader = this.compileShader(
            this.gl.VERTEX_SHADER, vsSource
        );
        const fragmentShader = this.compileShader(
            this.gl.FRAGMENT_SHADER, fsSource
        );
        
        const program = this.gl.createProgram();
        this.gl.attachShader(program, vertexShader);
        this.gl.attachShader(program, fragmentShader);
        this.gl.linkProgram(program);
        
        return program;
    }
}