설정

설정은 차트의 동작을 변경합니다. 스타일링, 폰트, 범례 등을 제어할 수 있는 속성들을 제공합니다.

전역 설정

이 개념은 DRY 설정을 유지하기 위해 Char.js 1.0 부터 소개되었으며, 각 인스턴스에 대한 옵션들을 지정하거나 특정 차트 유형에 대한 기본 값을 지정할 필요 없이 차트 유형에 따라 옵션을 전체적으로 변경할 수 있습니다.

Chart.js는 차트 유형 기본 값을 사용하여 차트에 전달된 옵션 객체들을 전역 설정과 병합하고 기본 값을 적절히 조정합니다. 이 방법은 각 차트 설정을 원하는대로 특정하게 설정할 수 있으며, 적용되는 모든 차트 형식들에 기본 값을 계속 변경할 수 있습니다. 전역 일반 옵션들은 Chart.defaults.global에 정의되어 있습니다. 각 차트 형식의 기본 값들은 해당 차트 유형 문서에 논의되어 있습니다.

다음의 예제는 차트 형식 기본 값에 의해 무시되지 않거나 생성자의 의해 생성시 옵션으로 값이 넘어가지 않았다면 모든 차트들에 호버 모드를 'nearest'로 설정할 것입니다.

Chart.defaults.global.hover.mode = 'nearest';

// 호버 모드가 nearest로 설정됩니다. 왜냐하면 값이 대체되지 않았기 때문입니다
var chartHoverModeNearest = new Chart(ctx, {
    type: 'line',
    data: data
});

// 이 차트는 넘겨진 값으로 호버 모드를 가질 것입니다
var chartDifferentHoverMode = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        hover: {
            // 전역 설정을 무시합니다
            mode: 'index'
        }
    }
});

데이터집합 설정

옵션들은 아마 데이터집합에 직접 설정됩니다. 데이터집합 옵션들은 3가지 다른 레벨로 변경될 수 있으며, 다음의 우선순위로 평가됩니다:

  • 데이터 집합당: dataset.*
  • 차트당: options.datasets[type].*
  • 또는 전역으로: Chart.defaults.global.datasets[type].*

여기서 type은 데이터집합 유형에 해당합니다.

주의: 데이터집합 옵션은 엘리먼트 옵션보다 우선합니다.

다음의 예제는 데이터집합 생성시 옵션이 전달되어 값이 무시되는 선형 데이터집합을 제외한 모든 showLine 옵션을 'false'로 설정할 것입니다

// 모든 데이터집합은 기본적으로 선을 보이지 않습니다
Chart.defaults.global.datasets.line.showLine = false;

// 이 차트는 오직 3번째 데이터집합만 선이 보일 것입니다
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [0, 0],
        }, {
            data: [0, 1]
        }, {
            data: [1, 0],
            showLine: true // `선형` 데이터 집합 기본 값을 덮어씁니다
        }, {
            type: 'scatter', // '선형' 데이터집합 기본 값이 'scatter' 이므로 영향을 받지 않습니다
            data: [1, 1]
        }]
    }
});

results matching ""

    No results matching ""