所以我知道如何隐藏所有的标签，但我只需要隐藏空的标签。
将是超级理想的，如果你可以建议任何解决方案，如何使这些标签“堆叠”。所以其中一个将保持可见，点击后，4其他人也会出现和dissaper...
我说的是灰色的）
真的很感激任何帮助！！！
<div class="canvasHolder">
<canvas id="stackedChartAgregateMulti" width="400" height="250"></canvas>
</div>
<script>
window.ctx10 = document.getElementById('stackedChartAgregateMulti');
if (window.ctx10Chart) window.ctx10Chart.destroy();
window.ctx10Chart = new Chart(window.ctx10, {
type: 'bar',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 0, 3, 27],
backgroundColor: [
'rgba(40, 139, 170, 1)'
],
borderColor: [
'rgb(40, 139, 170)'
],
stack: 'Stack 0',
borderWidth: 1
},
{
label: 'user 1 offline',
data: [30, 20, 20, 67, 10, 25, 3],
backgroundColor: [
'rgb(196, 201, 201)'
],
borderColor: [
'rgb(196, 201, 201)'
],
stack: 'Stack 0',
borderWidth: 1
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 0, 3, 27],
backgroundColor: [
'rgba(107, 112, 176, 1)'
],
borderColor: [
'rgb(107, 112, 176)'
],
stack: 'Stack 1',
borderWidth: 1
},
{
label: '',
data: [30, 20, 20, 67, 10, 25, 3],
backgroundColor: [
'rgb(196, 201, 201)'
],
borderColor: [
'rgb(196, 201, 201)'
],
stack: 'Stack 1',
borderWidth: 1
},
{
label: 'user 3 online',
data: [50, 35, 45, 47, 0, 3, 27],
backgroundColor: [
'rgba(208, 98, 155, 1)'
],
borderColor: [
'rgb(208, 98, 155)'
],
stack: 'Stack 2',
borderWidth: 1
},
{
label: '',
data: [30, 20, 20, 67, 10, 25, 3],
backgroundColor: [
'rgb(196, 201, 201)'
],
borderColor: [
'rgb(196, 201, 201)'
],
stack: 'Stack 2',
borderWidth: 1
},
{
label: 'user 4 online',
data: [50, 35, 45, 47, 0, 3, 27],
backgroundColor: [
'rgba(144, 71, 158, 1)'
],
borderColor: [
'rgb(144, 71, 158)'
],
stack: 'Stack 3',
borderWidth: 1
},
{
label: '',
data: [30, 20, 20, 67, 10, 25, 3],
backgroundColor: [
'rgb(196, 201, 201)'
],
borderColor: [
'rgb(196, 201, 201)'
],
stack: 'Stack 3',
borderWidth: 1
},
{
label: 'user 5 online',
data: [0, 35, 45, 47, 0, 3, 27],
backgroundColor: [
'rgba(40, 139, 170, 1)'
],
borderColor: [
'rgb(40, 139, 170)'
],
stack: 'Stack 4',
borderWidth: 1
},
{
label: '',
data: [30, 20, 20, 67, 10, 25, 3],
backgroundColor: [
'rgb(196, 201, 201)'
],
borderColor: [
'rgb(196, 201, 201)'
],
stack: 'Stack 4',
borderWidth: 1
}]
},
options: {
plugins: {
drawTime: 'afterDraw',
title: {
display: true,
text: 'Stacked, agregated, multi column'
},
legend: {
labels: {
filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
}
}
},
responsive: true,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
}
});
</script>
1条答案
按热度按时间c86crjj01#
您可以利用legend上的
onClick选项，隐藏同一堆栈的数据集，并更改过滤器回调返回的一些信息（如果带有空标签的数据集可见）。第一个