Chart.js在Django模板中重绘图表时尺寸偏移及截断问题求助

1. 固定Canvas尺寸，避免动态拉伸问题 #

不要依赖CSS直接控制Canvas宽高，优先通过标签属性或Chart配置锁定尺寸：

• 给Canvas标签设置固定的width和height属性：

  <canvas id="doughnut-chart" width="300" height="300"></canvas>
  

• 或者搭配容器固定CSS尺寸，在Chart配置中组合responsive和maintainAspectRatio：

  .chart-container {
    width: 300px;
    height: 300px;
    position: relative;
  }
  

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: true, // 保持固定比例，依赖容器尺寸
    // ...其他配置
  };
  

• 重绘前强制重置Canvas尺寸，清除累积的尺寸偏差：

  const canvas = document.getElementById('doughnut-chart');
  canvas.width = canvas.parentElement.offsetWidth;
  canvas.height = canvas.parentElement.offsetHeight;
  

2. 彻底销毁旧图表实例，清除残留状态 #

确保旧实例被完全销毁并释放引用，避免新旧状态冲突：

// 全局保存图表实例引用
let doughnutChart = null;

function renderChart(data) {
  // 销毁旧实例
  if (doughnutChart) {
    doughnutChart.destroy();
    doughnutChart = null; // 清空引用，避免内存泄漏
  }
  // 创建新实例
  doughnutChart = new Chart(document.getElementById('doughnut-chart'), {
    type: 'doughnut',
    data: data,
    options: chartOptions
  });
}

3. 调整图例布局，解决截断问题 #

通过配置图例位置和容器内边距，给图例足够显示空间：

const chartOptions = {
  // ...其他配置
  legend: {
    position: 'bottom', // 切换到底部，避免右侧空间不足
    fullWidth: true,
    labels: {
      boxWidth: 12, // 缩小图例图标宽度，节省空间
      padding: 8
    }
  },
  layout: {
    padding: {
      right: 15,
      bottom: 20 // 给底部图例留足够空间
    }
  }
};

4. 排查Django模板的DOM渲染问题 #

• 确保Canvas元素的ID唯一，避免在循环或动态渲染中出现重复ID，导致重绘时获取错误元素。
• 如果使用Django模板循环生成图表，给每个Canvas分配唯一ID（比如doughnut-chart-{{ item.id }}），并在JS中对应匹配。

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