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

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

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

我的天啊

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

zwghvu4y

zwghvu4y1#

只需使用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

ht4b089n

ht4b089n2#

这是如何完成它

tooltip: {
    enabled: true,
    displayColors:false,
    callbacks: {
        label:(tooltipItem)=>{
            return tooltipItem.parsed;
        },
    }
},
zzoitvuj

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;
          }
        }
      }
piztneat

piztneat4#

作为pumpkinzzz答案的替代方法,如果您希望ONLY显示标签名称,则可以采用以下方法。将标题留空,并将字符串返回给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
}
yzxexxkh

yzxexxkh5#

最新版本的Chart.js(3.6.0)

plugins: {
    tooltip: {
        yAlign: 'top',
        callbacks: {
            label: function(tooltipItem) {                                
                return tooltipItem.dataset.data;
            }
        }
    },
}

相关问题