Estoy intentando crear un gráfico circular/de anillos anidado en ChartJS 3 y tengo problemas para mostrar correctamente los datos cuando uno de los segmentos externos está oculto usando la leyenda.
El segundo anillo interior de datos es solo el anillo exterior dividido en segmentos más específicos:
[541, 147, 8][300, 241, 100, 47, 8]Cuando el usuario oculta GRUPO1, se oculta el segmento exterior correcto, pero solo se oculta el primer segmento interior en lugar del primero y el segundo (300 + 241 = 541). Entonces, me pregunto cómo puedo agrupar correctamente los dos conjuntos de datos para que todos los datos anidados estén ocultos.
He adjuntado una muestra a continuación que demuestra el problema.
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>Creo que no hay una solución fácil y estándar para esta situación.
Debe definir una función legend.onClick junto con una función legend.labels.generateLabels para lograr el comportamiento deseado.
Para obtener más detalles, consulte el capítulo Leyenda de la documentación de Chart.js.
Eche un vistazo a su código modificado y ejecutable y vea cómo se puede hacer.
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>