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 分钟前
python量化自定义周期 K 线合成
java·开发语言·数据库·python·金融
IT召唤狮15 分钟前
开源企业级零信任项目Pangolin,零信任能挡住PHP核弹漏洞吗?
开发语言·开源·php
知已难寻16 分钟前
03 · OpenStack的计算管理 Nova
运维·服务器·开发语言·云原生·云计算·openstack·开源软件
Rover Ramble20 分钟前
C++ 用互斥锁实现读写锁
开发语言·c++
码流子1 小时前
移动收费怎么做?手持终端+App+收费中心的架构实践
java·开发语言·架构
moshuying1 小时前
网购能买Token了!
前端
雪落漂泊1 小时前
C++算法 滑动窗口篇(下)
开发语言·c++
h_65432101 小时前
echarts实现柱状图加一条横线
前端·echarts
云创智城-yuncitys2 小时前
YunParking 4.0:JDK 17 与 Spring Boot 3.2 的停车云升级
java·开发语言·spring boot
风骏时光牛马2 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端