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
      }
    ]
  },
  options: {
    // plugins:,
    scales: {
      xAxis: {
        ticks: {
          maxTicksLimit: 6
        }
      },
      yAxis: {
        ticks: {
          maxTicksLimit: 5
        }
      }
    }
  }
});

我想删除标签:["语音控制模式"、"手动模式"、"自动模式"、"单驱模式"、"双驱模式"]仅用于折线图,以便总录制数只是一条直线,但当我将鼠标悬停在上面时,它应该只显示-总录制数:95(示例).对于条形图,标签仍应显示.enter image description here

推荐答案

您可以添加第二个偏移和显示设置为false的x轴,然后将直线映射到该x轴:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        type: 'line',
        data: [23, 23, 23, 23, 23, 23, ],
        borderColor: 'orange',
        xAxisID: 'x2'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label)
        }
      }
    },
    scales: {
      x: {},
      x2: {
        display: false,
        offset: false
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>

EDIT:
You can use a custom tooltip title callback for this, see updated live example above.

options: {
  plugins: {
    tooltip: {
      callbacks: {
        title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label)
      }
    }
  },
}

Angular相关问答推荐

角部炎问题

父母和子元素在17号角不保持同步

Angular:将服务注入非独立组件导致应用程序中断

选中/取消选中-复选框未正确返回TRUE或FALSE

NGX- colored颜色 Select 器安装出错

Primeng:安装ANGLE 16.2.0版本

Angular 组件存储,为什么我的效果可以';在http错误后不会被触发?

ngx-http-client 在 Angular 16 中已弃用

Angular 升级后 RXJS SwitchMap 无法与解析器一起正常工作

Angular 13 Sass 模块无法在编译中正确导入文件

无法卸载 angular-cli

res.json() 不是函数

Angular2 ngFor跳过第一个索引

使用 Angular2 将文件上传到 REST API

由router-outlet 创建时如何将css类应用于组件元素?

Angular 5 手动导入语言环境

Angularmaterial步进器:禁用标题导航

如何组合两个可观察到的结果?

Angular 5 测试:如何获取对子组件的引用

Angular 5 和material - 如何从 SnackBar 组件更改背景 colored颜色