如何在鼠标悬停在饼图上显示“％”符号(How to display “%” sign on mouse hover in Pie

如何在鼠标悬停在饼图上显示“％”符号(How to display “%” sign on mouse hover in Pie-Chart)

我使用ChartJS 2.0在UI上绘制图形。我能够呈现饼图。但我希望鼠标悬停以显示数据以及“ ％ ”符号。如何追加％所以如果鼠标悬停我得到Rented: 93我想看看Rented: 93 % 。请引导我。

以下是我现在拥有的：

理解：我理解当前悬停采用label并添加colon然后向其添加data 。所以如果label = Rented ， Data = 93我会在鼠标悬停时看到类似于Rented: 93东西。如何更改鼠标悬停的文本以显示“已Rented: 93% 。下面是我到现在为止鼠标悬停的图像。

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

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.

Below is what I have now:

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.

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方法编辑工具提示中显示的内容，然后使用以下命令将“％”添加到默认字符串：

tooltipItems - 查看文档获取更多信息（ 向上滚动到“Tooltip Item Interface” ） 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> 
  
 
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 -- 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>

更多推荐