stz-util Documentation - v1.5.2
    Preparing search index...

    Class BubbleChartWrapper

    Hierarchy (View Summary)

    Implements

    Index

    Chart

    build

    Dataset

    addDataset decorateDataset getDataset setDataset

    Other

    constructor labels options plugins? type registry chartId datasets addDataLabels addRangeSlider configAop isBar isLine isScatter makeConfig mustHavePlugins normalize requireLabels setAddImg setAllDatasetsParsing setBackgroundAlpha setDatasetParsing setPadding setParsingKey create has register

    Plugins

    addZoom customLegend

    Scales

    setAxisPosition setAxisRange setAxisTitle setGridOptions setScales setYAxisForDataset setYAxisID

    data

    setAllBubbleDataRadius setBubbleDataRadius setBubbleDataRadiusByName setBubbleDataRadiusWhere updateBubbleDataRadius

    dataset

    getChartData setAllBorderWidth setAllBubbleRadius setAllHoverRadius setAllRotation setBorderWidth setBubbleRadius setChartData setHoverRadius setRotation

    options

    onResize setBackgroundColor setLegend setTitle

    options (기능 테스트 중)

    sparkBubbleChart

    plugin

    hasPlugin removePlugin setPlugin

    scales

    setGrid

    Chart

    • Parameters

      • Optionalid: string

      Returns ChartConfig

      차트 설정 객체를 생성합니다. 이 메소드는 차트의 구성 요소를 종합하여 Chart.js에서 사용할 수 있는 형식으로 반환합니다.

      1.0.0

    Dataset

    • Parameters

      Returns string

      새로운 데이터셋을 추가하고 고유 식별자(UID)를 반환합니다. 데이터셋 배열이 비어있으면 새로 생성합니다.

      데이터셋이 null 또는 undefined일 때 에러를 발생시킵니다.

      1.0.0

    • Protected

      Parameters

      • ds: any
      • idx: number

      Returns void

      데이터셋의 기본적은 옵션을 추가하거나 부여합니다.

      1.0.1

    • Parameters

      • uid: string

      Returns undefined | CustomCartesianDataset<"bubble">

      데이터셋 배열에서 주어진 UID와 일치하는 데이터셋을 반환합니다. UID가 없거나 데이터셋이 비어있으면 undefined를 반환합니다.

      UID가 없거나 데이터셋이 비어있을 때 에러를 발생시킵니다.

      1.0.0

    • Parameters

      Returns this

      주어진 UID를 가진 데이터셋을 새로운 데이터셋으로 교체합니다. UID가 없거나 데이터셋이 비어있으면 에러를 발생시킵니다.

      UID가 없거나 데이터셋이 비어있을 때 에러를 발생시킵니다.

      1.0.0

    Other

    labels: (string | number)[]
    options: CustomChartOptions
    plugins?: any
    type: "bubble"
    registry: Map<string, Constructor<any, any>> = ...
    • get chartId(): string

      Returns string

    • set chartId(value: string): void

      Parameters

      • value: string

      Returns void

    • Parameters

      Returns this

      차트에 데이터 라벨을 추가합니다. 기본 옵션을 사용하거나 사용자 정의 옵션을 적용할 수 있습니다.

      Plugins

      1.0.0

      defultDataLabels = false

    • Parameters

      • Optionalid: string

      Returns { _chartId: any; data: any; options: any; plugins: any; type: any }

      차트 설정 객체를 생성합니다. 이 메소드는 레거시 지원용으로, Chart.js에서 사용할 수 있는 형식으로 반환합니다.

    • Returns {
          _tooltips: WeakMap<WeakKey, any>;
          id: string;
          _handleGroupVisibility(chart: any, datasets: any[]): void;
          _handleLegendClick(
              e: any,
              legendItem: any,
              legend: any,
              toggleBehavior: string,
          ): void;
          _hideTooltip(chart: any): void;
          _hitTestLegend(chart: any, x: number, y: number): any;
          _setupLegendTooltip(chart: any): void;
          _showTooltip(
              chart: any,
              e: MouseEvent,
              tooltipContent: string | ((context: any) => string),
              legendItem: any,
          ): void;
          afterDestroy(chart: any): void;
          afterDraw(chart: any, args: any, options: any): void;
          afterInit(chart: any, args: any, options: any): void;
          beforeUpdate(chart: any, args: any, options: any): void;
      }[]

    • Parameters

      • axis: string

      Returns this

      축에 이미지를 추가합니다.

      이미지 속성이 없는 데이터셋이 있을 경우 에러를 발생시킵니다.

      Scales

      1.0.0

    • Parameters

      • xAxisKey: string | false
      • yAxisKey: string | false

      Returns this

      모든 데이터셋의 파싱 키를 설정합니다. xAxisKey와 yAxisKey를 각각 설정할 수 있습니다. false로 설정하면 해당 축에 대한 파싱을 비활성화합니다.

      데이터셋이 존재하지 않을 경우 에러를 발생시킵니다.

      options

      1.0.0

    • Parameters

      • alpha: number

      Returns this

      데이터셋의 배경색에 알파 값을 설정합니다.

      알파 값이 0.0 미만 또는 1.0 초과일 경우 에러를 발생시킵니다.

      1.0.0

      Dataset

    • Parameters

      • datasetIndex: number
      • xAxisKey: string | false
      • yAxisKey: string | false

      Returns this

      특정 데이터셋의 파싱 키를 설정합니다. xAxisKey와 yAxisKey를 각각 설정할 수 있습니다. false로 설정하면 해당 축에 대한 파싱을 비활성화합니다.

      데이터셋이 존재하지 않을 경우 에러를 발생시킵니다.

      options

      1.0.0

    • Parameters

      • xAxisKey: string | false
      • yAxisKey: string | false

      Returns this

      데이터셋의 파싱 키를 설정합니다. xAxisKey와 yAxisKey를 각각 설정할 수 있습니다. false로 설정하면 해당 축에 대한 파싱을 비활성화합니다.

      xAxisKey와 yAxisKey가 모두 false일 경우 에러를 발생시킵니다.

      options

      1.0.0

    • Type Parameters

      • TType extends keyof ChartTypeRegistry

      Parameters

      Returns TType extends keyof ChartBuilderMap
          ? ChartBuilderMap[TType<TType>]
          : ChartBuilder<TType>

    • Parameters

      • type: keyof ChartTypeRegistry

      Returns boolean

    • Type Parameters

      • TType extends keyof ChartTypeRegistry
      • TInstance

      Parameters

      Returns void

    Plugins

    • Parameters

      • defaultZoom: boolean = false
      • OptionalzoomOption: object

      Returns this

      줌 기능을 추가합니다. 해당 기능은 플러그인 설치가 필요합니다.

      1.0.0

      defaultZoom = false

    Scales

    • Parameters

      • axis: string
      • position: "left" | "right"

      Returns this

      축의 위치를 설정합니다.

      해당 축이 존재하지 않거나 position 옵션을 지원하지 않을 경우 에러를 발생시킵니다.

      1.0.0

    • Parameters

      • axis: "x" | "y"
      • Optionalmin: number
      • Optionalmax: number

      Returns this

      카테시안 차트의 축 범위를 설정합니다. 해당 차트의 스케일을 min, max 를 입력 받은 값으로 고정합니다.

      1.0.0

    • Parameters

      • axis: "x" | "y"
      • gridOptions: { color?: string; display?: boolean; lineWidth?: number }

      Returns this

      카테시안 차트의 그리드 옵션을 설정합니다.

      1.0.0

    • Parameters

      • datasetIndex: number
      • axisID: string

      Returns this

      데이터셋의 yAxisID를 설정합니다.

      해당 차트 타입이 yAxisID 옵션을 지원하지 않을 경우 에러를 발생시킵니다.

      1.0.0

    data

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • radius: number

        반지름 값

      Returns this

      특정 데이터셋의 모든 버블 데이터의 r값을 일괄 설정합니다.

      1.0.0

      bubbleChart.setAllBubbleDataRadius(0, 15); // 첫 번째 데이터셋의 모든 버블 크기를 15로 설정

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • dataIndex: number

        데이터 인덱스

      • radius: number

        반지름 값

      Returns this

      특정 데이터셋의 특정 버블 데이터의 r값을 설정합니다.

      1.0.0

      bubbleChart.setBubbleDataRadius(0, 2, 25); // 첫 번째 데이터셋의 세 번째 버블 크기를 25로 설정

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • name: string

        찾을 이름 (data 객체의 name 속성)

      • radius: number

        반지름 값

      Returns this

      특정 데이터셋에서 name으로 찾아서 버블 데이터의 r값을 설정합니다.

      1.0.0

      bubbleChart.setBubbleDataRadiusByName(0, '서울', 50); // '서울' 버블의 크기를 50으로 설정

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • filterFn: (dataPoint: any) => boolean

        필터 함수 (dataPoint) => boolean

      • radius: number

        반지름 값

      Returns this

      특정 데이터셋에서 조건에 맞는 버블들의 r값을 설정합니다.

      1.0.0

      // 인구가 50 이상인 도시만 크기 50으로
      bubbleChart.setBubbleDataRadiusWhere(0, (data) => data.population >= 50, 50);

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • updateFn: (dataPoint: any, index: number) => number

        업데이트 함수 (dataPoint, index) => newRadius

      Returns this

      특정 데이터셋의 버블 데이터 r값을 함수를 통해 업데이트합니다.

      1.0.0

      // 모든 버블의 크기를 2배로
      bubbleChart.updateBubbleDataRadius(0, (data) => data.r * 2);

      // 인구에 비례하여 크기 설정
      bubbleChart.updateBubbleDataRadius(0, (data) => Math.sqrt(data.population) * 3);

      // 조건부 업데이트
      bubbleChart.updateBubbleDataRadius(0, (data) =>
        data.name === '서울' ? 50 : data.r
      );

    dataset

    • Parameters

      • borderWidth: number

        테두리 두께

      Returns this

      모든 데이터셋의 Border Width를 설정합니다.

      1.0.0

    • Parameters

      • radius: number

        반지름 값

      Returns this

      모든 데이터셋의 버블 반지름을 설정합니다.

      1.0.0

    • Parameters

      • hoverRadius: number

        호버 시 반지름 값

      Returns this

      모든 데이터셋의 호버 시 버블 반지름을 설정합니다.

      1.0.0

    • Parameters

      • rotation: number

        회전 각도 (도 단위)

      Returns this

      모든 데이터셋의 회전 각도를 설정합니다.

      1.0.0

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • borderWidth: number

        테두리 두께

      Returns this

      데이터셋의 Border Width를 설정합니다.

      1.0.0

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • radius: number

        반지름 값

      Returns this

      데이터셋의 버블 반지름을 설정합니다.

      1.0.0

    • Beta

      Parameters

      Returns void

      특정 데이터셋을 식별자(UID 또는 라벨)로 찾아 새로운 데이터셋으로 교체합니다.

      1.0.0

      chart.setChartData('dataset-uid-or-label', { label: 'New Dataset', data: [10, 20, 30] });
      @beta

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • hoverRadius: number

        호버 시 반지름 값

      Returns this

      데이터셋의 호버 시 버블 반지름을 설정합니다.

      1.0.0

    • Parameters

      • datasetIndex: number

        데이터셋 인덱스

      • rotation: number

        회전 각도 (도 단위)

      Returns this

      데이터셋의 회전 각도를 설정합니다.

      1.0.0

    options

    • Beta

      Parameters

      • callback: (chart: Chart<"bubble">, size: { height: number; width: number }) => void

      Returns this

      차트 리사이즈 이벤트 콜백 함수를 설정합니다.

      1.0.0

    • Parameters

      • color: string

      Returns this

      차트의 캔버스 배경색을 설정합니다.

      1.0.0

      chart.setBackgroundColor('rgba(255, 255, 255, 0.5)');
      chart.setBackgroundColor('#f0f0f0');

    • Parameters

      Returns this

      차트의 범례를 설정합니다.

      1.0.0

      chart.setLegend({
      position: 'bottom',
        align: 'center',
        labels: {
          boxWidth: 40,
          padding: 15,
          font: {
            size: 14,
            weight: 'bold'
          },
          color: '#333',
          usePointStyle: true
        }
        onClick: (e, legendItem, legend) => {
          console.log('Legend clicked:', legendItem);
        }
      });

    options (기능 테스트 중)

    • Beta

      Returns this

      스파크 버블 차트 옵션을 적용합니다.

      1.0.0

    plugin

    • Parameters

      • plugin: any
      • replaceIfExists: boolean = true

      Returns this

      플러그인을 추가합니다.

      1.0.0

    scales

    • Parameters

      • axis: string
      • gridOptions: GridLineOptions

      Returns this

      축의 그리드 라인 옵션을 설정합니다.

      1.0.0

      chart.setGrid('y', { color: 'rgba(0, 0, 0, 0.1)', lineWidth: 1 });

    Settings

    Member Visibility

    On This Page

    Chart
    Dataset
    Other
    Plugins
    Scales
    data
    dataset
    options
    options (기능 테스트 중)
    plugin
    scales