问题描述
我使用 react-chartjs-2 图表库中的 <Bar />
组件创建了这个堆叠条形图。
我使用 React 来做到这一点。但是考虑到 vanilla JS 中的等价物的答案也会非常有帮助!
现在我想要的是,当我将鼠标悬停在 1st Jun 堆栈的橙色部分时,所有堆栈中的橙色部分都应突出显示。要么除橙色外的所有部分的不透明度降低,要么橙色部分略微放大。如果这些都不可能,至少应该在橙色部分周围画一个边框。
我搜索了chartjs 文档并搜索了npm 注册表中的chartjs 插件。但我没有发现与此相关的内容。
应该怎么做才能实现这一目标?
解决方法
您可以使用 onHover
回调。
现场示例:
var options = {
type: 'bar',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: '#FF0000',},{
label: '# of Points',data: [7,11,8,7],backgroundColor: '#0000FF'
}
]
},options: {
onHover: (e,activeEls,chart) => {
if (activeEls.length === 0) {
chart.data.datasets.forEach((dataset) => {
dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0,-2) : dataset.backgroundColor;
});
chart.update();
return;
}
const hoveredEl = chart.getElementsAtEventForMode(e,'point',{
intersect: true
},true)[0]
chart.data.datasets.forEach((dataset,i) => {
dataset.backgroundColor = (hoveredEl.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '4D';
});
chart.update();
},scales: {
y: {
stacked: true
},x: {
stacked: true
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
参考@LeeLenalee 的解决方案,我想出了 React 实现的答案
options: {
onHover: (e,activeEls) => {
if (activeEls.length === 0) {
this.chart.chartInstance.config.data.datasets.forEach((dataset) => {
dataset.backgroundColor =
dataset.backgroundColor.length === 9
? dataset.backgroundColor.slice(0,-2)
: dataset.backgroundColor;
});
this.chart.chartInstance.update();
return;
}
const hoveredEl = this.chart.chartInstance.getDatasetAtEvent(e)[0];
this.chart.chartInstance.config.data.datasets.forEach((dataset,i) => {
const [boldColor,lightColor] =
dataset.backgroundColor.length === 9
? [dataset.backgroundColor.slice(0,-2),dataset.backgroundColor]
: [dataset.backgroundColor,dataset.backgroundColor + "4D"];
dataset.backgroundColor =
hoveredEl._datasetIndex === i ? boldColor : lightColor;
});
this.chart.chartInstance.update();
}
}
其中 this.chart
是我的 <Bar />
组件的引用。
注意我有
const [boldColor,lightColor] =
dataset.backgroundColor.length === 9
? [dataset.backgroundColor.slice(0,dataset.backgroundColor]
: [dataset.backgroundColor,dataset.backgroundColor + "4D"];
dataset.backgroundColor =
hoveredEl._datasetIndex === i ? boldColor : lightColor;
从第 17 行到第 20 行。这有助于避免我在 @LeeLenalee 的代码片段中在栏的不透明度发生变化时看到的不必要的故障。