Class DoughnutChartWrapper

build

• build(id?: string): ChartConfig
  Beta

  Parameters

  • Optionalid: string

  Returns ChartConfig

  Description

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

  Since

  1.0.0

setBorderColor

• setBorderColor(datasetIndex: number, borderColor: string | string[]): this
  Beta

  Parameters

  • datasetIndex: number

    데이터셋 인덱스

  • borderColor: string | string[]

    경계선 색상

  Returns this

  Description

  데이터셋의 경계선 색상을 설정합니다.

  Since

  1.0.0

setBorderWidth

• setBorderWidth(datasetIndex: number, borderWidth: number): this
  Beta

  Parameters

  • datasetIndex: number

    데이터셋 인덱스

  • borderWidth: number

    경계선 너비

  Returns this

  Description

  데이터셋의 경계선 너비를 설정합니다.

  Since

  1.0.0

setSegmentImages

• setSegmentImages(
      images: string[] | UidImageMapping[],
      config?: Partial<Omit<SegmentImageConfig, "images">>,
  ): this
  Beta

  Parameters

  • images: string[] | UidImageMapping[]

    이미지 URL 배열 (URL, Base64, SVG, Emoji 등) 또는 UID 매핑 배열

  • Optionalconfig: Partial<Omit<SegmentImageConfig, "images">>

    이미지 설정 옵션

  Returns this

  Description

  각 세그먼트에 이미지를 설정합니다.

  Since

  1.6.0

  Example

  // URL 방식 (순서대로 매핑)
  chart.setSegmentImages([
    'https://example.com/icon1.png',
    'https://example.com/icon2.png'
  ]);
  
  // UID 매핑 방식
  chart.setSegmentImages([
    { _uid: 'chart_id_ds_0', image: 'public/assets/image1.png' },
    { _uid: 'chart_id_ds_1', image: 'public/assets/image2.png' }
  ]);
  
  // 크기 조절
  chart.setSegmentImages(
    ['image1.png', 'image2.png'],
    { width: 40, height: 40, backgroundColor: 'transparent' }
  );
  Copy

Readonlytype

Staticregistry

chartId

• get chartId(): string

  Returns string

• set chartId(value: string): void

  Parameters

  • value: string

  Returns void

Staticcreate

• create<TType extends keyof ChartTypeRegistry>(
      type: TType,
      labels: (string | number)[],
      datasets: CustomChartDatasets<TType>[],
      options?: CustomChartOptions<TType>,
      plugins?: Plugin<keyof ChartTypeRegistry, AnyObject>,
  ): TType extends keyof ChartBuilderMap
      ? ChartBuilderMap[TType<TType>]
      : ChartBuilder<TType>

  Type Parameters

  • TType extends keyof ChartTypeRegistry

  Parameters

  • type: TType
  • labels: (string | number)[]
  • datasets: CustomChartDatasets<TType>[]
  • Optionaloptions: CustomChartOptions<TType>
  • Optionalplugins: Plugin<keyof ChartTypeRegistry, AnyObject>

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

Statichas

• has(type: keyof ChartTypeRegistry): boolean

  Parameters

  • type: keyof ChartTypeRegistry

  Returns boolean

Staticregister

• register<TType extends keyof ChartTypeRegistry, TInstance>(
      type: TType,
      wrapperClass: Constructor<TType, TInstance>,
  ): void

  Type Parameters

  • TType extends keyof ChartTypeRegistry
  • TInstance

  Parameters

  • type: TType
  • wrapperClass: Constructor<TType, TInstance>

  Returns void

getChartData

• getChartData(uid: string): CustomChartDatasets<"doughnut">
  Beta

  Parameters

  • uid: string

  Returns CustomChartDatasets<"doughnut">

  Description

  특정 데이터셋을 식별자(UID 또는 라벨)로 조회합니다.

  Since

  1.0.0

  Example

  const dataset = chart.getChartData('dataset-uid-or-label');
  console.log(dataset);
  @beta
  Copy

setChartData

• setChartData(uid: string, newDataset: CustomChartDatasets<"doughnut">): void
  Beta

  Parameters

  • uid: string
  • newDataset: CustomChartDatasets<"doughnut">

  Returns void

  Description

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

  Since

  1.0.0

  Example

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

onResize

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

  Parameters

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

  Returns this

  Description

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

  Since

  1.0.0

setLegend

• setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this

  Parameters

  • legendOptions: DeepPartial<LegendOptions<TType>>

  Returns this

  Description

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

  Since

  1.0.0

  Example

  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);
    }
  });
  Copy

setTitle

• setTitle(titleOptions: DeepPartial<CommonCartesianTitleConfig>): this

  Parameters

  • titleOptions: DeepPartial<CommonCartesianTitleConfig>

  Returns this

  Description

  차트의 제목을 설정합니다.

  Since

  1.0.0

  Example

  chart.setTitle({
    text: '차트 제목',
    align: 'center'  // 'start' | 'center' | 'end'
  });
  Copy

addStreaming

• addStreaming(streamingOptions: StreamingOptions): this

  Parameters

  • streamingOptions: StreamingOptions

    chartjs-plugin-streaming 플러그인에 전달할 옵션 객체.

  Returns this

  Description

  실시간 스트리밍 옵션을 설정합니다. 이 메서드를 사용하기 전에, 사용자는 'chartjs-plugin-streaming'을 설치하고 Chart.js에 직접 등록해야 합니다.

  Since

  1.8.0

  Example

  // 1. 사용자 측에서 웹소켓 등 데이터 소스 설정
  const myWebSocket = new WebSocket('wss://my-data-source');
  
  // 2. ChartWrapper에 스트리밍 옵션 적용
  chart.addStreaming({
    duration: 20000, // 20초 분량의 데이터를 차트에 표시
    refresh: 1000,    // 1초마다 차트 업데이트
    onRefresh: (chart) => {
      // 3. 데이터 소스로부터 받은 데이터를 차트에 추가
      myWebSocket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        chart.data.datasets[0].data.push({
          x: data.timestamp,
          y: data.value
        });
      };
    }
  });
  Copy

hasPlugin

• hasPlugin(pluginId: string): boolean

  Parameters

  • pluginId: string

  Returns boolean

  Description

  플러그인이 존재하는지 확인합니다.

  Since

  1.0.0

removePlugin

• removePlugin(pluginId: string): this

  Parameters

  • pluginId: string

  Returns this

  Description

  플러그인을 제거합니다.

  Since

  1.0.0

setPlugin

• setPlugin(plugin: any, replaceIfExists?: boolean): this

  Parameters

  • plugin: any

    단일 플러그인 또는 플러그인 배열

  • replaceIfExists: boolean = true

  Returns this

  Description

  플러그인을 추가합니다. 단일 플러그인 또는 플러그인 배열을 받을 수 있습니다.

  Since

  1.0.0