如何显示“％”在鼠标盘旋的标志在圆形统计图表 [英] How to display "%" sign on mouse hover in Pie-Chart

问题描述

我使用 ChartJS 2.0 在UI上绘制图形。我可以渲染一个饼图。但我想让鼠标悬停显示数据以及％标志。如何附加％因此，如果鼠标悬停，我会收到租借：93 我想看到 ％。请指导我。

I am drawing graph on UI using ChartJS 2.0. And I am able to render a Pie Chart. But I want the mouse-hover to show the data along with a "%" sign. How can I append % So if on mouse hover I am getting Rented: 93 I would like to see Rented: 93 %. Kindly guide me.

以下是我现在的情况：

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

了解：
我了解当前hover需要 label 并添加 colon ，然后向其中添加数据。所以如果 label = Rented ， Data = 93 我会看到像 / code>鼠标悬停。如何更改鼠标悬停的文本以显示租借：93％。下面是我到现在为止鼠标悬停的图像。

Understanding: I understand that currently hover takes the label and adds a colon and then adds data to it. So if label = Rented, Data = 93 I will see something like Rented: 93 on mouse-hover. How can I change text of mouse-hover to display Rented: 93%. Below is the image of what I have till now on mouse-hover.

我知道我需要在饼图中添加一个options。但我不知道如何这样做。请帮助我。

I understand that I need to add one "options" in the pie chart. But I am not sure how to do that. Please help me.

推荐答案

您可以使用 callbacks.label 方法，然后只需使用以下命令为默认字符串添加一个％：

You can edit what is displayed in your tooltip with the callbacks.label method in your chart options, and then simply add a "%" to the default string using :

• tooltipItems - 请参阅文档<


• 数据 - 更多信息（

• tooltipItems -- See documentation for more information (scroll up a bit to "Tooltip Item Interface")
• data -- Where the datasets and labels are stored.

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>

这篇关于如何显示“％”在鼠标盘旋的标志在圆形统计图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！