chart.js

Colors

원문 :  http://www.chartjs.org/docs/latest/general/colors.html


 

Colors

차트 옵션에 색상을 적용할 떄 다양한 형식을 사용할 수 있습니다.

 - 16진수 / RGB / HSL 표기법 ( 문자열로 지정하여 사용 )

색상이 필요하지만 지정되지 않은 경우 Chart.js 는 전체 기본 색상을 사용합니다.

이 색은 Chart.defaults.global.defaultColor 에 저장됩니다. 

처음에는 'rgba ( 0, 0, 0, 0.1 )' 로 설정됩니다.

 

CanvasGradient 객체를 전달할 수도 있습니다.

차트에 전달하기 전에 만들어야 하지만, 

사용시 흥미로운 효과를 얻을 수 있습니다.

 

Patterns and Gradients

문자열 색상 대신에 CanvasPattern 또는 CanvasGradient 객체를 전달하는 방법이 있습니다.

아래는 이미지의 패턴으로 dataset 를 채우는 경우의 예입니다.

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
            }]
        }
    })
}

 

데이터 그래픽에 패턴 채우기를 사용하면 시각 장애 ( e.g. 색맹 또는 부분 시력 ) 가 있는 시청자가 

데이터를 보다 쉽게 이해하는 데 도움이 됩니다.

 

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']
};

 

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기