ChartJS 如何禁用特定数据集图表默认标签

tcbh2hod 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(155)

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

chart.js

来源：https://stackoverflow.com/questions/72797247/how-to-disable-default-label-for-a-particular-dataset-chart-js

1条答案

按热度按时间

nlejzf6q1#

您可以添加第二个x轴，并将offset和display设置为false，然后将线Map到该x轴：
第一个

编辑：

您可以使用自定义的工具提示标题回调，请参阅上面更新的示例。

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

赞(0）回复(0）举报 2022-11-07

我来回答

ChartJS 如何禁用特定数据集图表默认标签

1条答案

相关问题

热门标签

最新问答