当鼠标悬停时,Chartjs 显示标签和单位统计

2024-03-06

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

对于下面的例子,我想展示:

  • 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轴上显示%,但不在悬停弹出窗口上显示......


我找到了解决方案在 Github 上的 ChartJS 存储库上 https://github.com/nnnick/Chart.js/issues/535#issuecomment-52075422.

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

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

会给你 :

  • 数据集标签:值
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当鼠标悬停时,Chartjs 显示标签和单位统计 的相关文章

随机推荐