如何在饼图中鼠标悬停显示“%”符号答案

【问题标题】：How to display "%" sign on mouse hover in Pie-Chart如何在饼图中鼠标悬停显示“%”符号
【发布时间】：2016-09-01 19:11:42
【问题描述】：

我正在使用 ChartJS 2.0 在 UI 上绘制图形。而且我能够渲染饼图。但我希望鼠标悬停显示数据以及“%”符号。我怎样才能附加 % 所以如果在鼠标悬停时我得到Rented: 93 我想看到Rented: 93 %。请指导我。

以下是我现在拥有的：

var sixthSubViewModel = Backbone.View.extend({
        template: _.template($('#myChart6-template').html()),
        render: function() {
          $(this.el).html(this.template());
          var ctx = this.$el.find('#pieChart')[0];
          var data = {
            datasets: [{
              data: this.model.attributes.currMonthOccAvailVac,
              backgroundColor: [
                "#455C73",
                "#BDC3C7",
                "#26B99A",
              ],
              label: 'My dataset' // for legend
            }],
            labels: [
              "Rented",
              "Vacant",
              "Unavailable",
            ]
          };
            var pieChart = new Chart(ctx, {
              type: 'pie',
              data: data
            });
        },
        initialize: function(){
            this.render();
        }   
    });

理解： 我知道目前悬停采用label 并添加colon，然后向其添加data。因此，如果label = Rented、Data = 93 我会在鼠标悬停时看到类似Rented: 93 的内容。如何更改鼠标悬停的文本以显示Rented: 93%。下面是我到目前为止在鼠标悬停时的图像。

我知道我需要在饼图中添加一个"options"。但我不知道该怎么做。请帮帮我。

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

您可以使用图表选项中的callbacks.label 方法编辑工具提示中显示的内容，然后只需使用以下命令将“%”添加到默认字符串：

tooltipItems -- 请参阅 documentation 了解更多信息（向上滚动到“工具提示项界面”）
data -- 数据集和标签的存储位置。

var ctx = document.getElementById("canvas");
var data = {
    datasets: [{
        data: [93, 4, 3],
        backgroundColor: [
            "#455C73",
            "#BDC3C7",
            "#26B99A",
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Rented",
        "Vacant",
        "Unavailable",
    ]
};
var pieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.labels[tooltipItems.index] + 
                    " : " + 
                    data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +
                    ' %';
                }
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>

【讨论】：

非常感谢先生。感谢您的帮助。