我正试图在ChartJS 3中创建一个嵌套的饼图/甜甜圈图，当使用图例隐藏其中一个外部分段时，无法正确显示数据。
数据的第二个内环只是被分割成更具体片段的外环：
- 外层：
[541, 147, 8] - 内部：
[300, 241, 100, 47, 8]
当用户隐藏GROUP1时，会隐藏正确的外部段，但只隐藏第一个内部段，而不是第一个和第二个(300+241=541(。所以我想知道如何正确地将这两个数据集分组，以便隐藏所有嵌套的数据。
我在下面附上了一个示例来演示这个问题。
var count = [541, 147, 8];
var countNested = [300, 241, 100, 47, 8];
var data = {
labels: ["GROUP1", "GROUP2", "GROUP3"],
datasets: [{
data: count,
backgroundColor: ["Red", "Green", "Blue"]
},
{
data: countNested,
backgroundColor: ["Red", "Red", "Green", "Green", "Blue"]
}
]
}
const options = {
type: 'doughnut',
data: data,
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>我相信，对于这种情况，没有简单而标准的解决方案。
为了实现所需的行为，您需要定义legend.onClick函数和legend.labels.generateLabels函数。
有关详细信息，请参阅Chart.js文档的"图例"一章。
请查看您修改过的可运行代码，看看如何完成。
var count = [541, 147, 8];
var countNested = [300, 241, 100, 47, 8];
new Chart('chartJSContainer', {
type: 'doughnut',
data: {
labels: ["GROUP1", "GROUP2", "GROUP3"],
datasets: [{
data: count,
backgroundColor: ["Red", "Green", "Blue"]
},
{
data: countNested,
backgroundColor: ["Red", "Red", "Green", "Green", "Blue"]
}
]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => chart.data.labels.map((l, i) => ({
text: l,
index: i,
fillStyle: chart.data.datasets[0].backgroundColor[i],
strokeStyle: chart.data.datasets[0].backgroundColor[i],
hidden: chart.getDatasetMeta(0).data[i].hidden
})),
},
onClick: (event, legendItem, legend) => {
let chart = legend.chart;
let hidden = !chart.getDatasetMeta(0).data[legendItem.index].hidden;
chart.getDatasetMeta(0).data[legendItem.index].hidden = hidden;
let pointer = 0;
chart.data.datasets[0].data.forEach((v, i) => {
while (v > 0) {
if (i == legendItem.index) {
chart.getDatasetMeta(1).data[pointer].hidden = hidden;
}
v -= countNested[pointer++];
}
});
chart.update();
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chartJSContainer" width="300"></canvas>