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

Question

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

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

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 轴上显示了百分比，但在悬停弹出窗口中没有显示...

Answer 1

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

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

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

会给你：

Dataset_label : 值

Answer 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";
      }
    }
  }
}

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

Chartjs display label & units when mouse is hover stats

javascript

jquery

label

ruby-on-rails

chart.js