chart.js 在工具提示中添加百分号

Question

    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'
        }
    }
});

它只显示数值，没有百分号。我试图在tooltip上添加百分号以显示值，但没有成功。另外，我该如何选择tooltip是多行还是单行？我有两个数据集。

- Yusuf Devranlı

---

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

Answer 1

如果你正在使用评论中被@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'
    }

    }
    });

- Mac

---

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

Answer 2

我尝试了以上提到的解决方案都没有生效。它会丢弃默认标签处理（数据标签/数据集标签），你必须再次格式化字符串。如果你只需要添加百分比符号，你可以简单地使用默认回调Chart.defaults.global.tooltips.callbacks.label，如文档所说。因此，对于v2.x版本，代码如下：

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

- bigless

Answer 3

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

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

使用tooltipItem ['datasetIndex']来允许正确的显示在悬停时而不是使用第一个数组值，无论悬停什么。我的解决方案如下：

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

- Rharris389

Answer 4

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

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

- Jerry Unkhaptay

---

我尝试了你的 <%= value + ' %' %>，对我也起作用了。这可能与 if 部分有关。 - Jerry Unkhaptay