【chart.js】그래프의 색을 지정하지 않고 「동적으로」생성하는 방법

안녕하세요!
고양이 조카( ＠고양이 r1234 )라고 합니다.

Web상에서 비교적 간단하게 그래프를 그릴 수 있는 「 chart.js 」를 이용하고 있는 사람도 많지 않을까요?

사용한 적이없는 사람을 위해 그래프를 그린 이미지를 올려 둡니다. (공식 사이트에서)


"대단해! 좋은 느낌!"이라고 생각할지도 모르지만, 이것에는 큰 단점이 있습니다.
그것은, 「그래프 하나하나의 색을, 프로그램으로 지정하지 않으면 안된다」라고 하는 것입니다.

공식 사이트의 소스 코드를 보면 다음과 같습니다.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

막대 그래프 안의 색과, 외측의 테두리를 각각 다른 색으로 하나씩 정의하고 있는 것을 알 수 있군요.

이제 다이내믹하게 그래프의 수를 늘릴 수 없고, 색의 변이도 스스로 생각해야 합니다.

따라서이 문제를 해결하는 것이 chartjs-plugin-colorschemes이라는 플러그인입니다.

이 플러그인을 사용하여 그린 막대 그래프는 다음과 같습니다.
(덧붙여서, 다음은 내가 만든 Lookmine라는 앱입니다)



하나 하나의 그래프의 색이, 동적으로 생성되어 있는 것을 알 수 있을까 생각합니다.

그럼 실제로 플러그인을 사용해 보겠습니다.

플러그인 설치

※최신의 정보, 보다 상세한 정보는 chartjs-plugin-colorschemes 를 참조해 주세요.

body 태그 끝에 다음 설명을 추가합니다.

<script src="https://unpkg.com/chartjs-plugin-colorschemes"></script>

그리고는, option 의 부분에 이하의 기술을 추가해 종료입니다.

    options: {
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12'
            }
        }
    }

간단하네요.

색칠은 플러그인을 사용하기 때문에 방금전의 backgroundColor 와 borderColorscheme 로 지정하는 색상은 다음 페이지에서 선택할 수 있습니다.
htps : // 나기 x. 기주 b. 이오 / 짱 rtjs-p ぅ 긴 - 코 rs 짱 s / 코 r 짱 rt. HTML

그건 그렇고, 나는 tableau.Tableau20를 사용하고 있으며 다음과 같은 색 구성표입니다.



머티리얼계의 사이트이면, 이것이 제일 추천입니다.

여러분도 멋진 그래프를 많이 만들어 봅시다!

함께 읽고 싶다.

HTML도 모르는 초보자가, 독학으로 「투고형 SNS 서비스」를 만들었다고 진짜? 【193일간의 사투】

운영하는 PlayFab 전용 블로그
htps : // p p y y f b-s r. 이 m