막대형

막대형 차트는 수직 막대로 데이터 값을 표현하고 보여주는 방법을 제공합니다. 트렌드 데이터를 보여주거나 여러 데이터 집합들을 나란히 비교하고 싶을 때 사용합니다.

사용 예시

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

데이터집합 속성들

막대형 차트는 각 데이터집합에 대한 속성들의 숫자를 특정할 수 있습니다. 이것들은 특정 데이터집합에 대한 속성들을 보여줄 때 사용됩니다. 예를 들어, 막대의 색상은 일반적으로 이런 방법으로 설정합니다.

일반적인 속성

스타일링

각 막대에 대한 스타일을 다음의 속성들로 제어할 수 있습니다:

이 모든 값들이 만약 undefined라면, 관련 elements.rectangle.* 옵션으로 대체됩니다.

borderSkipped

이 설정은 채우기 기준에 막대 선을 그리는 것을 방지하는데 사용됩니다. 일반적으로, 막대형 차트에서 파생되는 차트 유형을 만들 때를 제외하고는 변경할 필요가 없습니다.

주의: 수직 막대형 차트가 음수 값이라면, top 과 bottom 은 뒤집힙니다. 수평 차트일 때 left 와 right 도 마찬가지입니다.

옵션들은:

• 'bottom'
• 'left'
• 'top'
• 'right'
• false

borderWidth

만약 이 값이 숫자라면, borderSkipped를 제외한 직사각형의 모든 변(왼쪽, 위, 오른쪽, 아래)에 적용됩니다. 만약 이 값이 객체라면, left 속성은 왼쪽 테두리 넓이를 정의합니다. right도 이와 비슷하며, top 과 bottom 속성 또한 특정할 수 있습니다. 테두리는 생략되고 borderSkipped 는 스킵됩니다.

상호작용

각 막대에 대한 상호작용은 다음의 속성들을 사용해 조절할 수 있습니다:

이 모든 값들이 만약 undefined이면, 관련 elements.rectangle.* 옵션으로 대체됩니다.

데이터집합 설정

막대형 차트는 다음의 관련 데이터집합 옵션을 설정할 수 있습니다:

사용 예시

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

barThickness

만약 이 값이 숫자라면, 각 막대의 넓이를 픽셀 단위로 적용합니다. 이것이 시행되면, barPercentage 와 categoryPercentage 는 무시됩니다.

만약 'flex'로 설정했다면, 기본 샘플 넓이들은 이전과 다음 샘플을 기준으로 샘플 넓이가 자동으로 계산되어 겹치지 않고 사용 가능한 전체 넓이를 취합니다. 단, 막대들은 크기는 barPercentage 와 categoryPercentage를 사용합니다. 백분율 옵션이 1일 때는 간격이 없습니다. 이 모드는 데이터가 균등한 간격이 아닐 때 다른 넓이의 막대를 생성합니다.

만약 설정 값이 없다면 (default), 기본 샘플 넓이는 막대가 겹쳐지는 것을 방지한 계산된 가장 작은 간격을 사용하며 막대들의 크기는 barPercentage 와 categoryPercentage를 사용합니다. 이 모드는 항상 같은 크기의 막대들을 생성합니다.

확장 설정

막대형 차트는 다음의 관련 scale 옵션으로 유니크한 기본 값을 설정합니다:

사용 예시

options = {
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        }]
    }
};

offsetGridLines

true이면, 특정 데이터 포인트에 대한 막대가 눈금 선 사이에 위치합니다. 눈금 선은 눈금 선 사이의 공간인 틱 간격의 절반만큼 왼쪽으로 이동하게 됩니다. false이면, 눈금 선은 막대의 중앙으로 바로 내려갑니다. 기본적으로 막대형 차트의 카테고리 비율이 대해서는 true로 설정되고, 다른 비율 또는 차트 유형에 대해서는 false로 설정됩니다.

기본 옵션

일반적으로 생성된 모든 막대형 차트에 적용되는 설정입니다. 전역 막대형 차트 설정은 Chart.defaults.bar에 저장되어 있습니다. 전역 옵션을 변경하면 변경한 이후에 생성된 차트에만 영향을 미칩니다. 존재하던 차트들은 변하지 않습니다.

barPercentage vs categoryPercentage

다음은 막대 백분율 옵션과 카테고리 백분율 옵션사이의 관계를 보여줍니다.

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |
Sample:     |==============|

데이터 구조

막대형 차트에 대한 데이터집합의 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]]

누적 막대 차트

막대 차트는 X와 Y축에 누적을 허용하는 설정 변경을 통해 누적 막대차트로 설정될 수 있습니다. 누적 막대 차트는 작은 조각들의 숫자들이 어떻게 하나의 데이터 시리즈가 만들어 졌는지 보여주는데 사용됩니다.

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

다음의 데이터집합 속성들은 누적 막대 차트를 지정합니다.

수평 막대 차트

수평 막대 차트는 수직 막대 차트의 변경입니다. 간혹 트렌드 데이터를 보여줄 때 사용되며, 여러 데이터집합들을 나란히 비교할 때 사용됩니다.

Example

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

설정 옵션

수평 막대 차트에 대한 설정 옵션은 막대 차트와 같습니다. 그러나, 막대 차트에서 x 축으로 지정된 어떤 옵션이든 수평 막대 차트에선 y 축에 적용됩니다.

기본 수평 막대 설정은 Chart.defaults.horizontalBar에 지정되어 있습니다.