Chartjs 在鼠标悬停时显示标签和单位

Posted 2023-03-15

【中文标题】Chartjs 在鼠标悬停时显示标签和单位

【英文标题】：Chartjs display label & units when mouse is hover stats

【发布时间】：2015-05-19 19:55:22

【问题描述】：

当我的鼠标指针悬停在图表上时，是否可以有标签和单位？目前只有数字。

对于下面的示例，我想展示：

58% 标签1 0% 标签2 0% 标签3 0% 标签4 0% 标签5

我的选项如下所示：

var options = 
      //Boolean - Show a backdrop to the scale label
      scaleShowLabelBackdrop : true,
      //Boolean - Whether to show labels on the scale
      scaleShowLabels : true,
      // Boolean - Whether the scale should begin at zero
      scaleBeginAtZero : true,
      scaleLabel : "<%%= Number(value) + ' %'%>",
      legendTemplate: "<ul class=\"<%%=name.toLowerCase()%>-legend\"><%% for (var i=0; i<datasets.length; i++)%><li><span style=\"background-color:<%%=datasets[i].strokeColor%>\"></span><%%if(datasets[i].label)%><%%=datasets[i].label%> <strong><%%=datasets[i].value%></strong><%%%></li><%%%></ul>",
      tooltipTemplate: "<%%= value %> Label"
    

使用 scaleLabel 选项，我在 Y 轴上显示 %，但在悬停弹出窗口上没有...

【问题讨论】：

一切皆有可能。你试过的代码在哪里？

@tellez 我试过的选项在帖子上，这应该是正确的吗？我在文档上没有找到更改 popup 显示的选项，我发现的只是比例

@tellez 我发现可能有用的选项是 tooltipTemplate，但是当我更改它时，我的图表上什么也没有发生...

【参考方案1】：

我找到了解决方案on the ChartJS repository on Github。

解决方案是使用选项multiTooltipTemplate如果您的图表有多个数据。否则，你应该使用tooltipTemplate

multiTooltipTemplate: "<%=datasetLabel%> : <%= value %>"  // Regular use
// or
multiTooltipTemplate: "<%%=datasetLabel%> : <%%= value %>"  // Ruby on Rails use

会给你：

数据集标签：值

【讨论】：

非常感谢！ :-D

很高兴它帮助了你；）

谢谢。但是我在使用

@Daidon 我已经编辑了我的帖子和答案并添加了一个标签。抱歉，一点都不清楚，但这是 Ruby on Rails 的解决方案。

【参考方案2】：

试试这个，它会起作用的。您只需要检查标签函数中的数据是什么。

options: 
  tooltips: 
    callbacks: 
      title: function() 
        return "";
      ,
      label: function(item, data) 
        var datasetLabel = data.datasets[item.datasetIndex].label || "";
        var dataPoint = item.yLabel;
        return datasetLabel + ": " + dataPoint + "min";
      
    
  

【讨论】：

欢迎来到 Stack Overflow！请检查答案的格式。

非常好，感谢您的帮助，在我的情况下，我使用了恒定的条形高度，但希望在悬停时显示不同的值。此代码解决了我的问题。