Chart.js 2.0 甜甜圈工具提示百分比

JS

使用Chart.JS 2.0绘制甜甜圈图表时，我们可能需要在工具提示中显示百分比。甜甜圈图表是一种环形图表，用于显示不同类别的数据占总体的比例。在Chart.JS 2.0中，默认情况下，工具提示只显示每个数据项的标签和数值。但是，我们可以通过一些简单的代码修改，使工具提示显示百分比。

首先，我们需要在HTML页面中引入Chart.JS库。可以通过CDN链接或下载文件到本地来引入。接下来，我们需要在HTML页面中创建一个canvas元素，用于绘制甜甜圈图表。canvas元素可以设置一个唯一的id，以便我们在JavaScript代码中使用。

下面是一个简单的HTML代码示例：

html
<!DOCTYPE html>
<html>
<head>
    <title>Chart.JS 2.0 - 甜甜圈图表工具提示百分比</title>
    <script src="https://cdn.JSdelivr.net/npm/chart.JS"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getcontext('2d');
        var data = {
            labels: ['苹果', '香蕉', '橙子', '葡萄'],
            datasets: [{
                data: [30, 20, 10, 40],
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
            }]
        };
        var options = {
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var dataset = data.datasets[tooltipItem.datasetIndex];
                        var Total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                            return previousValue + currentValue;
                        });
                        var currentValue = dataset.data[tooltipItem.index];
                        var percentage = Math.floor(((currentValue/Total) * 100)+0.5);
                        return dataset.labels[tooltipItem.index] + ': ' + percentage + '%';
                    }
                }
            }
        };
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: options
        });
    </script>
</body>
</html>

在上面的代码中，我们首先获取canvas元素的上下文对象ctx，并创建了一个数据对象data，其中包含了标签labels和数据集datasets。然后，我们创建了一个选项对象options，其中定义了回调函数来修改工具提示的显示内容。

在回调函数中，我们首先获取当前数据集的总和Total，然后计算当前数据项的百分比。最后，返回一个字符串，包含数据项的标签和百分比。

最后，我们使用Chart.JS的构造函数创建一个新的甜甜圈图表实例myChart，将canvas的上下文对象、数据和选项传递给它。

通过以上代码，我们可以在甜甜圈图表的工具提示中显示百分比，使数据更加直观和易于理解。

代码解析：

1. 使用document.getElementById('myChart')获取canvas元素的上下文对象ctx，并指定id为myChart。

2. 创建数据对象data，包含标签labels和数据集datasets。

3. 创建选项对象options，其中定义回调函数来修改工具提示的显示内容。

4. 在回调函数中，获取当前数据集的总和Total，计算当前数据项的百分比。

5. 返回一个包含数据项的标签和百分比的字符串。

6. 使用Chart.JS的构造函数创建一个新的甜甜圈图表实例myChart，传递canvas的上下文对象、数据和选项。

以上是使用Chart.JS 2.0绘制甜甜圈图表并显示百分比的简单示例代码。通过添加一些简单的代码修改，我们可以自定义工具提示的显示内容，使数据更加直观和易于理解。