Chart.js自定义Dataset类导致拖拽插件失效问题求助

问题现象 #

通过自定义Dataset类生成的数据集，在Chart.js中数据显示正常，但拖拽功能异常：拖拽时数据起始位置会偏移至图表最左端。排查发现onDrag回调函数本该接收数组类型的value参数，失效时仅收到单个值。

问题根源 #

问题出在Dataset类的data初始化逻辑：

this.data = Array(xAxislabels.length).fill([]);

Array.fill([])会将同一个空数组的引用填充到数组的所有位置。当调用setData修改某一位置的数组时，表面上是修改单个元素，但实际上所有位置共享的是同一个数组引用。这种共享引用会导致Chart.js的dragData插件无法正确识别数据结构，进而在拖拽时传递单个值而非预期的数组。

修复方案 #

将data的初始化方式改为创建独立的空数组，避免引用共享：

// 替换原fill方式，为每个位置创建独立的空数组
this.data = Array.from({length: xAxislabels.length}, () => []);

修改后，每个位置的数组都是独立的引用，后续通过setData修改时不会影响其他位置，dragData插件也能正确识别数组类型的数值，恢复正常拖拽功能。

修改后的Dataset类代码 #

class Dataset {
  constructor(xAxislabels, label) {
    this.label = label;
    this.xAxisLabels = xAxislabels;
    // 修复：创建独立空数组，避免引用共享
    this.data = Array.from({length: xAxislabels.length}, () => []);
    this.fill = false;
    this.backgroundColor = [
      'rgba(153, 102, 255, 0.2)',
    ];
    this.borderColor = [
      'rgb(153, 102, 255)',
    ];
    this.borderSkipped = false;
    this.borderWidth = 1;
    this.pointHitRadius = 25;
    this.tension = 0.4;
    this.dragData = true;
    this.tooltip = {
      callbacks: {
        label: function(item) {
          if (!item.parsed._custom) {
            console.log("dynamic couldn't parse the item?");
            return;
          }
          const date = DATE.fromSeconds(item.parsed._custom.barStart / 1000).toLocaleString();
          const time_start = DATE.fromSeconds(item.parsed._custom.barStart / 1000).toLocaleString(
            DATE.TIME_24_SIMPLE
          );
          const time_stop = DATE.fromSeconds(item.parsed._custom.barEnd / 1000).toLocaleString(
            DATE.TIME_24_SIMPLE
          );
          return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`
        }
      }
    };
  }

  // Setter
  setData(xAxisLabel, data) {
    const pos = this.xAxisLabels.indexOf(xAxisLabel);
    console.log("pos: ", pos);
    this.data[pos] = data;
  }
}

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