색상

차트 옵션에 색상을 적용할 때, 다양한 형식을 사용할 수 있습니다. 16진법, RGB, 또는 HSL 표기법으로 색상을 문자열로 지정할 수 있습니다. 만약 색상이 필요한데, 명시되어있지 않다면, Chart.js는 전역 기본 색상을 사용할 것입니다. 이 색상은 Chart.defaults.global.defaultColor에 저장되어 있습니다. 'rgba(0, 0, 0, 0.1)'으로 초기 설정되어 있습니다.

또한 CanvasGradient 객체를 넘길 수도 있습니다. 차트에 넘기기 전에 만들어야 하지만, 이것을 사용하면 흥미로운 효과를 낼 수 있습니다.

패턴과 그래디언트

대안 옵션은 CanvasPattern 또는 CanvasGradient 객체를 문자열 색상 대신 넘기는 것입니다.

예를 들어, 만약 이미지 패턴으로 데이터집합을 채우고 싶다면 다음과 같이 할 수 있습니다.

var img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    });
};

데이터 그래픽의 패턴 채우기를 사용하면 시각 장애(예, 색맹 또는 불완전한 시력)를 가진 사람들이 데이터를 더 쉽게 이해할 수 있도록 도울 수 있습니다.

Patternomaly 라이브러리를 사용하면 데이터집합을 채우기 위한 패턴을 만들 수 있습니다.

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56')
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};