在Wix Velo中使用Chart.js报错：Cannot read properties of null (reading 'style')

可能原因 #

1. DOM元素就绪时机不匹配：图表初始化代码执行时，目标自定义元素（#customElement10）还未完全挂载到DOM中；或者执行$item("#insightImage").hide()触发页面重排/重绘，导致图表实例试图访问已处于异常状态的DOM节点的style属性。
2. 重复器上下文的竞态条件：如果代码在重复器（Repeater）中执行，重复项的渲染周期与图表初始化逻辑不同步，再加上登录栏加载、元素隐藏这类操作干扰了DOM渲染顺序，就会偶发出现元素引用为null的情况。
3. 元素状态变更的连锁影响：隐藏图片或登录栏的操作可能间接改变了自定义元素的DOM层级或可见性，导致Chart.js内部无法正常获取元素的样式属性。

修复步骤 #

1. 等待自定义元素完全就绪后初始化图表 #

利用自定义元素的onReady事件，确保元素挂载完成后再创建ChartJSAPI实例：

$item('#customElement10').onReady(() => {
  chart1[index] = new ChartJSAPI($item('#customElement10'));
  chart1[index].customization = insight_cart_json.customization;
  chart1[index].data = insight_cart_json.data;
  // 图表初始化完成后再执行元素隐藏操作
  $item("#insightImage").hide();
});

2. 增加空值检查，避免访问null元素的属性 #

在初始化前先确认元素引用有效，防止因元素未加载导致报错：

const customElement = $item('#customElement10');
if (customElement) {
  chart1[index] = new ChartJSAPI(customElement);
  chart1[index].customization = insight_cart_json.customization;
  chart1[index].data = insight_cart_json.data;
}

3. 绑定到重复器的onItemReady事件（若使用重复器） #

如果图表在重复器中渲染，将初始化逻辑放在重复器的onItemReady回调里，确保每个重复项的元素都已完成渲染：

$w('#repeaterId').onItemReady(($item, itemData, index) => {
  const customElement = $item('#customElement10');
  customElement.onReady(() => {
    chart1[index] = new ChartJSAPI(customElement);
    chart1[index].customization = insight_cart_json.customization;
    chart1[index].data = insight_cart_json.data;
    $item("#insightImage").hide();
  });
});

4. 调整DOM操作的执行顺序 #

避免在图表初始化前执行触发页面重排的操作，把hide()这类操作放在图表初始化完成之后，或延迟执行：

// 初始化图表
const customElement = $item('#customElement10');
chart1[index] = new ChartJSAPI(customElement);
chart1[index].customization = insight_cart_json.customization;
chart1[index].data = insight_cart_json.data;

// 延迟执行隐藏操作，确保图表已渲染完成
setTimeout(() => {
  $item("#insightImage").hide();
}, 100);

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