chart.js 在 Tooltip 上添加 Percantage Sign答案

【问题标题】：chart.js Adding Percantage Sign on Tooltipchart.js 在 Tooltip 上添加 Percantage Sign
【发布时间】：2016-06-06 13:59:56
【问题描述】：

    var dmgchartt = document.getElementById("dmgchart");
    new Chart(dmgchartt, {
    type: "radar",
    data: radarChartData0,
    options: {
             tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
              scale: {
                ticks: {
                    beginAtZero: true
                }
            },
            title: {
            display: true,
            text: 'Title'
        }
    }
});

它只显示没有百分号的值。我尝试在工具提示的值后添加百分号，但没有用。另外，我如何选择工具提示是多还是单？我有 2 个数据集。

【问题讨论】：

您使用的是 Chart.js 2.0，对吗？你能提供一个jsfiddle吗？ tooltipTemplate 用于 Chart.js 1.0。在 Chart.js 2.0 中，您使用 options.tooltips.callbacks.labels。

标签： javascript jquery charts chart.js

【解决方案1】：

如果您在 cmets 中使用 @xnakos 建议的 Chart.js 2.0，则必须使用 options.tooltips.callbacks.label

 var dmgchartt = document.getElementById("dmgchart");
 new Chart(dmgchartt, {
        type: 'radar',
        data: data,
        options: {
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']] + '%';
                    }
                }
            },
          scale: {
            ticks: {
                beginAtZero: true
            }
        },
        title: {
        display: true,
        text: 'Title'
    }

    }
    });

【讨论】：

如果要标签和值：label: function(tooltipItem, data) { var idx = tooltipItem['index']; var caption = data.labels[idx]; var captionValue = data['datasets'][0]['data'][idx]; return caption+':'+captionValue+'%'; }

【解决方案2】：

提到的解决方案对我不起作用。它会丢弃默认标签处理（data.labels/dataset 标签），您必须再次格式化字符串。如果您只需要添加百分号，您可以简单地使用默认回调Chart.defaults.global.tooltips.callbacks.label，如doc 所说。所以对于 v2.x，它将是：

 options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return Chart.defaults.global.tooltips.callbacks.label(tooltipItem, data) + '%';
        }
      }
    }
  }

【讨论】：

【解决方案3】：

Mac 的答案非常接近，但我在实现时遇到了问题：

return data['datasets'][0]['data'][tooltipItem['index']] + '%';

改为使用 tooltipItem['datasetIndex'] 以允许在悬停时显示正确的显示。否则，无论悬停在什么上面，它都只会显示第一个数组值。我实施的解决方案如下：

return data['datasets'][tooltipItem['datasetIndex']]['data'][tooltipItem['index']] + '%';

【讨论】：

【解决方案4】：

您应该尝试将% 放在值块之外。我是这样使用的：

    tooltipTemplate: "<%= label %>: <%= value %>%",

【讨论】：

我试过你的<%= value + ' %' %>，它也对我有用。 if 部分一定与此有关。