如何移除ChartJS 2中点样式图例的边框及阴影？

嘿，在Chart.js 2.7.2版本中，确实没有专门的配置项直接控制图例点的边框和阴影，但我们可以通过自定义图例标签生成函数来搞定这个问题，这也是最可靠的方式：

方法：重写generateLabels函数 #

Chart.js 2.x允许我们通过legend.labels.generateLabels来自定义每个图例项的样式，我们可以在这个函数里覆盖边框和阴影的相关属性，把它们移除：

var chart = new Chart(ctx, {
  // 你的图表数据配置...
  options: {
    legend: {
      labels: {
        usePointStyle: true,
        generateLabels: function(chart) {
          // 获取默认生成的图例标签数组
          var defaultLabels = Chart.defaults.global.legend.labels.generateLabels(chart);
          
          // 遍历每个标签，修改样式属性
          return defaultLabels.map(label => {
            return {
              ...label,
              strokeStyle: 'transparent', // 将边框颜色设为透明
              lineWidth: 0, // 把边框宽度设为0
              shadowOffsetX: 0, // 取消X轴阴影偏移
              shadowOffsetY: 0, // 取消Y轴阴影偏移
              shadowBlur: 0, // 取消阴影模糊
              shadowColor: 'transparent' // 阴影颜色设为透明
            };
          });
        }
      }
    }
  }
});

原理说明 #

默认情况下，图例的点样式会继承图表中数据点的边框和阴影配置，但通过重写generateLabels，我们可以单独为图例点设置样式：

• strokeStyle和lineWidth控制边框，设为透明和0后就看不到边框了
• 四个shadow*属性控制阴影，全部设为0或透明就能移除阴影

这个方法在Chart.js 2.7.2版本中完全适用，不会影响图表其他部分的样式。

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