如何在Chart.js中将图例的点样式修改为菱形

基础实现方法 #

Chart.js 内置支持菱形点样式，只需修改图例配置即可生效：

1. 开启usePointStyle配置，让图例使用点样式而非默认的色块
2. 将pointStyle参数设置为rectRot（即旋转45度的矩形，对应菱形样式）

3.x / 4.x 版本配置示例 #

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: '数据系列1',
      data: [10, 20, 15, 25, 30],
      borderColor: '#3b82f6',
      backgroundColor: '#3b82f6',
      // 可选：单个数据集单独配置点样式
      // pointStyle: 'rectRot'
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          usePointStyle: true,
          // 全局配置所有图例点为菱形
          pointStyle: 'rectRot',
          // 调整菱形显示大小
          pointStyleWidth: 12,
          padding: 15
        }
      }
    }
  }
})

2.x 版本配置示例 #

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: data,
  options: {
    legend: {
      labels: {
        usePointStyle: true,
        pointStyle: 'rectRot'
      }
    }
  }
})

进阶自定义样式 #

如果需要调整菱形的边框、圆角等特殊效果，可通过generateLabels回调自定义图例项：

options: {
  plugins: {
    legend: {
      labels: {
        generateLabels: function(chart) {
          const labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
          labels.forEach(label => {
            // 统一修改所有图例项的样式
            label.pointStyle = 'rectRot';
            label.borderWidth = 2;
            label.borderColor = '#000';
          });
          return labels;
        }
      }
    }
  }
}

注意事项 #

• 柱状图、饼图等默认无数据点的图表类型，必须显式配置pointStyle才会生效
• 如果需要不同数据集显示不同的图例样式，可在对应数据集下单独配置pointStyle属性

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