我正在使用chartsJS来显示饼图。我每次刷新页面的图表都会有不同数量的部分。我正在尝试将每个部分设置为随机颜色。
我可以创建一个随机的颜色没有问题通过：
<script>
const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52);
const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;
</script>
然后我可以使用将饼图部分设置为这种颜色
backgroundColor: randomRGB(),
整个饼图都变成了随机的颜色。如何声明一个循环，将饼图的每个部分设置为随机颜色。请注意，饼图部分的数量经常会发生变化。
您可以使用可脚本化的选项作为背景颜色：
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>