如何在chart js中悬停一个数据集时使其他数据集变暗

Question

我有一张双层甜甜圈图。当鼠标悬停在特定的数据集上时，它必须保持其颜色，而其他一切都应该变暗，如图所示。换句话说，我需要与悬停效果相反的效果。这是我的代码https://jsfiddle.net/arrruzhan11/mufw4r07/(下面片段中的悬停效果不起作用(。

var ctx = document.getElementById("myChart");
var doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets: [
{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8','#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db','#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,}
]},
options: {
tooltips: {
callbacks: {
beforeBody: function (chart, data) {
const hoverval = document.getElementById('hoverval');
var datasetIndex = chart[0].datasetIndex;
var label = data.datasets[datasetIndex].label;
hoverval.innerText = `${label}`;
}
},
},
responsive: true,
legend: {
position: "left",
align: "start",
fullSize: true,
},
hover: {
mode: 'dataset',
},
}})

#hoverval {
padding: 10px;
border: solid 1px grey;
background: yellow;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<h3>
How to darken other datasets when hovering one dataset in chart js?
</h3>
<div id="hoverval"> </div>
<canvas id="myChart" width="470" height="200"></canvas>

Answer 1

您可以如下定义onHover函数：

onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
}

有关更多信息，请参阅此处的Chart.js文档。

请查看修改后的代码，看看它是如何工作的。请注意，此示例使用Chart.js v3.8.2，这是该库的最新版本。

const bgColor = ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'];
const hoverBgColor = ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'];
new Chart('myChart', {
type: 'doughnut',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: bgColor
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: bgColor
}
]
},
options: {
responsive: false,
onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
},
plugins: {
legend: {
position: "left",
align: "start",
fullSize: true,
}
},
hover: {
mode: 'dataset',
},
}
})

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@3.8.2/dist/chart.min.js"></script>
<div id="hoverval"> </div>
<canvas id="myChart"></canvas>