Skip to main content

차트

topgrid는 그리드 데이터를 시각화하는 3개 레이어를 제공합니다 — 셀 인라인 스파크라인부터 17종 엔터프라이즈 차트 카탈로그까지. React와 Vue 3 모두 동일 엔진으로 지원합니다.

어떤 패키지가 필요한가​

사용 사례패키지라이선스
셀 안 스파크라인 (line/bar/area/win-loss)@topgrid/grid-pro-chartPro
경량 범위 차트 (zero-dep SVG, 3종)@topgrid/grid-pro-chartPro
엔터프라이즈 카탈로그 17종 (React)@topgrid/grid-pro-chart-enterprise + echartsPro + Apache-2.0
엔터프라이즈 카탈로그 17종 (Vue 3)@topgrid/grid-pro-chart-enterprise-vue + echarts + vuePro + Apache-2.0
프레임워크 무관 옵션 엔진만@topgrid/grid-chart-corePro
Highcharts / AG Charts 직접 주입 (BYO)주입 시임 (별도 의존 0)본인 라이선스
  • **grid-pro-chart**는 차트 라이브러리 의존이 0(순수 SVG) — 셀/경량 시각화용.
  • 엔터프라이즈는 Apache ECharts(Apache-2.0)를 peer로 사용 — 소비자가 echarts(5.x 또는 6.x)를 설치, 앱 전체가 단일 ECharts 인스턴스를 공유합니다.
  • 17 타입: line·bar·area·stacked-bar·stacked-area·100-stacked-bar·scatter·bubble·pie·doughnut· funnel·treemap·radar·heatmap·candlestick·boxplot·sankey.

데이터 → 차트 (range / pivot 공용)​

차트 입력은 labelled matrix 하나로 환원됩니다 — 셀 범위 선택이든 피벗 결과든 동일합니다.

import { seriesFromMatrix } from '@topgrid/grid-pro-chart';      // 또는 seriesFromPivot
import { matrixToEChartsOption } from '@topgrid/grid-chart-core';

const data = seriesFromMatrix({ categories, columns, matrix });   // { categories, series }
const option = matrixToEChartsOption(data, { type: 'stacked-bar', dataLabels: true });

matrixToEChartsOption은 framework-neutral(React/Vue 무관) — React와 Vue 패키지가 같은 함수를 호출하므로 차트 산출물이 동일합니다.

React 빠른 시작​

import { EnterpriseChartPanel } from '@topgrid/grid-pro-chart-enterprise';
import { setLicenseKey } from '@topgrid/grid-license';

setLicenseKey(MY_KEY);  // 앱 entry 1회 (미설정 시 watermark)

<EnterpriseChartPanel
  data={data}
  initialType="bar"
  toolbarTypes={['bar', 'line', 'radar', 'heatmap']}   // 17 중 선택 노출
  enableExport
  onCrossFilter={(sel) => applyGridFilter(sel.name)}    // 차트 클릭 → 그리드 필터
/>

Vue 3 빠른 시작​

import { EnterpriseChartPanel, setLicenseKey } from '@topgrid/grid-pro-chart-enterprise-vue';
setLicenseKey(MY_KEY);
// <EnterpriseChartPanel :data="data" initial-type="bar"
//   :toolbar-types="['bar','radar','heatmap']" @cross-filter="onSelect" />
  • License 워터마크 자동 게이트(React와 동등) — React 의존 0.
  • 서버 정적 SVG: renderChartToSvgString(option, { width, height }) (SSR, DOM 불필요).

셀 / 경량 차트 (zero-dep)​

import { SparklineCell, RangeChart } from '@topgrid/grid-pro-chart';
<SparklineCell type="line" values={[3, 8, 4, 9, 6]} />       // 셀 안 스파크라인
<RangeChart type="bar" series={series} categories={months} /> // 경량 SVG 차트

Bring-your-own (Highcharts / AG Charts)​

ECharts를 쓰지 않고 본인이 라이선스한 라이브러리를 주입할 수 있습니다 — RangeChartPanel의 renderChart 시임은 라이브러리 무관입니다.

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { RangeChartPanel } from '@topgrid/grid-pro-chart';

<RangeChartPanel
  series={selectedSeries}
  renderChart={(s) => (
    <HighchartsReact highcharts={Highcharts}
      options={{ series: s.map((x) => ({ type: 'column', name: x.name, data: x.data })) }} />
  )}
/>

ECharts는 Apache-2.0이라 번들/재배포에 의무가 없습니다. Highcharts·AG Charts Enterprise는 소비자 본인 라이선스로 BYO합니다(우리가 번들하지 않음).