Chart.js如何为特定数据集单独禁用默认标签

实现思路 #

要实现「水平总记录数折线不关联x轴分类标签、悬浮提示仅展示数值、柱状图x轴标签正常显示」的效果，核心做两处配置即可：

• 给Total Recordings折线数据集绑定独立的隐藏x轴，不和柱状图共用全局分类x轴，保证折线渲染为铺满绘图区的纯水平直线，完全不影响原x轴分类标签展示
• 自定义提示框回调逻辑，针对折线数据集单独定制提示内容，隐藏多余的x轴分类标题

完整配置代码 #

this.myBarChart = new Chart('myBarChart', {
  type: 'bar',
  data: {
    labels: ["Voice Control Mode", "Manual Mode", "Automatic Mode","Single Drive Mode","Dual Drive Mode"],
    datasets: [
      {
        type: 'bar',
        label: "Recordings",
        backgroundColor: "rgba(2,117,216,1)",
        borderColor: "rgba(2,117,216,1)",
        data: [this.data.voicecontrolmode, this.data.manualmode, this.data.automaticmode,this.data.singledrivemode,this.data.dualdrivemode],
        order:2
      },
      {
        type: 'line',
        data: [this.data.totalrecordings, this.data.totalrecordings, this.data.totalrecordings,this.data.totalrecordings,this.data.totalrecordings],
        label: 'Total Recordings',
        backgroundColor: "rgba(150,29,255,1)",
        borderColor: "rgba(150,29,255,1)",
        pointRadius:0,
        pointHoverRadius:0,
        order:1,
        // 绑定独立的隐藏x轴
        xAxisID: 'hiddenXAxis'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          // 控制提示框标题：悬浮到折线时不显示x轴分类名，柱状图保持默认展示
          title: (context) => {
            return context[0].dataset.label === 'Total Recordings' ? '' : context[0].label;
          },
          // 统一控制提示框文本格式
          label: (context) => {
            return `${context.dataset.label}: ${context.parsed.y}`;
          }
        }
      }
    },
    scales: {
      // 原柱状图使用的x轴，保留原有配置，分类标签正常显示
      xAxis: {
        ticks: {
          maxTicksLimit: 6
        }
      },
      // 折线专用隐藏x轴，不渲染任何轴线、刻度、标签
      hiddenXAxis: {
        type: 'category',
        display: false,
        // 点位数量和原x轴对齐，保证水平直线铺满整个图表宽度
        labels: Array(5).fill('')
      },
      yAxis: {
        ticks: {
          maxTicksLimit: 5
        }
      }
    }
  }
});

配置说明 #

• 独立隐藏x轴设置display: false后，不会在页面渲染任何可见内容，仅用于给折线提供定位基准，保证折线和柱状图x方向点位对齐，渲染为平直的水平参考线
• 提示框回调会自动识别当前悬浮的数据集：悬浮到柱状图时保持原有提示样式，显示x轴分类名+对应数值；悬浮到水平折线时，不显示多余分类标题，仅展示Total Recordings: 对应数值
• 原有柱状图的x轴分类标签完全不受影响，保持正常显示

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