문서 › 상호작용과 내보내기

차트 묶기 (크로스헤어 공유)

단위가 다른 값은 이중 축 대신 위아래 차트로.

group 이름이 같은 차트끼리는 한 차트에 마우스를 올리면 나머지도 같은 x를 가리킵니다. x 는 라벨 값으로 맞추므로 두 차트의 labels 가 같아야 합니다. 매출(원)과 주문 수(건)처럼 단위가 다른 값을 이중 축 없이 함께 읽는 방법입니다.

const labels = ['10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'];
createChart('#sales', {
  type: 'bar', title: '매출', unit: '원', group: 'daily', height: 180,
  data: { labels, series: [{ name: '매출', data: [2410000, 2650000, 2580000, 2990000, 3420000, 3610000, 3380000] }] },
});
createChart('#orders', {
  type: 'line', title: '주문 수', unit: '건', group: 'daily', height: 180,
  data: { labels, series: [{ name: '주문', data: [61, 70, 66, 74, 92, 98, 85] }] },
});

setOptions({ group: '다른이름' }) 으로 묶음을 바꿀 수 있고, destroy() 하면 묶음에서 빠집니다.