jquery 如何隐藏图表工具提示的标题？

lpwwtiir 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(137)

我正在使用Chart JS来显示分组条形图，并尝试隐藏工具提示的标题
生成条形图的代码

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,
                }
            }]
        }
    }
});

字符串
在工具提示中，它显示标签巧克力，香草，草莓和我试图隐藏标签与以下
通过设置titlefontsize为0，但它不工作

tooltipTitleFontSize: 0

型
我已经尝试了与工具提示回调它禁用标签蓝色，红色，绿色，但我不需要

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

型
先帮我谢谢

jquery

来源：https://stackoverflow.com/questions/44632529/how-do-you-hide-the-title-of-a-chart-tooltip

3条答案

按热度按时间

e7arh2l61#

要隐藏工具提示的标题，需要在工具提示title * 的 * 回调函数上返回一个空函数，像这样...

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

字符串

赞(0）回复(0）举报 2023-08-04

xkftehaa2#

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

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

字符串
请参考文档以更好地理解它应该使用自定义回调函数来处理，并且它不是可以直接在选项中设置的配置。https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
我在另一个帖子中也提到过：https://stackoverflow.com/a/68033933/8578337

赞(0）回复(0）举报 2023-08-04

u4vypkhs3#

根据工具提示回调的Chart.js 4.3.1文档：
如果回调返回undefined，则将使用默认回调。要从工具提示中删除内容，回调应该返回一个空字符串。

{
    options: {
        plugins: {
            tooltip: {
                // ...other options
                callbacks: {
                    title: () => ''
                }
            }
        }
    }
}

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何隐藏图表工具提示的标题？

3条答案

相关问题

热门标签

最新问答