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

【问题标题】：Chartjs display label & units when mouse is hover statsChartjs 在鼠标悬停时显示标签和单位
【发布时间】：2023-04-03 18:15:01
【问题描述】：

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

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

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，但是当我更改它时，我的图表上什么也没有发生...

标签： javascript jquery ruby-on-rails label chart.js

【解决方案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！请检查答案的格式。
非常好，感谢您的帮助，在我的情况下，我使用了恒定的条形高度，但希望在悬停时显示不同的值。此代码解决了我的问题。