Class ChartWrapper<TType, TOptions>Abstract

constructor

• new ChartWrapper<
      TType extends keyof ChartTypeRegistry,
      TOptions extends CustomChartOptions<TType> = CustomChartOptions<TType>,
  >(
      type: TType,
      labels: undefined | (string | number)[],
      _datasets: CustomChartDatasets<TType>[],
      options: TOptions,
      plugins?: any,
  ): ChartWrapper<TType, TOptions>

  Type Parameters

  • TType extends keyof ChartTypeRegistry
  • TOptions extends CustomChartOptions<TType> = CustomChartOptions<TType>

  Parameters

  • type: TType
  • labels: undefined | (string | number)[]
  • _datasets: CustomChartDatasets<TType>[]
  • options: TOptions
  • Optionalplugins: any

  Returns ChartWrapper<TType, TOptions>

Staticregistry

Abstractbuild

• build(id?: string): ChartConfig

  Parameters

  • Optionalid: string

  Returns ChartConfig

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

makeConfig

• makeConfig(id?: string): ChartConfig

  Parameters

  • Optionalid: string

  Returns ChartConfig

  Description

  레거시 지원용 차트 설정 객체를 생성합니다.

  Since

  1.0.0

getChartData

• getChartData(uid: string): CustomChartDatasets<TType>
  Beta

  Parameters

  • uid: string

  Returns CustomChartDatasets<TType>

  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<TType>): void
  Beta

  Parameters

  • uid: string
  • newDataset: CustomChartDatasets<TType>

  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<TType>,
          size: { height: number; width: number },
      ) => void,
  ): this
  Beta

  Parameters

  • callback: (chart: Chart<TType>, 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