Chart.js下拉菜单调整图表尺寸后模糊问题求助

这个问题的核心在于Chart.js的Canvas元素有两个独立的尺寸：

• 一个是DOM元素的显示尺寸（由CSS控制）
• 另一个是内部绘图缓冲区的像素尺寸（由Canvas的width和height属性控制）

你通过CSS修改.grapharea和.myChart的尺寸时，只改变了显示尺寸，但没有同步更新Canvas的绘图缓冲区尺寸，导致图表被拉伸模糊。而浏览器窗口调整时，Chart.js的响应式机制会自动触发resize事件，同步这两个尺寸，所以图表又变得清晰。

解决方案：手动触发Chart.js的resize()方法 #

update()方法仅用于更新图表数据或样式，不会处理尺寸变化；而resize()方法会重新计算容器尺寸，同步Canvas的绘图缓冲区，并触发重绘，正好解决你的问题。

修改你的columnSizeSet函数，将myChartA.update()替换为myChartA.resize()即可：

function columnSizeSet() {
  const obj = document.setCol.sizeOfCol;
  const index = obj.selectedIndex;
  const width = obj.options[index].value;
  console.log('width', width);
  
  $('.grapharea').css('width', width);
  
  // 替换update()为resize()，触发尺寸同步与重绘
  myChartA.resize();
}

为什么responsive: true没自动生效？ #

responsive: true的作用是监听浏览器窗口的resize事件，当窗口尺寸变化时自动调整图表。但你是手动修改容器的CSS尺寸，这个操作不会触发窗口resize事件，所以Chart.js的响应式机制没有被激活，需要你手动调用resize()来触发尺寸同步逻辑。

额外优化（可选） #

如果你需要更精细的控制，可以手动同步Canvas的属性尺寸与容器尺寸，再调用update()，不过resize()方法已经封装了这个逻辑，更简洁：

function columnSizeSet() {
  const obj = document.setCol.sizeOfCol;
  const index = obj.selectedIndex;
  const width = obj.options[index].value;
  console.log('width', width);
  
  $('.grapharea').css('width', width);
  
  // 手动同步Canvas缓冲区尺寸
  const canvas = document.getElementById('myChartA');
  const container = document.querySelector('.grapharea');
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
  
  myChartA.update();
}

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