문서 › 더 보기

Apex●●●rts·Chart.●s에서 옮기기

라이선스가 바뀐 Apex●●●rts, 플러그인이 필요한 Chart.●s 를 바꿀 때.

Apex●●●rts는 5.0부터 MIT가 아니며(연 매출 200만 달러 이상은 유료), 6.5부터는 키가 없으면 워터마크가 붙습니다. Chart.●s는 무료지만 확대·주석·날짜 축에 별도 플러그인과 어댑터가 필요합니다. 82chart는 이것들이 모두 기본으로 들어 있고 MIT입니다.

Apex●●●rts

const chart = new Apex●●●rts(document.querySelector('#chart'), {
  chart: { type: 'line', height: 350, zoom: { enabled: true } },
  series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu'] },
  yaxis: { labels: { formatter: (v) => v.toLocaleString() } },
});
chart.render();

const chart = createChart('#chart', {
  type: 'line',
  height: 350,
  zoom: true,
  numberFormat: 'comma',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu'],
    series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  },
});

Apex●●●rts	82chart
`chart.type`	`type`
`xaxis.categories`	`data.labels`
`series: [{ name, data }]`	`data.series: [{ name, data }]`
`chart.stacked`, `stackType: '100%'`	`stacked: true`, `'percent'`
`plotOptions.bar.horizontal`	`horizontal: true`
`chart.zoom.enabled`	`zoom: true`
`annotations.yaxis / xaxis`	`annotations.y / x / bands`
`yaxis.labels.formatter`	`yAxis.format` 또는 `numberFormat`
`chart.toolbar.export`	`exporting`
`chart.updateSeries()`	`chart.update(data)`

Chart.●s

// 전
new Chart(document.getElementById('c'), {
  type: 'bar',
  data: { labels: ['1월', '2월', '3월'], datasets: [{ label: '매출', data: [12, 19, 14] }] },
});

// 후 (canvas 대신 div)
createChart('#c', {
  type: 'bar',
  data: { labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [12, 19, 14] }] },
});

Chart.●s	82chart
`<canvas>`	아무 `<div>` (SVG로 그림)
`datasets[].label`	`series[].name`
`type: 'doughnut'`	`type: 'donut'`
`type: 'bubble'`	`type: 'scatter'` + 점의 `r`
`options.indexAxis: 'y'`	`horizontal: true`
`scales.x.stacked` / `scales.y.stacked`	`stacked: true`
줌 플러그인	`zoom: true`
주석 플러그인	`annotations`
날짜 어댑터(date-fns·moment 등)	필요 없음 — 날짜 축
`chart.data = …; chart.update()`	`chart.update(data)`