Chart.js 에 대해서 알아보자

대체적으로 사용할만한 기본 옵션값들과, 데이터 유형 정도로 정리하였다.

변할수 있는 옵션값

글자 색상
폰트
배경색 또는 배경이미지 바꾸기
차트의 애니메이션
그래프 색상
그래프의 굵기
그래프의 크기
(x,y)축 변환
차트 숨기기, 보이기 기능
제목 설정
툴팁 설정

---

이벤트(유저의 행동에 관하여)

클릭
마우스 올리기(hover)
마우스 떠나기(올린후 마우스 치우기)

사용될수 있는 데이터 타입

원시 데이터 배열

데이터가 숫자 배열인 경우 동일한 인덱스에 있는 레이블 배열의 값이 인덱스 축에 사용됩니다.
(세로 차트의 경우 x, 가로 차트의 경우 y).

data: [20, 10],
labels: ['a', 'b']

오브젝트(객체) 배열

이 배열은, 내부의 객체에서 x, y 값을 지정해줍니다.

data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]
data: [{x:'Sales', y:20}, {x:'Revenue', y:10}]

커스텀 오브젝트(객체) 배열

x, y 값을 주지않고, 원하는 key값을 지정하여 객체를 사용할수 있다.

data: {
    datasets: [{
        data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
},
options: {
    parsing: {
        xAxisKey: 'id',
        yAxisKey: 'nested.value'
    }
}

---

선형(라인) 차트

선형 차트는 선 위에 데이터 지점을 구성합니다.

주로, 트렌드 데이터를 보여주거나 두 데이터 집합을 비교할 때 사용됩니다.

데이터 구조

number[]

data 배열이 숫자들의 배열일 때 x축은 일반적으로 카테고리 입니다.

포인트는 배열의 위치에 따라 축에 자리합니다.

카테고리 축으로 선형 차트가 생성될 때, 데이터 객체의 labels 속성은 반드시 설정해야 합니다.

data: [20, 10]

Point[]

이 대체 유형은 도표형 차트와 같은, 최소 데이터집합에 사용됩니다.

각 데이터 포인트는 객체에 있는 x 와 y 속성들을 사용하여 특정됩니다.

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

---

막대(바) 차트

막대형 차트는 수직 막대로 데이터 값을 표현하고 보여주는 방법을 제공합니다.

트렌드 데이터를 보여주거나 여러 데이터 집합들을 나란히 비교하고 싶을 때 사용합니다.

세로, 가로 축을 변환하여 사용할수 있고, 누적 막대 그래프로 사용할수도 있습니다.

데이터 구조

막대형 차트에 대한 데이터집합의 data 은 숫자들의 배열로 지정됩니다.

데이터 배열의 각 포인트는 x 축의 같은 인덱스에 라벨에 관련됩니다.

data: [20, 10]

시간 척도를 사용할 때 x/y 좌표로서 데이터집합을 지정할 수 있습니다.

data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]

두 숫자들의 배열로 막대형 차트에 대한 데이터집합을 지정할 수 있습니다. 이렇게하면 막대 사이에 간격이 있는 막대(floating-bars)가 강제로 그려집니다. 배열의 첫번째와 두번째 숫자는 각각 막대의 시작과 끝 지점에 해당합니다.

data: [[5,6], [-3,-6]]

---

레이다 차트

레이더 차트는 여러 데이터 지점들과 그들 사이의 변화를 보여주는 방법입니다.

두 개 이상의 서로 다른 데이터 집합의 점을 비교하는 데 유용한 경우가 많습니다.

데이터 구조

레이더 차트에 대한 데이터집합의 data 속성은 숫자 배열로 지정됩니다.

데이터 배열의 각 포인트는 같은 인덱스의 라벨과 연결됩니다.

data: [20, 10]

레이더 차트에 대해, 각 포인트가 무엇을 의미하는지 맥락을 제공하는 것은, 각 차트 포인트 주변을 보여주는 문자열 배열에 포함됩니다.

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

---

도넛 차트 와 파이 차트

파이와 도넛 차트는 차트에서 가장 흔하게 사용됩니다.

이 차트들은 세그먼트로 나뉘며, 각 세그먼트의 호는 각 데이터의 조각의 비례한 값을 보여줍니다.

데이터 사이에 관계 비율을 보여주는데 탁월합니다.

파이와 도넛 차트는 Chart.js에서 사실상 동일한 클래스이지만,

기본 값이 다르다는 한가지 차이가 있습니다 - 바로 cutoutPercentage 값이죠.

이것은 내부의 몇 퍼센트를 잘라내여 하는지를 나타냅니다.

파이 차트에선 0이 기본 값이고, 도넛 차트에선 50이 기본 값입니다.

또한 Chart 코어에서 두 개의 별칭으로 등록됩니다.

기본 값이 다른 것과 별칭이 다른 것 외에는 파이와 도넛은 정확이 같습니다.

)

데이터 구조

파이 차트에서, 데이터 지점들의 배열을 담은 데이터집합이 필요합니다.

데이터 지점들은 반드시 숫자여야 하며, Chart.js는 각 관련 비율의 모든 숫자들을 합하고 계산합니다.

또한 툴팁을 정확히 표현할 수 있는 라벨의 배열을 지정해줘야 합니다.

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // 이 라벨들은 다른 호들을 호버했을 때 툴팁과 범례 안에서 표현됩니다
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

---

극좌표형(폴라) 차트

극좌표 차트는 파이 차트와 비숫하지만 각 세그먼트가 같은 각도를 가지고 있습니다 - 값에 따라 세그먼트의 반지름이 다릅니다.

차트의 이 유형은 파이 차트와 비슷하게 비교를 보여주고 싶을 때 유용할 뿐만 아니라 맥락에 대한 값의 규모를 보여주기에도 좋습니다.

데이터 구조

극좌표 차트에서, 데이터 지점들의 배열을 담은 데이터집합이 필요합니다.

데이터 지점은 반드시 숫자여야 하며, Chart.js는 모듣 숫자들을 총합과 각 관련 비율을 계산합니다.
또한 각 조각을 툴팁에 정확히 표현하도록 하기 위해 특정 라벨의 배열이 필요합니다.

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // 이 라벨들은 다른 호를 호버하면 범례와 툴팁에 나타납니다
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

---

버블차트

버블 차트는 3차원 데이터를 동시에 보여주기 위해 사용됩니다.

버블의 위치는 처음 두 차원과 해당 수평과 수직 축에 의해 결정됩니다.

3차원은 각 버블들의 크기로 표시됩니다.

데이터 구조

버블 차트 데이터집합에는 다음 속성을 포함하는 객체로 표현되는 각 포인트의 데이터 data 배열이 포함되어야 합니다.

{
    // X 값
    x: number,

    // Y 값
    y: number,

    // 픽셀 단위의 버블 반경 (크기 조정 안됨).
    r: number
}

중요: 반지름 속성 r 은 차트에 의해 크기가 조정되지 않으며, 캔버스에 그려지는 버블의 픽셀 단위의 원시 반지름입니다.

---

산점도 차트

산점도 차트는 x 축이 선형 축으로 변경된 기본 선형 차트를 기반으로 합니다.

도표 차트를 사용하려면, X 와 Y 속성을 포함하는 객체로 데이터를 전달해야 합니다.

데이터 구조

데이터를 2가지 형식으로 제공할 수 있는 선형차트와는 다르게, 도표 차트는 포인트 형식의 데이터만 허용합니다.

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

---

혼합 차트

둘 이상의 다른 차트 유형이 조합된 혼합 차트를 만들 수 있습니다.

흔한 예시로 막대 차트에 선형 데이터집합을 포함할 수 있습니다.