我正在使用ChartJS库创建图表。在工具提示中,我显示了我创建的数据集中的数据值。如果图表类型为 * 圆环图 *,则它适用于case。否则,它不适用于case或 * 条形图 * 或 * 水平条形图 *。无论我做什么,它都会显示带有标签的数据。我的天啊
我的天啊
我所要做的就是删除条形图工具提示中显示的标签。第一个
zwghvu4y1#
只需使用title选项和一个空值。如下所示:
title
callbacks: { title: function(tooltipItems, data) { return ''; }, label: function(tooltipItem, data) { var datasetLabel = ''; var label = data.labels[tooltipItem.index]; return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; } }
请参阅updated jsfiddle
ht4b089n2#
这是如何完成它
tooltip: { enabled: true, displayColors:false, callbacks: { label:(tooltipItem)=>{ return tooltipItem.parsed; }, } },
zzoitvuj3#
这应该适用于ChartJS 3.8.0的最新版本:
tooltip: { callbacks: { title: function (tooltipItem) { return ''; }, label: function (tooltipItem) { var tooltipText = ''; if (tooltipItem.dataset.data[tooltipItem.dataIndex] != null) tooltipText = tooltipItem.dataset.data[tooltipItem.dataIndex]!.toString(); return tooltipText; } } }
piztneat4#
作为pumpkinzzz答案的替代方法,如果您希望ONLY显示标签名称,则可以采用以下方法。将标题留空,并将字符串返回给label属性。这是因为工具提示的标签颜色是在该属性下定义的。虽然这看起来没有必要,但如果您的标签包含图表数据(全部在一个字符串下),则默认情况下,工具提示会显示两次数据。如果您希望避免这种情况,下面的代码可能会有所帮助。
label
title: function(tooltipItems, data) { return ''; }, label: function(tooltipItem, data) { return data.labels[tooltipItem.index].toString(); //Some IDEs throw an error if you don't cast to a string }
yzxexxkh5#
最新版本的Chart.js(3.6.0)
plugins: { tooltip: { yAlign: 'top', callbacks: { label: function(tooltipItem) { return tooltipItem.dataset.data; } } }, }
5条答案
按热度按时间zwghvu4y1#
只需使用
title
选项和一个空值。如下所示:请参阅updated jsfiddle
ht4b089n2#
这是如何完成它
zzoitvuj3#
这应该适用于ChartJS 3.8.0的最新版本:
piztneat4#
作为pumpkinzzz答案的替代方法,如果您希望ONLY显示标签名称,则可以采用以下方法。将标题留空,并将字符串返回给
label
属性。这是因为工具提示的标签颜色是在该属性下定义的。虽然这看起来没有必要,但如果您的标签包含图表数据(全部在一个字符串下),则默认情况下,工具提示会显示两次数据。如果您希望避免这种情况,下面的代码可能会有所帮助。
yzxexxkh5#
最新版本的Chart.js(3.6.0)