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

Question

我正在尝试在 ChartJS 中制作圆环进度图。我想显示完成百分比(即完成 5%)。

目前，我有一个包含数据的图表 [5, 95]因为(据我所知)，ChartJS 不允许只添加百分比并用灰色数据线填充图表的其余部分，所以我不得不添加 95数据点。

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

总而言之，我想让实际进度数据点 ( 5 ) 能够在悬停时更改颜色，但不能更改图表的其他部分，因为它只是一个占位符，用于显示 5% 的样子满分 100。

            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 值，而无需计算或考虑其他颜色代码。