如何隐藏图表工具提示的标题? [英] How do you hide the title of a chart tooltip?

问题描述

我正在使用图表js显示分组的条形图，并尝试隐藏工具提示的标题

I'm using chart js to show grouped bar chart and try to hide the title of the tooltip

生成条的代码

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
        {
            label: "Blue",
            backgroundColor: "blue",
            data: [3,7,4]
        },
        {
            label: "Red",
            backgroundColor: "red",
            data: [4,3,5]
        },
        {
            label: "Green",
            backgroundColor: "green",
            data: [7,2,6]
        }
    ]
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        barValueSpacing: 20,
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                }
            }]
        }
    }
});

在工具提示中，它显示了巧克力"，香草"，草莓"标签，而我尝试使用以下方法隐藏该标签

In the tooltip it showing the labels Chocolate,Vanilla,Strawberry and i have tried to hide the label with following

通过将titlefontsize设置为0，但不起作用

by setting the titlefontsize to 0 but it doesnt work

tooltipTitleFontSize: 0

并且我尝试使用工具提示回调来禁用标签蓝色，红色，绿色，但是我不需要它

and i have tried with the tooltip callbacks it disables the label blue,red,green but i wont need that

 tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }

请提前帮助我

推荐答案

要隐藏工具提示的标题，您需要在工具提示title 的回调中返回一个空函数，如下所示...

To hide the title of tooltip, you need to return an empty function on tooltips title­'s callback, like so ...

options: {
   tooltips: {
      callbacks: {
         title: function() {}
      }
   },
   ...
}

这篇关于如何隐藏图表工具提示的标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！