[javascript] Chart.js에서의 데이터 포맷

27 Nov 2023

javascript

Chart.js는 데이터 시각화를 위한 JavaScript 라이브러리로써, 다양한 종류의 차트를 만들 수 있습니다. 이러한 차트는 데이터를 기반으로 생성되기 때문에 적절한 데이터 포맷을 사용하는 것이 중요합니다.

Chart.js에서는 일반적으로 다음과 같은 데이터 포맷을 사용합니다:

Line Chart 데이터 포맷 Line Chart는 시간 또는 범주에 따른 데이터를 보여주는 데 많이 사용되는 차트입니다. 데이터는 다음과 같은 형식을 따라야 합니다:

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'Data 1',
      data: [10, 20, 30, 25, 35, 40],
    },
    {
      label: 'Data 2',
      data: [20, 15, 25, 30, 20, 10],
    }
  ]
};

Bar Chart 데이터 포맷 Bar Chart는 범주에 따른 데이터를 보여주는 데 많이 사용되는 차트입니다. 데이터는 다음과 같은 형식을 따라야 합니다:

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: 'Data',
      data: [12, 19, 3, 5, 2, 3],
    }
  ]
};

Pie Chart 데이터 포맷 Pie Chart는 범주별 데이터의 상대적인 비율을 보여주는 데 많이 사용되는 차트입니다. 데이터는 다음과 같은 형식을 따라야 합니다:

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: 'Data',
      data: [10, 20, 30, 25, 15, 5],
    }
  ]
};

Radar Chart 데이터 포맷 Radar Chart는 다양한 항목의 상대적인 비교를 보여주는 데 많이 사용되는 차트입니다. 데이터는 다음과 같은 형식을 따라야 합니다:

const data = {
  labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
  datasets: [
    {
      label: 'Data 1',
      data: [80, 90, 70, 60, 85],
    },
    {
      label: 'Data 2',
      data: [50, 70, 65, 80, 75],
    }
  ]
};

Chart.js에서는 이 외에도 여러 종류의 차트를 지원하며, 데이터 포맷은 차트의 종류에 따라 다를 수 있습니다. 자세한 내용은 Chart.js 공식 문서를 참조하시기 바랍니다.