chart.js 雷达图顶部标题怎样消除？

亮子AI2025-12-10 8:22

在 Chart.js 雷达图（radar chart）中，你看到的"顶部显示的 label"其实不是标题（title） ，而是 图例（legend）！

很多人都把这两个搞混了：

标题（title）：大字写在图表正上方，比如"2024年能力值分析"
图例（legend）：默认显示在图表顶部的那几个彩色小方块 + 数据集名称（比如 "销售部" "技术部"）

你想移除的几乎一定是 图例（legend），不是标题。

正确移除雷达图顶部 label（图例）的方法：

javascript 复制代码

options: {
  plugins: {
    legend: {
      display: false   // 这一行就够了！彻底隐藏图例
    }
    // title: { ... }  // 如果你本来就没有设置标题，这行可以不写
  }
}

完整雷达图示例（隐藏图例）：

javascript 复制代码

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['攻击', '防御', '速度', '智力', '运气'],
    datasets: [{
      label: '玩家A',        // 这个 label 就是图例里显示的文字
      data: [90, 70, 85, 95, 60],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 2
    }, {
      label: '玩家B',
      data: [70, 90, 60, 80, 95],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false   // 关键：隐藏整个图例（顶部那些 label）
      }
      // 如果你还想连标题一起隐藏，可以再加：
      // title: { display: false }
    },
    scales: {
      r: {
        beginAtZero: true
      }
    }
  }
});

只要加上这三行，雷达图顶部所有 label（图例）就彻底消失了：

javascript 复制代码

plugins: {
  legend: {
    display: false
  }
}

99% 的情况都是忘了关 legend，而不是 title。现在应该完美解决了！