如何在 chartjs 中的堆叠条形图中的所有条形图中突出显示堆栈的一部分
How to highlight a section of a stack in all bars in a stacked barchart in chartjs
我使用来自 react-chartjs-2 图表库的 <Bar />
组件创建了这个堆叠条形图。
我用 React 来做这个。但是考虑到香草 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, 5, 8, 3, 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, -2), dataset.backgroundColor]
: [dataset.backgroundColor, dataset.backgroundColor + "4D"];
dataset.backgroundColor =
hoveredEl._datasetIndex === i ? boldColor : lightColor;
从第 17 行到第 20 行。这有助于避免当栏的不透明度发生变化时我在@LeeLenalee 的代码片段中看到的不必要的故障。
我使用来自 react-chartjs-2 图表库的 <Bar />
组件创建了这个堆叠条形图。
我用 React 来做这个。但是考虑到香草 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, 5, 8, 3, 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, -2), dataset.backgroundColor]
: [dataset.backgroundColor, dataset.backgroundColor + "4D"];
dataset.backgroundColor =
hoveredEl._datasetIndex === i ? boldColor : lightColor;
从第 17 行到第 20 行。这有助于避免当栏的不透明度发生变化时我在@LeeLenalee 的代码片段中看到的不必要的故障。