嘿，这个小需求完全不用折腾HTML/CSS，Chart.js本身就有现成的配置方案，两种方法任你选：

方法一：简单全局配置（推荐） #

Chart.js的图例标记默认是矩形，核心原因是boxWidth（图例标记的宽度）默认值是40，而高度是自动匹配文字行高的。只要把boxWidth的值调整为和标记高度一致，就能得到正方形。

默认情况下，标记高度和字体大小（fontSize）的行高匹配，你可以直接把boxWidth设为和fontSize相近的值，比如默认fontSize是12，那设boxWidth: 14就刚好是正方形（行高默认是1.2，12*1.2=14.4）。具体代码如下：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar', // 替换成你的图表类型
  data: {
    // 你的数据配置
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '数据集1',
      data: [10, 20, 30],
      backgroundColor: '#ff6384'
    }]
  },
  options: {
    legend: {
      labels: {
        boxWidth: 14, // 调整这个值来控制正方形的大小
        fontSize: 12 // 如果修改了字体大小，对应调整boxWidth即可
      }
    }
  }
});

方法二：自定义图例标记（更灵活） #

如果需要对每个图例标记做更精细的控制（比如不同系列用不同大小的正方形），可以用generateLabels函数手动修改每个标记的宽高：

options: {
  legend: {
    labels: {
      generateLabels: function(chart) {
        // 获取默认的图例配置
        const defaultLabels = Chart.defaults.global.legend.labels.generateLabels(chart);
        // 遍历修改每个标记的宽高为相同值
        return defaultLabels.map(label => ({
          ...label,
          width: 16,
          height: 16
        }));
      }
    }
  }
}

这两种方法都完全基于Chart.js库本身实现，不用额外写CSS，完美满足你的需求～

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