LineEffect

LineEffect

Line Chart의 Effect를 생성하는 클래스입니다.

Constructor

new LineEffect(_object, _option)

사용자 옵션을 받아서 Line Chart의 Effect를 생성합니다.
Parameters:
Name Type Description
_object object ChartJS, PixiJS, 호출한 Effect 클래스
_option object 사용자 지정 Effect 옵션
Source:

Members

alpha :number

알파 값
Source:

chart :ChartJS

생성한 ChartJS 오브젝트
Source:

chartAnimation :boolean

차트가 업데이트 중인지 아닌지 여부
Source:

flag :number

알파 값 플래그
Source:

graphics :Graphics

경고 아이콘 및 limit 선을 그리기 위한 PIXI.Graphics
Source:

isSoundReady :boolean

등록한 사운드가 로드되었는지 여부
Source:

lineTracerOneTime :boolean

lineTracer 차트 애니메이션 플래그
Source:

lowerLimitCompleteOneTime :boolean

lowerLimit 효과일 때 최초적용 옵션을 위한 변수
Source:

lowerLimitOneTime :boolean

lowerLimit 차트 애니메이션 플래그
Source:

option :object

Effect에 대한 사용자 옵션
Source:

parent :Effect

Effect를 호출한 상위 Effect Class
Source:

pixi :PIXI

Effect를 생성할 PIXI 오브젝트
Source:

sound :Howler

사운드 제어 변수
Source:

upperLimitCompleteOneTime :boolean

upperLimit 효과일 때 최초적용 옵션을 위한 변수
Source:

upperLimitOneTime :boolean

upperLimit 차트 애니메이션 플래그
Source:

Methods

_createTempSprite()

내부 함수

차트 데이터 업데이트 및 변화 시 lineTracer 페이드 아웃 처리를 위해 마지막 위치에 임시 이미지 생성하는 함수입니다.

Source:

_createTexts()

내부 함수

upperLimit, lowerLimit에서 데이터 이름과 값을 표시하기 위한 PIXI.Text 객체를 생성하는 함수임니다.

Source:

_drawWarning()

내부 함수

경고 아이콘 그래픽을 생성하는 함수입니다.

Source:

_drawWarningBackground()

내부 함수

경고 아이콘 백그라운드 둥근 사각형 그래픽을 생성하는 함수입니다.

Source:

_getLineAngle(_start, _end) → {number}

내부 함수

lineTracer 에서 스프라이트 각도를 계산하는 함수입니다.

Parameters:
Name Type Description
_start object 첫 번째 지점의 x, y좌표 셋
_end object 첫 번째 지점의 x, y좌표 셋
Source:

_initRoundedTriangle()

내부 함수

모서리가 둥근 삼각형을 생성하는 핵심 함수입니다.

Source:

_limitUpdate()

내부 함수

기준치 제한하는 Effect에 대한 업데이트 함수입니다.

Source:

destroy()

생성한 Effect를 제거하는 함수입니다.
Source:

lineTracer()

사용자가 지정한 이미지가 라인 그래프를 따라 움직이는 Effect 입니다.
Source:
Example
const option = {
    dataset: 0, // 차트 데이터 셋 번호 지정
    height: 48, // 이미지 높이
    width: 48, // 이미지 너비
    src: '../img/img1.png', // 이미지 경로
    angle: true, // 이미지 각도 변화 여부
    easing: 'linear', // 애니메이션 Easing 이름
    fadeIn: false, // 이미지 페이드 인 여부
    fadeOut: false, // 이미지 페이드 아웃 여부
    loop: true, // 애니메이션 반복 여부
    time: 2.5, // 애니메이션 수행 시간(초)
};

window.chart[0].effect.add('lineTracer', option);

lowerLimit()

기준치 미만시 경고 아이콘 깜박임과 함께 기준선이 표시되는 Effect 입니다.
Source:
Example
const option = {
  dataset: [1, 3], // 지정할 데이터 셋 번호 배열(지정하지 않을 경우 전체 데이터 셋에 적용됨)
  value: 20 // 미만 값
};

window.chart[0].effect.add('lowerLimit', option);

upperLimit()

기준치 초과시 경고 아이콘 깜박임과 함께 기준선이 표시되는 Effect 입니다.
Source:
Example
const option = {
  dataset: [0, 2], // 지정할 데이터 셋 번호 배열(지정하지 않을 경우 전체 데이터 셋에 적용됨)
  value: 80 // 초과 값
};

window.chart[0].effect.add('upperLimit', option);