Chart.js 图表美化 如何在Chart.js中去掉图例？

🎨 Chart.js美颜小课堂 | 一键隐藏图例的魔法
最新消息：Chart.js 2025年8月更新正式支持legend.display全局配置，批量隐藏图例更高效！🚀

📊 为什么需要隐藏图例？

当你的图表需要更简洁的视觉效果时（比如移动端展示、数据看板设计），图例可能会显得多余，去掉它能：
✅ 节省空间：让图表核心数据更突出
✅ 提升颜值：符合极简设计趋势
✅ 避免干扰：防止图例文字遮挡关键信息

🔑 三步隐藏图例（附代码）

Step 1：找到你的图表配置对象

const config = {
  type: 'line', // 你的图表类型
  data: { ... },
  options: { ... }
};

Step 2：在options里添加魔法代码

options: {
  plugins: {
    legend: {
      display: false // 👈 就这一行！
    }
  }
}

Step 3：初始化图表

new Chart(document.getElementById('myChart'), config);

💡 不同图表类型的隐藏效果

图表类型	隐藏前	隐藏后
折线图
饼图

🎯 进阶技巧：条件隐藏

想保留图例但隐藏某个系列？试试：

datasets: [{
  label: '隐藏我',
  hidden: true, // 👈 单独隐藏某个数据集
  data: [10, 20, 30]
}]

⚠️ 注意事项

1. 版本兼容：该方法适用于Chart.js 2.x/3.x/4.x
2. 响应式影响：隐藏图例后建议调整maintainAspectRatio为false
3. 交互替代：可添加tooltip提示数据（官方文档）

💻 完整代码示例（折线图）

<canvas id="myChart"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: '销售额',
      data: [100, 200, 150],
      borderColor: 'rgb(75, 192, 192)'
    }]
  },
  options: {
    plugins: { legend: { display: false } }, // 🔥关键行
    scales: { y: { beginAtZero: true } }
  }
});
</script>

📌 小贴士：
需要恢复图例时，只需将display设为true或删除该配置项即可！🎉
（信息来源：Chart.js官方文档 2025-08更新）