我想在工具提示中隐藏标签，因为它显示未定义

Question

我正在使用 chart.js 来显示折线图。如何隐藏 chart.js 折线图的工具提示标签？工具提示中的标签显示 undefined 所以我想隐藏标签（请看截图）？

也许有一种修改工具提示的方法，我可以在工具提示中只显示图例值？我的代码如下：

  myLine = new Chart(ctx).Line(lineChartData, {
      type: 'line',
      responsive: true,
      scaleShowGridLines : false,
      bezierCurve : false,
      animationEasing: "linear",
      tooltipEvents: ["mousemove", "touchstart", "touchmove"],
      showTooltips: true,
      scaleLineColor: "rgba(0,0,0,.8)",
  });

Answer 1

只需在您的选项中将 tooltipTitleFontSize 设置为 0。

预览

脚本

myLine = new Chart(ctx).Line(lineChartData, {
    ...
    tooltipTitleFontSize: 0
});

Answer 2

接受的答案在chart.js的新版本中不起作用，正如Aman在评论中所说，你现在可以使用的是：

tooltips: { titleFontSize: 0 }

示例：

var bar_chart = document.getElementById('bar_canvas').getContext('2d');
window.myBar = new Chart(bar_chart, {
    type: 'bar',
    data: bar_chart_data,
    options: {
        tooltips: {
            titleFontSize: 0,
            bodyFontSize: 14,
        }
    }
});

Answer 3

我知道我来晚了，但我想加上这个还是有好处的。

检查这个：https://whosebug.com/a/44632748/12061669

它使用一个函数来隐藏标题：

options:{
   tooltips:{
     callbacks:{
        title: ()=>{}
     }
   }
}

Answer 4

将标题的字体大小设置为零 并不理想 因为您仍然会在工具提示顶部看到一个（丑陋的）额外的 space，就像标题一样线路仍然存在 - 老实说，这正是您所期望的。

相反，我使用了 Yumin Gui 的回答，但必须 return null 才能正常工作： `

tooltips: {
  callbacks: {
    title: () => null,
  },
},

结果完全如饼图（其默认工具提示中没有标题）。

Answer 5

要隐藏工具提示 title/label，应将其添加到该图表的选项对象中，如下所示：

options: {
   plugins: {
      tooltip: {
         callbacks: {
            title : () => null // or function () { return null; }
         }
      }
   }
}

请参考文档以更好地理解它应该使用自定义回调函数来处理，而不是可以直接在选项中设置的配置。

我想在工具提示中隐藏标签，因为它显示未定义

I want to hide the label in a tooltip because it shows undefined

linechart

chart.js