ChartJS 删除标签并在条形图的工具提示中仅显示值

ybzsozfc  于 2022-11-07  发布在  Chart.js
关注(0)|答案(5)|浏览(236)

我正在使用ChartJS库创建图表。在工具提示中,我显示了我创建的数据集中的数据值。如果图表类型为 * 圆环图 *,则它适用于case。否则,它不适用于case或 * 条形图 * 或 * 水平条形图 *。
无论我做什么,它都会显示带有标签的数据。
我的天啊

我的天啊

我所要做的就是删除条形图工具提示中显示的标签。
第一个

zwghvu4y

zwghvu4y1#

只需使用title选项和一个空值。如下所示:

  1. callbacks: {
  2. title: function(tooltipItems, data) {
  3. return '';
  4. },
  5. label: function(tooltipItem, data) {
  6. var datasetLabel = '';
  7. var label = data.labels[tooltipItem.index];
  8. return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
  9. }
  10. }

请参阅updated jsfiddle

ht4b089n

ht4b089n2#

这是如何完成它

  1. tooltip: {
  2. enabled: true,
  3. displayColors:false,
  4. callbacks: {
  5. label:(tooltipItem)=>{
  6. return tooltipItem.parsed;
  7. },
  8. }
  9. },
zzoitvuj

zzoitvuj3#

这应该适用于ChartJS 3.8.0的最新版本:

  1. tooltip: {
  2. callbacks: {
  3. title: function (tooltipItem) {
  4. return '';
  5. },
  6. label: function (tooltipItem) {
  7. var tooltipText = '';
  8. if (tooltipItem.dataset.data[tooltipItem.dataIndex] != null)
  9. tooltipText = tooltipItem.dataset.data[tooltipItem.dataIndex]!.toString();
  10. return tooltipText;
  11. }
  12. }
  13. }
piztneat

piztneat4#

作为pumpkinzzz答案的替代方法,如果您希望ONLY显示标签名称,则可以采用以下方法。将标题留空,并将字符串返回给label属性。这是因为工具提示的标签颜色是在该属性下定义的。
虽然这看起来没有必要,但如果您的标签包含图表数据(全部在一个字符串下),则默认情况下,工具提示会显示两次数据。如果您希望避免这种情况,下面的代码可能会有所帮助。

  1. title: function(tooltipItems, data) {
  2. return '';
  3. },
  4. label: function(tooltipItem, data) {
  5. return data.labels[tooltipItem.index].toString(); //Some IDEs throw an error if you don't cast to a string
  6. }
yzxexxkh

yzxexxkh5#

最新版本的Chart.js(3.6.0)

  1. plugins: {
  2. tooltip: {
  3. yAlign: 'top',
  4. callbacks: {
  5. label: function(tooltipItem) {
  6. return tooltipItem.dataset.data;
  7. }
  8. }
  9. },
  10. }

相关问题