FlexChart의 버블 차트(Bubble Chart)

대부분의 차트 유형에서, 차트로 표시되는 속성의 이름을 정의하기 위한 바인딩 속성 제공을 필요로 합니다. 이러한 유형에는 열(Column), 막대(Bar), 산포(Scatter), 선(Line), 영역(Area), 스플라인(Spline)이 포함됩니다.

일부 차트 유형은 추가 정보가 필요합니다. 예를 들어 버블 차트 유형은 버블 크기를 결정하기 위한 추가 값이 필요합니다.

이 경우 바인딩 속성은 차트를 만드는 데 사용될 모든 속성의 이름을 포함하는, comma-delimited string으로 설정해야 합니다. 이 차트 유형의 데이터는 쉼표로 구분된 값으로 FlexChart 또는 계열(Series) 바인딩 속성을 사용하여 다음과 같은 포맷으로 정의할 수 있습니다: "yProperty, bubbleSizeProperty".

예를 들어, 아래 예시는 계열(Series)의 바인딩 속성을 'expenses,downloads'로 설정되어, expenses는 Y 값으로 사용되고 downloads는 거품 크기를 결정합니다:

import * as chart from '@mescius/wijmo.chart';

// create the bubble chart
var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    chartType: 'Bubble',
    bindingX: 'sales',
    series: [
        { binding: 'expenses,downloads' }
    ]
});

최소 및 최대 버블 크기 컨트롤

버블 크기는 binding 필드를 기반으로 변하지만, 버블이 렌더링하는 최대 및 최소 크기를 컨트롤 할 수 있습니다. 다음 옵션이 지원됩니다:

• bubble.maxSize: 버블 차트에서 기호의 최대 크기를 지정합니다. 기본값은 30픽셀입니다.

• bubble.minSize: 버블 차트에서 기호의 최소 크기를 지정합니다. 기본값은 5픽셀입니다.

예시 :

myChart.options = {
  bubble: { 
      minSize: 5, 
      maxSize: 30 
      }
}