开启responsive的ChartJS图表拖拽时宽高被设为0，是什么原因及如何解决？

Chart.js的responsive特性会实时监听图表直接父容器的尺寸，拖拽过程中vue-draggable-next会将被拖拽元素临时脱离原父容器、放入全局拖拽占位层，此时原父容器尺寸瞬间变为0，Chart.js检测到后就会将canvas的宽高同步设置为0，拖拽结束元素归位后也不会自动触发重绘恢复尺寸。

方案1：给图表父容器设置最小宽高（最简方案，无需修改逻辑） #

直接给包裹图表组件的拖拽项外层容器添加固定的min-width和min-height样式，保证即使拖拽过程中元素临时脱离，原父容器也有最小尺寸，Chart.js不会读取到0值。
示例代码：

<template>
  <!-- 拖拽项外层容器，直接加最小宽高样式即可 -->
  <div class="draggable-chart-item" style="min-width: 380px; min-height: 280px;">
    <VueChart3 :options="chartOptions" :data="chartData" />
  </div>
</template>

方案2：关闭自动宽高比维持，手动接管容器尺寸 #

在图表配置中关闭maintainAspectRatio参数，同时给图表外层套一个自定义尺寸容器，自行控制容器尺寸，避免Chart.js完全依赖父容器实时尺寸触发归零逻辑。
示例配置：

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false, // 关闭默认宽高比自动计算
  // 其余图表配置项
}

方案3：拖拽结束后手动触发图表重绘 #

在vue-draggable-next的@end事件回调中调用图表实例的update()方法，强制拖拽结束后重新读取容器尺寸渲染。
示例代码：

<template>
  <VueDraggableNext @end="handleDragEnd">
    <!-- 拖拽项内容 -->
  </VueDraggableNext>
</template>

<script setup>
// 提前获取所有图表实例存到数组中
const chartInstances = ref([])

const handleDragEnd = () => {
  chartInstances.value.forEach(chart => chart?.update())
}
</script>

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