Estoy usando chartsJS para mostrar un gráfico circular. Cada vez que la página se actualice, el gráfico tendrá un número diferente de secciones. Estoy tratando de configurar cada sección en un color aleatorio.
Creo un color aleatorio sin problema:
<script> const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52); const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`; </script>Luego puedo configurar las secciones del gráfico circular en este color usando:
backgroundColor: randomRGB(),Todo el gráfico circular cambia al color aleatorio. ¿Cómo puedo declarar un ciclo que establecerá cada sección del pastel en un color aleatorio? tenga en cuenta que el número de secciones circulares cambiará a menudo.
Puede usar una opción programable para backgroundColor para esto:
const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52); const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`; const options = { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: () => (randomRGB()) }] }, options: {} } const 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.6.0/chart.js"></script> </body>