라벨링 축

차트를 만들 때 보는 사람에게 보고 있는 데이터를 알려야 합니다. 이렇게 하기 위해 라벨 축이 필요합니다.

스케일 제목 설정

스케일 라벨 설정은 scaleLabel 키 안에 있는 스케일 설정 아래에 중첩되어 있습니다. 스케일 제목을 위한 옵션을 정의합니다. 직교 축에만 적용되는 것에 유의하세요.

이름 유형 기본 값 설명
display boolean false true이면 축 제목을 보여줍니다.
labelString string '' 제목을 위한 텍스트. (즉, "# 사람 수" 또는 "응답 선택").
lineHeight number|string 1.2 텍스트의 각 선의 높이 ( MDN 참조).
fontColor Color '#666' 스케일 제목의 폰트 색상.
fontFamily string "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" CSS 글꼴 모음 옵션을 따르는 스케일 제목의 글꼴 모음.
fontSize number 12 스케일 제목의 폰트 크기.
fontStyle string 'normal' CSS 글꼴 모음 옵션을 따르는 스케일 제목의 폰트 스타일 (normal, italic, oblique, initial, inherit).
padding number|object 4 스케일 라벨 주변에 적용할 패딩. top 과 bottom에만 구현됩니다.

사용자 지정 눈금 형식 만들기

데이터 유형에 대한 정보를 포함하도록 눈금 표시를 변경합니다. 예를 들어, 달러 표시 추가와 같이요 ('$'). 이렇게 하기 위해 축 설정 안에 있는 ticks.callback 메소드를 재정의해야 합니다. 다음의 예시는 Y 축의 모든 라벨 앞에 달러 표시가 보여질 것입니다.

만약 콜백이 null 또는 undefined을 반환한다면 관련 그리드 선은 숨겨집니다. 

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // 눈금에 달러 표시 포함
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        }
    }
});

콜백 함수에 넘겨진 3번째 매개변수는 라벨의 배열이지만 시간 스케일에서는 {label: string, major: boolean} 객채의 배열입니다.

results matching ""

    No results matching ""