Skip to content

Latest commit

 

History

History
316 lines (258 loc) · 8.85 KB

common-plot.md

File metadata and controls

316 lines (258 loc) · 8.85 KB

플롯

플롯은 실제 차트 시리즈가 렌더링 되는 영역이다.

image

plot이 제공하는 옵션은 다음과 같다.

type PlotOption = {
  width?: number;
  height?: number;
  visible?: boolean;
  lines?: {
    value: number | string;
    color: string;
    opacity?: number;
    id?: string;
  }[];
  bands?: {
    range: [number, number] | [string, string] | [number, number][] | [string, string][];
    color: string;
    opacity?: number;
    mergeOverlappingRanges?: boolean;
    id?: string;
  }[];
};

각 옵션이 지원되는 차트는 아래와 같다.

이름 차트명
width 모든 차트
height 모든 차트
visible Scatter, Bubble, Bar, Column, BoxPlot, Bullet, Line, Area, LineArea, LineScatter, ColumnLine
lines Line, Area, LineArea, LineScatter, ColumnLine
bands Line, Area, LineArea, LineScatter, ColumnLine

width, height 옵션은 플롯 영역의 크기를 변경할 수 있다. 이 가이드에서는 width, height를 제외한 옵션을 설명하며 해당 옵션은 레이아웃 설정 가이드를 참고하길 바란다.


visible 옵션은 플롯 라인이 표시되는 차트에서 사용할 수 있으며 라인의 가시성을 설정한다. 기본값은 true이다.

false로 설정하면 플롯 영역에 라인이 표시되지 않는다.

const options = {
  plot: {
    visible: false
  }
};

image


그 외 lines, bands 옵션은 아래에서 자세히 설명한다.

lines

lines 옵션을 사용하면 플롯 영역에 새로운 라인을 추가할 수 있다.

type PlotOption = {
  ...
  lines?: {
    value: number | string;
    color: string;
    opacity?: number;
    id?: string;
  }[];
};
이름 타입 설명
lines line[] 라인 객체 배열을 정의
line.value number | string x축에 대응하는 값
line.color string 라인 색상
line.opacity number 라인 투명도
line.id string 라인 id, removePlotLine API를 사용할 때 id 값을 인자로 넘겨주면 해당 라인이 삭제됨

사용 방법은 예시를 통해 알아보자.

const options = {
  plot: {
    ...
    lines: [
      {
        value: 4,
        color: '#1467e4',
      },
      {
        value: 10,
        color: '#fa2828',
      }
    ]
  }
};

image

bands 옵션

bands 옵션을 사용하면 플롯 영역에 범위를 지정하여 배경색을 채울 수 있다.

Line, Area, LineArea, LineScatter, ColumnLine 차트 용

type PlotOption = {
  ...
  bands?: {
    range: [number, number] | [string, string] |<br> [number, number][] | [string, string][];
    color: string;
    opacity?: number;
    mergeOverlappingRanges?: boolean;
    id?: string;
  }[];
};
이름 타입 설명
bands band[] 범위 객체 배열 정의
band.range [number, number] | [string, string] | [number, number][] | [string, string][] x축에 대응하는 값의 범위, 시작과 끝에 해당하는 값을 배열로 입력함
band.color string 박스 색상
band.opacity number 박스 색상의 투명도
band.mergeOverlappingRanges boolean range에서 설정한 범위가 겹쳐지는 부분이 있을 때, 박스를 겹쳐서 표시할 지 여부 (기본값: false)
band.id string 범위 박스 id, removePlotBand API를 사용할 때 id 값을 인자로 넘겨주면 해당 박스가 삭제됨

사용 방법은 예시를 통해 알아보자.

const options = {
  plot: {
    bands: [
      {
        range: [
          ['08/22/2020 10:35:00', '08/22/2020 10:45:00'],
          ['08/22/2020 10:40:00', '08/22/2020 10:55:00'],
        ],
        color: '#00bcd4',
        opacity: 0.2
      },
      {
        range: [['08/22/2020 10:05:00', '08/22/2020 10:15:00']],
        color: '#ff5722',
        opacity: 0.1
      }
    ]
  }
};

image

mergeOverlappingRanges 옵션을 true로 설정하면 겹쳐지는 부분을 매끄럽게 표현할 수 있다.

const options = {
  plot: {
    bands: [
      {
        range: [
          ['08/22/2020 10:35:00', '08/22/2020 10:45:00'],
          ['08/22/2020 10:40:00', '08/22/2020 10:55:00'],
        ],
        color: '#00bcd4',
        opacity: 0.2,
        mergeOverlappingRanges: false
      },
      ...
    ]
  }
};

image

theme

플롯 영역의 라인 스타일과 배경색을 변경할 수 있다.

type PlotTheme = {
  lineColor?: string;
  lineWidth?: number;
  dashSegments?: number[];
  vertical?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
  horizontal?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
  backgroundColor?: string;
};
이름 타입 설명
lineColor string 라인 색상
lineWidth number 라인 두께
dahsSegments number[] 라인 dashSegment 값
vertical object 세로형 라인 스타일 설정
horizontal object 가로형 라인 스타일 설정
backgroundColor string 플롯 영역 배경색

다음은 플롯 테마를 설정하여 라인과 배경색을 변경한 예시이다.

const options = {
  theme: {
    plot: {
      vertical: {
        lineColor: 'rgba(60, 80, 180, 0.3)',
        lineWidth: 5,
        dashSegments: [5, 20],
      },
      horizontal: {
        lineColor: 'rgba(0, 0, 0, 0)',
      },
      backgroundColor: 'rgba(60, 80, 180, 0.1)'
    }
  }
};

image

Gauge 용

bands 옵션을 사용하면 플롯 영역에 범위를 지정하여 배경색을 채울 수 있다.

type GaugePlotOption = {
  ...
  bands?: {
    range: [number, number] | [string, string];
    color: string;
    id?: string;
  }[];
};
이름 타입 설명
bands band[] 범위 객체 배열 정의
band.range [number, number] | [string, string] | circular 축에 대응하는 값의 범위, 시작과 끝에 해당하는 값을 배열로 입력함
band.color string 플롯 섹터 색상
band.id string 범위 플롯 섹터 id, removePlotBand API를 사용할 때 id 값을 인자로 넘겨주면 해당 플롯 섹터가 삭제됨

사용 방법은 예시를 통해 알아보자.

const options = {
  ...
  plot: {
    bands: [
      { range: [0, 20], color: '#55bf3b' },
      { range: [20, 50], color: '#dddf0d' },
      { range: [50, 110], color: '#df5353' },
    ]
  }
};

gauge-plot

theme

다음은 Gauge 차트에서 사용할 수 있는 플롯 테마이다. 플롯 범위 영역의 두께를 변경할 수 있다.

type GaugePlotTheme = {
  bands: {
    barWidth?: number;
  };
};
이름 타입 설명
bands object 범위 영역 테마
bands.barWidth number 영역 두께

다음은 플롯 테마를 설정하여 플롯 범위 영역의 두께를 변경한 예시이다.

const options = {
  theme: {
    plot: {
      { bands: { barWidth: 30 } }
    }
  }
};

gauge-plot-theme