ChartJS实现带发光阴影效果的点样式 解决激活点光晕缺失问题

问题 #

需要复现设计稿中激活状态数据点的外发光效果，初始写法无法达到目标样式要求。

初始错误实现代码：

dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
dataset._meta[metaIndex].data[index]._model.pointRadius = 7;
dataset._meta[metaIndex].data[index]._model.borderColor = '#007cff';
dataset._meta[metaIndex].data[index]._model.pointBackgroundColor = '#FFFFFF';
dataset._meta[metaIndex].data[index]._model.pointBorderWidth = 10;
dataset._meta[metaIndex].data[index]._model.pointBorderColor = 'rgba(1, 124, 251, 0.2)';
dataset._meta[metaIndex].data[index]._model.pointHoverRadius = 5;

初始实现效果不符合预期：

解决方法 #

1. 修正激活点的属性配置 #

去掉属性名中冗余的point前缀，调整边框宽度参数：

dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
dataset._meta[metaIndex].data[index]._model.radius = 7;
dataset._meta[metaIndex].data[index]._model.borderColor = '#007CFF';
dataset._meta[metaIndex].data[index]._model.backgroundColor = '#FFFFFF';
dataset._meta[metaIndex].data[index]._model.borderWidth = 3;

2. 全局配置点元素样式 #

在图表初始化的options项中配置点的默认态、悬浮激活态样式，通过大宽度半透明边框模拟光晕效果：

const options = {
  elements: {
    point: {
      hoverRadius: 5,
      hoverBackgroundColor: '#FFFFFF',
      hoverBorderColor: 'rgba(1, 124, 251, 0.2)',
      hoverBorderWidth: 15,
      radius: 4,
      hitRadius: 5,
    },
  },
};

实现要点 #

• 外发光效果不需要额外引入阴影属性，直接给悬浮状态的点设置10-20px宽度的低透明度同色边框，就能自然模拟光晕扩散效果
• ChartJS中点元素的基础属性（半径、背景色、边框色、边框宽度）不需要加point前缀，错误的属性名会导致样式配置失效
• 光晕效果只在hover/激活状态下生效，不要给普通状态的点加透明宽边框，避免默认态样式异常

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