使用Web Worker时Chart.js图表模糊且响应式失效求助

一、图表模糊问题的解决 #

你已经通过在Chart配置中添加devicePixelRatio: window.devicePixelRatio解决了初始模糊问题，这是正确的做法——因为Offscreen Canvas运行在Web Worker中，无法直接获取主线程的设备像素比，必须手动传递该值，让Chart.js按照物理像素而非逻辑像素渲染，避免分辨率不足导致的模糊。

二、响应式失效问题修复 #

当前的resize逻辑仅传递容器的逻辑尺寸，且直接修改canvas宽高的方式不符合Chart.js的响应式机制，导致窗口变化时图表无法正确适配。以下是具体修复方案：

1. 主线程resize函数修改 #

将容器的逻辑尺寸转换为物理像素尺寸，并同步传递设备像素比：

function resize() {
  const dpr = window.devicePixelRatio || 1;
  // 计算物理像素尺寸 = 逻辑尺寸 × 设备像素比
  const physicalWidth = parentNode.clientWidth * dpr;
  const physicalHeight = parentNode.clientHeight * dpr;
  
  worker.postMessage({
    sizes: { 
      width: physicalWidth, 
      height: physicalHeight,
      dpr: dpr
    },
  });
}

2. Web Worker代码修改 #

移除手动修改canvas宽高的逻辑，改用Chart.js原生的resize方法，并同步更新设备像素比：

let chart: Chart | null;
onmessage = function (event) {
  const { canvas, config, data, sizes } = event.data;
  
  if (canvas && config && data) {
    // 初始化时传入主线程传递的设备像素比
    chart = new Chart(canvas, {
      type: "line",
      options: {
        ...config,
        devicePixelRatio: config.devicePixelRatio
      },
      data: {
        labels: data.map((row: { year: any }) => row.year),
        datasets: [
          {
            label: "Acquisitions by year",
            data: data.map((row: { count: any }) => row.count),
          },
        ],
      },
    });
  }
  
  if (sizes && chart) {
    // 更新设备像素比
    chart.options.devicePixelRatio = sizes.dpr;
    // 调用resize方法传入物理像素尺寸，Chart.js会自动处理canvas的实际宽高
    chart.resize(sizes.width, sizes.height);
  }
};

关键说明 #

• Web Worker中没有window对象，无法直接获取devicePixelRatio，必须始终从主线程传递该值，包括初始化和resize场景。
• Chart.js的resize方法会自动根据传入的物理像素尺寸调整canvas的实际宽高，无需手动修改，避免和Chart内部的尺寸管理逻辑冲突。
• 确保主线程传递的是物理像素尺寸，否则会导致图表再次出现模糊或尺寸不匹配的问题。

内容的提问来源于stack exchange，提问作者tlvi38