Skip to content

Latest commit

 

History

History
155 lines (110 loc) · 5.13 KB

common-legend.md

File metadata and controls

155 lines (110 loc) · 5.13 KB

Legend

image

Legend는 그려지고 있는 데이터의 정보를 나타낸다. TOAST UI Chart에서는 총 3가지 종류의 Legend가 존재하며 차트 타입에 맞춰 적절하게 변경된다.

종류 및 구성

기본 Legend

기본 Legend는 체크박스와 색상을 나타내는 아이콘 영역, 시리즈의 이름이 나타나도록 구성되어 있다. 체크박스와 이름을 클릭할 경우 동작이 존재하는데 차례대로 살펴보고 응용하며 사용해보도록 하자.

먼저, 체크박스를 클릭할 경우 해당 시리즈를 제거할 수 있으며 다시 클릭 시 나타나게 할 수 있다. image

시리즈의 이름을 클릭할 경우 해당 시리즈를 중심으로 차트를 볼 수 있다. image

기본 Legend는 Heatmap 차트, Treemap 차트를 제외한 모든 차트에서 사용된다.

Spectrum Legend

Heatmap 차트와 colorValue를 사용하는 Treemap 차트의 경우 기본 Legend 대신 Spectrum Legend를 사용한다. 해당 값이 전체 값에서 어느 위치인지 비교할 수 있는 지표를 제공한다.

image

Circle Legend

Bubble 차트의 경우 시리즈의 원 크기에 대한 지표가 되는 Circle Legend가 존재한다. 가장 바깥쪽에 위치한 원의 값은 제일 큰 반지름을 갖는 데이터 중 가장 큰 값을 의미한다. 또한, 제일 큰 원을 기준으로 0.5x, 0.25x 길이의 반지름을 갖는 원의 지표 또한 함께 나타난다.

image

옵션

legend를 변경하기 위한 옵션은 다음과 같다. 이 가이드에서는 width를 제외한 옵션을 설명하며 해당 옵션은 레이아웃 설정 가이드를 참고하길 바란다.

interface LegendOptions {
  align?: 'top' | 'bottom' | 'right' | 'left';
  showCheckbox?: boolean;
  visible?: boolean;
  width?: number;
  item?: {
    width?: number;
    overflow: 'ellipsis';
  };
}

interface CircleLegendOptions {
  visible?: boolean;
}

align

  • 기본값: right

legend의 정렬은 legend.align을 통해 변경 가능하며 top, bottom, right, left 총 네 개의 옵션이 존재한다. circleLegend의 정렬은 legend.align이 left, right인 경우에 같은 위치에 존재하며 align이 top이나 bottom인 경우 우측에 위치한다.

const options = {
  legend: {
    align: 'bottom',
  },
};

옵션을 통해 그림처럼 legend의 위치가 변경된 것을 확인할 수 있다.

image

showCheckbox

  • 기본값: true

시리즈를 사라지게 하거나 나타나게 할 수 있는 체크박스를 legend.showCheckbox 옵션을 통해 제어할 수 있다. showCheckbox의 값을 false로 지정할 경우 체크박스가 없는 레전드를 사용할 수 있다.

const options = {
  legend: {
    showCheckbox: false,
  },
};

image

visible

  • 기본값: true

Legend를 사용하지 않을 경우 legend.visible 옵션을 통해 제거할 수 있다.

const options = {
  legend: {
    visible: false,
  },
};

image

item

  • 사용 가능 차트 타입: Line, Area, Bar, BoxPlot, Bullet, Column, ColumnLine, LineArea, LineScatter, Pie, Heatmap, Bubble, Scatter, Radar, NestedPie, LineScatter, ColumnLine, Radial, Scatter

각각의 Legend 아이템의 width, overflow 옵션을 제어할 수 있다. item.width에 값을 주고 overflow 설정을 지정하지 않으면 overflow: 'ellipsis'가 적용된다.

const options = {
  legend: {
    item: {
      width: 70,
      overflow: 'ellipsis',
    }
  }
}

image

theme

Legend를 스타일링 할 수 있는 테마 옵션은 다음과 같다.

interface Legend {
  label?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
}

legend.label의 테마 옵션을 통해 라벨의 폰트 스타일을 변경하는 예제를 작성해보자.

const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d',
      },
    },
  },
};

image