如何让Chart.js脚本修改的元素颜色持久化而非立即恢复默认

问题根源在于你直接修改了图表元素的临时配置，Chart.js每次渲染都会从原始dataset读取样式，所以修改element.options的颜色会被立即覆盖。要让颜色持久，必须直接修改dataset本身的颜色配置，同时维护选中状态来管理最多2个对比项。

具体实现方案 #

1. 维护选中状态与原始颜色
   先定义全局变量，跟踪选中的dataset索引，并保存每个dataset的初始颜色，用于取消选中时恢复：

   let selectedDatasets = [];
   // 初始化时保存每个dataset的原始颜色
   const originalColors = data.datasets.map(ds => ({
     backgroundColor: ds.backgroundColor,
     borderColor: ds.borderColor
   }));
   

2. 重写onClick事件逻辑
   修改点击事件处理逻辑，直接操作dataset的颜色配置，并调用图表更新方法触发渲染：

   onClick: function(e) {
     const elements = myChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
     if (elements.length === 0) return;
   
     const cluster = elements[0];
     const idx = cluster.datasetIndex;
     const dataset = myChart.data.datasets[idx];
     const isSelected = selectedDatasets.includes(idx);
   
     if (isSelected) {
       // 取消选中：恢复原始颜色
       dataset.backgroundColor = originalColors[idx].backgroundColor;
       dataset.borderColor = originalColors[idx].borderColor;
       // 从选中列表移除
       selectedDatasets = selectedDatasets.filter(id => id !== idx);
       // 隐藏对应详情（按需实现）
       const info = document.querySelector(".details");
       hide_details(info, idx);
     } else {
       // 检查是否已达最多选中数（2个）
       if (selectedDatasets.length >= 2) {
         // 取消最早选中的项
         const oldestIdx = selectedDatasets.shift();
         myChart.data.datasets[oldestIdx].backgroundColor = originalColors[oldestIdx].backgroundColor;
         myChart.data.datasets[oldestIdx].borderColor = originalColors[oldestIdx].borderColor;
         hide_details(document.querySelector(".details"), oldestIdx);
       }
       // 设置高亮颜色
       dataset.backgroundColor = "#3376699f";
       dataset.borderColor = "#ff0000";
       selectedDatasets.push(idx);
       // 显示详情
       const info = document.querySelector(".details");
       show_details(info, idx);
     }
   
     // 关键：调用update触发图表重新渲染，让颜色修改生效并持久
     myChart.update();
   }
   

核心逻辑说明 #

• 用selectedDatasets数组跟踪当前选中的气泡，严格控制最多2个对比项
• originalColors存储初始颜色，确保取消选中时能准确恢复样式
• 直接修改dataset的backgroundColor和borderColor（而非临时元素配置），这是Chart.js渲染时的数据源
• 每次修改后必须调用myChart.update()，触发图表重新渲染，让颜色修改持久生效

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