선형 차트

선형 차트는 선 위에 데이터 지점을 구성합니다. 주로, 트렌드 데이터를 보여주거나 두 데이터 집합을 비교할 때 사용됩니다.

사용 예시

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

데이터집합 속성들

선형 차트는 각 데이터 집합에 대한 특정 속성의 숫자를 지정할 수 있습니다. 특정 데이터 집합에 대한 속성들을 보여주기위한 설정을 하는데 사용됩니다. 예를 들어, 선의 색상을 지정할 때 주로 사용하는 방법입니다.

주로 사용되는 속성

포인트 스타일링

다음의 속성들을 사용하여 각 포인트의 스타일을 제어할 수 있습니다:

이 모든 값들이, 만약 undefined 라면, elements.point.* 옵션과 관련된 데이터 집합의 첫번째 옵션 값으로 지정됩니다.

선 스타일링

다음의 속성들을 사용하여 선의 스타일을 제어할 수 있습니다:

만약 값이 undefined 이면, showLine 과 spanGaps 는 관련 차트 설정 옵션으로 대체됩니다. 나머지 값들은 관련 elements.line.* 옵션으로 대체됩니다.

상호작용

각 포인트의 상호작용은 다음의 속성들로 제어할 수 있습니다:

cubicInterpolationMode

다음의 삽입 모드를 지원합니다.

• 'default'
• 'monotone'

'default' 알고리즘은 데이터집합의 모든 유형에 대한 쾌적한 곡선을 생성하는 사용자 지정 가중치 큐빅 삽입법을 사용합니다.

'monotone' 알고리즘은 y = f(x) 데이터집합에 더 적합합니다 : 삽입되는 데이터 집합의 단조성(또는 부분적 단조성)을 보존하며, 로컬의 극한 값이(있는 경우) 입력 데이터 포인트에 유지되도록 합니다.

만약에 값을 그대로 두면 (undefined), 전역 속성인 options.elements.line.cubicInterpolationMode를 사용합니다.

Stepped Line

다음의 값을은 steppedLine에 지원됩니다.

• false: 단계 삽입 없음 (기본 값)
• true: Step-before 삽입 (eq. 'before')
• 'before': Step-before 삽입
• 'after': Step-after 삽입
• 'middle': Step-middle 삽입

만약 steppedLine 값이 false 이외의 값으로 설정된다면, lineTension은 무시됩니다.

설정 옵션

선형 차트 정의는 다음의 설정 옵션이 있습니다. 이 옵션들은 차트를 형성하기 위해 전달된 옵션인 전역 차트 설정 옵션 Chart.defaults.global과 합쳐집니다.

기본 옵션

모든 생성된 선형 차트에 적용되는 일반적인 설정입니다. 전역 선형 차트 설정은 Chart.defaults.line에 저장되어 있습니다. 전역 옵션을 바꾸면 바꾼 이후에 생성된 차트에 대해서만 적용됩니다. 이미 존재하던 차트들은 바뀌지 않습니다.

예를 들어, 모든 선형 차트의 설정을 spanGaps = true 로 할려면:

Chart.defaults.line.spanGaps = true;

데이터 구조

선형 차트에 대한 데이터집합의 data 속성은 2가지 형식이 있습니다.

number[]

data: [20, 10]

data 배열이 숫자들의 배열일 때 x축은 일반적으로 카테고리 입니다. 포인트는 배열의 위치에 따라 축에 자리합니다. 카테고리 축으로 선형 차트가 생성될 때, 데이터 객체의 labels 속성은 반드시 설정해야 합니다.

Point[]

data: [{
    x: 10,
    y: 20
}, {
    x: 15,
    y: 10
}]

이 대체 유형은 최소 데이터집합에 사용됩니다, 도표형 차트와 같은 곳에요. 각 데이터 포인트는 객체에 있는 x 와 y 속성들을 사용하여 특정됩니다.

누적 영역 차트

선형 차트는 y축에 누적을 허용한 변경 설정을 통해 누적 영역 차트를 설정할 수 있습니다. 누적 영역 차트는 한 데이터의 트렌드가 작은 조각들의 숫자들로 만들어졌는지 보여주는데 사용할 수 있습니다..

var stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                stacked: true
            }]
        }
    }
});