js 그래프 차트 색상 랜덤 적용

chat gpt가 짜준 거고, 비결은 질문만 제대로 하면 괜찮은 결과 얻을 수 있을 것 같다.
아주 만족해서 학습지 외 블로그에도 올려봄~

<!-- Graph Section -->
<div align="center" style="width: 700px;">
    <h2>Top 10 Stocks Graph</h2>
    <canvas id="myChart" width="700" height="400"></canvas>
</div>

<!-- Graph js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var colors = ['#dbd8f8', '#c6bef7', '#85B5E1'];
    var data = {
        labels: [],
        datasets: [{
            label: '금액(억)',
            data: [],
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1
        }]
    };

    <% if (li != null) { 
        int count = 0;
        for (StockVO m : li) {
            if (count >= 10) break;
    %>
        data.labels.push('<%=m.getCol1()%>');
        data.datasets[0].data.push('<%=m.getCol3()%>');
        if ('<%=m.getCol1()%>' === '삼성전자') {
            data.datasets[0].backgroundColor.push('#523bad');
            data.datasets[0].borderColor.push('#523bad');
        } else {
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            data.datasets[0].backgroundColor.push(randomColor);
            data.datasets[0].borderColor.push(randomColor);
        }
    <% 
            count++;
        } 
    } 
    %>

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

적용 전:

적용 후: