버블 차트

버블 차트는 3차원 데이터를 동시에 보여주기 위해 사용됩니다. 버블의 위치는 처음 두 차원과 해당 수평과 수직 축에 의해 결정됩니다. 3차원은 각 버블들의 크기로 표시됩니다.

사용 예시

// 버블 차트
var myBubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: options
});

데이터집합 속성들

버블 차트는 각 데이터집합에 대해 여러 속성을 지정할 수 있습니다. 이 속성들은 특정 데이터집합의 속성을 설정하는데 사용됩니다. 예를 들어, 버블의 색상은 일반적으로 이러한 방식으로 설정됩니다.

이름 유형 스크립트 할 수 있는지 여부 인덱스 할 수 있는지 여부 기본 값
backgroundColor Color 예 예 'rgba(0, 0, 0, 0.1)'
borderColor Color 예 예 'rgba(0, 0, 0, 0.1)'
borderWidth number 예 예 3
data object[] - - required
hoverBackgroundColor Color 예 예 undefined
hoverBorderColor Color 예 예 undefined
hoverBorderWidth number 예 예 1
hoverRadius number 예 예 4
hitRadius number 예 예 1
label string - - undefined
order number - - 0
pointStyle string 예 예 'circle'
rotation number 예 예 0
radius number 예 예 3

일반적인 속성

이름 설명
label 범례와 툴팁에 표시되는 데이터집합에 대한 라벨..
order 데이터 집합의 그려지는 순서.

스타일링

각 버블의 스타일은 다음의 속성들로 제어할 수 있습니다:

이름 설명
backgroundColor 버블의 배경색.
borderColor 버블의 테두리 색상.
borderWidth 버블의 테두리 두께 (픽셀단위).
pointStyle 버블의 모양 스타일.
rotation 버블의 회전정도 (도).
radius 버블의 반지름 (픽셀단위).

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

상호작용

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

이름 설명
hoverBackgroundColor 호버했을 때 버블의 배경색.
hoverBorderColor 호버했을 때 버블의 테두리 색상.
hoverBorderWidth 호버했을 때 버블의 테두리 두께 (픽셀단위).
hoverRadius 호버했을 때 버블의 추가 반지름 (픽셀단위).
hitRadius 클릭 감지에 대한 버블의 추가 반지름 (픽셀단위).

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

기본 옵션

버블 차트 유형의 기본 값을 변경할 수도 있습니다. 이렇게하면 이 시점 이후에 생성된 모든 버블 차트들에 새로운 기본 값이 적용됩니다. 버블 차트의 기본 구성은 Chart.defaults.bubble에서 접근할 수 있습니다.

데이터 구조

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

{
    // X 값
    x: number,

    // Y 값
    y: number,

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

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

results matching ""

    No results matching ""