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

在 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。现在应该完美解决了!

相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
lly2024061 小时前
Bootstrap 警告框
开发语言
2601_949146532 小时前
C语言语音通知接口接入教程:如何使用C语言直接调用语音预警API
c语言·开发语言
曹牧2 小时前
Spring Boot:如何测试Java Controller中的POST请求?
java·开发语言
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
KYGALYX2 小时前
服务异步通信
开发语言·后端·微服务·ruby
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
zmzb01032 小时前
C++课后习题训练记录Day98
开发语言·c++
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端