stz-util Documentation - v2.0.3
    Preparing search index...

    Class CartesianChartWrapper<TType>Abstract

    Type Parameters

    Hierarchy (View Summary)

    Implements

    Index

    Chart

    build isCartesianChartType

    Dataset

    addData addDataset decorateDataset getData getDataset setData setDataset

    Other

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

    Plugins

    addZoom customLegend

    Scales

    ensureY1AxisExists setAxisPosition setAxisRange setAxisTitle setGridOptions setScales setYAxisForDataset setYAxisID

    dataset

    getChartData setChartData

    options

    onResize setBackgroundColor setLegend setTitle

    plugin

    addStreaming hasPlugin removePlugin setPlugin

    scales

    setGrid

    Chart

    • Parameters

      • Optionalid: string

      Returns ChartConfig

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

      1.0.0

    Dataset

    • Parameters

      • OptionaldatasetIndexOrData: any

        데이터셋 인덱스(숫자) 또는 추가할 데이터. 숫자가 아니면 데이터로 간주하고 마지막 데이터셋에 추가됩니다.

      • Optionaldata: any

        추가할 데이터 (단일 객체 또는 배열). 첫 번째 인자가 데이터인 경우 생략.

      Returns this

      데이터셋에 데이터 포인트를 추가합니다. time series인 경우 자동으로 시간 순서대로 정렬됩니다.

      데이터셋이 없거나 인덱스가 유효하지 않을 경우 에러를 발생시킵니다.

      1.6.6

      // 마지막 데이터셋에 단일 데이터 추가
      chart.addData({ x: 10, y: 20 });

      // 마지막 데이터셋에 여러 데이터 추가
      chart.addData([{ x: 10, y: 20 }, { x: 30, y: 40 }]);

      // 특정 데이터셋(0번)에 데이터 추가
      chart.addData(0, { x: 10, y: 20 });

      // 특정 데이터셋(1번)에 여러 데이터 추가
      chart.addData(1, [{ x: 10, y: 20 }, { x: 30, y: 40 }]);

    • Parameters

      Returns string

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

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

      1.0.0

    • Protected

      Parameters

      • ds: any
      • idx: number

      Returns void

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

      1.0.1

    • Parameters

      • uidOrIndex: string | number

        데이터셋 UID(문자열) 또는 인덱스(숫자)

      Returns undefined | CustomCartesianDataset<TType>

      데이터셋을 UID 또는 인덱스로 조회합니다.

      데이터셋이 없거나 찾을 수 없을 때 에러를 발생시킵니다.

      1.6.6

      // UID로 조회
      const dataset = chart.getData('dataset-uid');

      // 인덱스로 조회
      const dataset = chart.getData(0);

    • Parameters

      • uid: string

      Returns undefined | CustomCartesianDataset<TType>

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

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

      1.0.0

    • Parameters

      • uidOrIndex: string | number

        데이터셋 UID(문자열) 또는 인덱스(숫자)

      • dataset: CustomCartesianDataset<TType>

        새로운 데이터셋

      Returns this

      데이터셋을 UID 또는 인덱스로 교체합니다.

      데이터셋이 없거나 찾을 수 없을 때 에러를 발생시킵니다.

      1.6.6

      // UID로 교체
      chart.setData('dataset-uid', { label: 'New Dataset', data: [...] });

      // 인덱스로 교체
      chart.setData(0, { label: 'New Dataset', data: [...] });

    • Parameters

      Returns this

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

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

      1.0.0

    Other

    Private Optional_chartId

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

      Returns string

    • set chartId(value: string): void

      Parameters

      • value: string

      Returns void

    • Private

      Parameters

      • color: string
      • alpha: number

      Returns string

      색상에 알파 값을 추가합니다.

    • Parameters

      Returns this

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

      Plugins

      1.0.0

      defultDataLabels = false

    • Parameters

      • config: any

      Returns any

    • Returns boolean

    • Returns boolean

    • Returns boolean

    • Private

      Returns boolean

      x축이 time series인지 확인합니다.

    • Parameters

      • id: string = ''

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

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

    • Returns (
          | {
              id: string;
              afterDestroy(chart: any): void;
              afterDraw(chart: any, args: any, options: any): void;
          }
          | {
              _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;
              afterInit(chart: any, args: any, options: any): void;
              beforeUpdate(chart: any, args: any, options: any): void;
          }
      )[]

    • Returns boolean

    • 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

      • padding: any

      Returns this

      차트의 패딩을 설정합니다.

      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

    • Parameters

      Returns this

      HTML 범례를 추가합니다. 해당 기능은 플러그인 설치가 필요합니다.

      옵션이 비어있거나 객체가 아닐 경우 에러를 발생시킵니다.

      1.0.0

    Scales

    • Private

      Returns void

      y1 축을 보장합니다.

      1.0.0

    • 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

      Returns this

      카테시안 차트의 축 제목을 설정합니다. x, y 뿐만 아니라 y1, x1 등 커스텀 축도 지원합니다.

      1.0.0

      chart.setAxisTitle('y', { display: true, text: 'Primary Y Axis' });
      chart.setAxisTitle('y1', { display: true, text: 'Secondary Y Axis' });
      chart.setAxisTitle('x', { display: true, text: 'Time', color: '#333' });

    • Parameters

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

      Returns this

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

      1.0.0

    • Parameters

      • datasetIndex: number
      • axisId: string = 'y'

      Returns this

      데이터셋에 y축을 설정합니다.

      1.0.0

      axisId = 'y'

    • Parameters

      • datasetIndex: number
      • axisID: string

      Returns this

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

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

      1.0.0

    dataset

    options

    • Beta

      Parameters

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

    plugin

    • Parameters

      • streamingOptions: StreamingOptions

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

      Returns this

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

      1.8.0

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

    • Parameters

      • pluginId: string

      Returns boolean

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

      1.0.0

    • 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
    dataset
    options
    plugin
    scales