Chart

HandStack은 Highcharts와 Chart.js를 서로 독립된 UI 컨트롤로 제공합니다. 두 컨트롤은 엔진의 원형 옵션을 보존하면서 $auigrid/$grid에서 얻는 {} 또는 [{}] 행 데이터와 동일한 선택/거래 계약을 사용합니다. Apache ECharts는 별도 ECharts 문서를 참고하세요.

엔진	태그	싱글턴	벤더
HighChart	`<syn_chart>`	`syn.uicontrols.$chart`	Highcharts 11.4.8
ChartJS	`<syn_chartjs>`	`syn.uicontrols.$chartjs`	Chart.js 4.4.1 UMD

공통 데이터 계약

const rows = [
  { YEAR: '2025', AMOUNT: 120, PROFIT: 30 },
  { YEAR: '2026', AMOUNT: 180, PROFIT: 48 }
];

await syn.uicontrols.$chart.setValue('chtHigh', rows);
await syn.uicontrols.$chartjs.setValue('chtJs', rows);

단일 객체는 1행 배열로 정규화됩니다. null, undefined, []는 차트를 비우고 숫자·문자열이나 객체가 아닌 배열 항목은 거부합니다. 기본 추론은 첫 문자열/날짜 컬럼(없으면 첫 컬럼)을 category/label로, 숫자 컬럼을 series/dataset으로 사용합니다.

point를 클릭하면 선택 상세와 원본 행의 연결이 저장됩니다.

const detail = syn.uicontrols.$chart.getSelection('chtHigh');
// [{ series, point, yData, rowIndex, row }]

const row = syn.uicontrols.$chart.getValue('chtHigh');
const transactionList = syn.uicontrols.$chart.getValue('chtHigh', 'List', metaColumns);
// [[{ prop: 'YEAR', val: '2025' }, ...]]

selectionMode은 single, multiple, native, none을 지원합니다. getValue(id)는 single이면 최근 선택 행 또는 null, multiple/native이면 중복 제거된 선택 행 배열입니다. getValue(id, 'Row'|'List', metaColumns)는 HandStack transaction 형식을 반환합니다.

이 선택 상태는 데이터 반환용이며 컨트롤이 point에 포커스나 선택 테두리를 자동으로 그리지 않습니다. HighChart는 allowPointSelect/point.select()/selectPoint, ChartJS는 setActiveElements나 사용자 plugin을 화면 개발자가 명시적으로 사용할 때만 네이티브 시각 상태가 바뀝니다.

HighChart 빠른 시작

<syn_chart id="chtHigh" syn-events="['pointClick','selectionChange']"
  style="width:100%;height:360px" syn-options="{
    selectionMode: 'multiple',
    option: { chart: { type: 'column' }, title: { text: '매출' } }
  }"></syn_chart>

HighChart는 option에 Highcharts 원형 옵션을 받습니다. 이전 화면의 최상위 chart, title, xAxis, series 형식과 setValue([{name,data}])도 호환합니다. 최상위 option은 whitelist 없이 전달되므로 colorAxis, mapView, data, responsive 등도 그대로 사용할 수 있습니다. constructorType을 stockChart, mapChart, ganttChart로 지정하거나 series/기술 지표 type을 설정하면 필요한 로컬 모듈을 /lib/highcharts/에서 의존 순서로 지연 로드합니다. chart.styledMode: true는 로컬 css/highcharts.min.css도 준비합니다.

Sankey, networkgraph, Stock/Maps/Gantt처럼 행 추론만으로 표현할 수 없는 데이터는 dataAdapter(rows, metaColumns, currentOption, control)가 다음 형태를 반환하게 합니다.

return {
  option: { series: [{ type: 'sankey', data: links }] },
  rowIndexMap: [[0, 1, 2]],
  selectionResolver(point) { return point.isNode ? null : point.index; }
};

Highcharts Maps의 지도 GeoJSON과 외부 플러그인은 자동 포함하지 않으므로 registerMap 등으로 등록합니다.

공식 Highcharts 데모의 생성자와 option을 그대로 옮기려면 renderChart를 사용합니다. rows는 차트 option과 별도로 point 선택 시 반환할 원본 행입니다.

await syn.uicontrols.$chart.renderChart('chtHigh', {
  constructorType: 'stockChart',
  rows,
  option: {
    series: [
      { type: 'ohlc', id: 'price', data: ohlcData },
      { type: 'sma', linkedTo: 'price' }
    ]
  },
  selectionResolver(point, event, sourceRows) {
    return sourceRows.findIndex(row => row.DATE === point.x);
  }
});

Core, More, 3D, Gauge, Heatmap, Tree/Network, 특수 series, Stock, Maps, Gantt와 운영 API는 기능군별 독립 예제에서 확인할 수 있습니다. Highcharts Dashboards와 Grid는 별도 제품 런타임이므로 $chart 지원 범위가 아닙니다.

ChartJS 빠른 시작

<syn_chartjs id="chtJs" syn-events="['pointClick','selectionChange']"
  style="width:100%;height:360px" syn-options="{
    type: 'bar', selectionMode: 'multiple',
    options: { scales: { y: { beginAtZero: true } } }
  }"></syn_chartjs>

ChartJS는 Chart.js의 type, data, options, plugins를 그대로 받습니다. 기존 labelID/series[{columnID,label,...}] 매핑도 유지합니다. scatter/bubble처럼 {x,y,r}가 필요한 데이터는 dataAdapter가 {config,rowIndexMap,selectionResolver}를 반환하게 합니다.

Chart.js UMD 번들의 기본 controller/element/scale/plugin은 모두 사용할 수 있습니다. 외부 플러그인과 사용자 controller는 register/unregister로 명시적으로 등록합니다.

주요 메서드

메서드	설명
`setValue(id,value,metaColumns)`	객체/객체 배열 반영. Promise 반환
`renderChart(id,descriptor)`, `recreate`	공식 데모 option 반영과 chart/stock/map/gantt 생성자 전환
`getValue`, `getRawValue`, `getSelection`, `getSelectedRows`	선택 행·원본 행·선택 상세 조회
`setSelection`, `clearSelection`	선택 설정/해제
`getControl`, `getChartInstance`	HandStack wrapper와 엔진 인스턴스 조회
`resize`, `setControlSize`, `showLoading`, `hideLoading`	표시 상태 제어
`update`, `setData`, `setExtremes`, `addAnnotation`, `drillUp`	chart/series/axis/annotation 제어
`invoke(id,target,method,args)`	Highcharts 공개 인스턴스 API 범용 호출
`clear`, `dispose`, `getDataURL`, `toImage`	수명주기와 이미지 내보내기

HighChart의 기존 getChartControl(id)은 Highcharts 인스턴스를, ChartJS의 기존 메서드는 wrapper를 반환합니다. 엔진 인스턴스를 동일하게 얻으려면 두 컨트롤 모두 getChartInstance(id)을 사용합니다. 엔진별 전체 wrapper는 HighChart API와 ChartJS API에 정리되어 있습니다.

이벤트

핸들러 형식은 (elID, params, selections)입니다. 공통 합성 이벤트는 initialized, recreated, dataBound, selectionChange, resized, disposed, error입니다. HighChart는 chart/series/point/axis의 원형 이벤트를 syn-events로 중계하며 원래 콜백과 반환값도 보존합니다. 전체 이벤트 이름은 HighChart API를 참고합니다.

실행 예제

HighChart: 예제 목차에서 Core, 고급 기능, 계층·관계, 특수 series, Stock, Maps, Gantt, 데이터·운영 API를 독립 페이지로 실행
ChartJS: chartjsbasic.html(자동 추론/선택), chartjsevents.html(native+HandStack 이벤트), griddashboard.html(AUIGrid), chartjsadapter.html(Bubble)

공통 데이터 계약​

HighChart 빠른 시작​

ChartJS 빠른 시작​

주요 메서드​

이벤트​

실행 예제​

공통 데이터 계약

HighChart 빠른 시작

ChartJS 빠른 시작

주요 메서드

이벤트

실행 예제