如何在ChartJS中过滤图表上的悬停？

Question

我正在尝试用ChartJS制作一个甜甜圈进度表。我想显示完成百分比（即完成5%）。

目前，我有一个带有数据< code>[5，95]的图表，因为(据我所知)，ChartJS不允许只添加百分比，它用灰色数据线填充图表的其余部分，所以我必须添加< code>95数据点。

我已经使用工具提示过滤器使工具提示不显示在图表的95部分，但我现在想防止当我将鼠标悬停在95部分数据点上时背景更改颜色。目前，它在悬停时看起来像这样，我想修复：

总而言之，我希望允许实际进度数据点（5）能够在悬停时更改颜色，但不能更改图表的另一部分，因为它只是一个占位符，以显示100个中5%的样子。

            var config = {
                type: 'doughnut',

                data: {
                    datasets: [{
                        data: [
                            studentProgress, (100 - studentProgress),
                        ],
                        backgroundColor: [
                            "#646c9a",
                            "#FDFDFD"
                        ],
                        hoverBorderWidth: 0,
                        borderWidth: 0,
                    }],
                    labels: [
                        'Course Progress',
                        'Todo',
                    ],
                },
                options: {
                    cutoutPercentage: 75,
                    responsive: true,
                    circumference: Math.PI,
                    rotation: Math.PI,
                    maintainAspectRatio: false,
                    legend: {
                        display: false,
                        position: 'top',
                    },
                    title: {
                        display: false,
                        text: 'test'
                    },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    },
                    tooltips: {
                        enabled: true,
                        intersect: false,
                        mode: 'nearest',
                        bodySpacing: 5,
                        yPadding: 10,
                        xPadding: 10,
                        caretPadding: 0,
                        displayColors: false,
                        backgroundColor: '#5d78ff',
                        titleFontColor: '#ffffff',
                        cornerRadius: 4,
                        footerSpacing: 0,
                        titleSpacing: 0,
                        filter: function (tooltipItem, data) {
                            var label = data.labels[tooltipItem.index];
                            if (label == "Todo") {
                                return false;
                            } else {
                                return true;
                            }
                        }
                     }
                }
            };

            var ctx = document.getElementById('chart_progress').getContext('2d');
            var myDoughnut = new Chart(ctx, config);

Answer 1

您可以使用 hoverBackgroundColor。只需对灰色使用相同的颜色代码即可。

backgroundColor: [
  "#646c9a",
  "#FDFDFD"
],

hoverBackgroundColor: [
  "#8389ae",
  "#FDFDFD"
],

缺点:你必须为你的其他数据集考虑一个高亮的颜色代码。使用rgba值可能更容易，因此您只需更改alpha值，而无需计算或考虑其他颜色代码。