Wix Velo中使用Chart.js重复调用报错，如何销毁已有Chart实例？

我按照Wix Velo的Chart.js自定义元素教程绘制图表，使用以下代码创建图表：

async function chart(data_chart){
    var chart = new ChartJSAPI($w('#customElement1'));
    chart.customization = data_chart.customization;
    chart.data = data_chart.data;
}

首次调用正常，但重复调用该函数时出现报错：

chart.js:5552 Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused.

尝试参考常规Chart.js销毁方案，发现ChartJSAPI实例没有destroy()方法，不知道如何销毁已有实例。

解决方案1：全局保存实例，创建前重置 #

Wix的ChartJSAPI封装了Chart.js，提供了reset()方法用于清空当前图表、释放Canvas资源。你需要将图表实例保存在全局作用域，每次调用函数前先检查并重置已有实例：

// 全局变量存储图表实例
let chartInstance = null;

async function chart(data_chart){
    // 若存在已有实例，先重置释放资源
    if (chartInstance) {
        await chartInstance.reset();
    }
    // 创建新实例并赋值
    chartInstance = new ChartJSAPI($w('#customElement1'));
    chartInstance.customization = data_chart.customization;
    chartInstance.data = data_chart.data;
}

解决方案2：复用实例直接更新数据 #

如果只是更新图表的数据或配置，无需每次新建实例，直接修改已有实例的属性即可从根本上避免Canvas占用问题：

// 全局变量存储图表实例
let chartInstance = null;

async function chart(data_chart){
    // 仅首次调用时创建实例
    if (!chartInstance) {
        chartInstance = new ChartJSAPI($w('#customElement1'));
    }
    // 直接更新配置与数据
    chartInstance.customization = data_chart.customization;
    chartInstance.data = data_chart.data;
}

补充说明 #

Wix的ChartJSAPI隐藏了原生Chart.js的destroy()方法，改用reset()实现资源释放。如果reset()不生效，也可以尝试先清空自定义元素内容再重建，但上述两种方案是更高效的官方推荐方式。

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