차트 라이브러리-CanvasJsChart

• CanvasJs 라이브러리를 기반으로 하는 React 컴포넌트
• 다양한 유형의 차트를 제공하는 JavaScript 라이브러리
• 빠르고 가벼운 차트 구현을 지원
• options라는 프로퍼티를 사용하여 차트의 설정을 지정하며 다양한 차트 유형과 상호작용(줌, 툴팁 등)을 사용할 수 있다.

설치

npm install canvasjs-react-charts

사용

import React from 'react';
import { CanvasJSChart } from 'canvasjs-react-charts';

const MyChart = () => {
  // 차트 옵션 설정
  const options = {
    theme: "light2", // 차트 테마
    title: {
      text: "Workout Performance", // 차트 제목
    },
    axisY: {
      title: "Power (W)", // Y축 제목
      includeZero: false, // Y축에서 0을 포함하지 않음
    },
    axisX: {
      title: "Time (seconds)", // X축 제목
      interval: 10, // X축 간격 설정
    },
    data: [
      {
        type: "area", // 차트 타입 (영역 차트)
        dataPoints: [
          { x: 0, y: 100 },
          { x: 10, y: 120 },
          { x: 20, y: 140 },
          { x: 30, y: 160 },
          { x: 40, y: 180 },
          { x: 50, y: 200 },
        ], // X, Y 값을 가진 데이터 포인트들
      },
    ],
  };

  return (
    <div>
      <CanvasJSChart options={options} />
    </div>
  );
};

export default MyChart;

• options 객체
  • 차트의 설정
  • theme : 차트의 테마를 설정, "light1", "light2", "dark1", "dark2" 등의 값을 사용할 수 있다.
  • title : 차트 상단에 표시되는 제목 정의
  • axisY : Y축의 설정을 정의. 여기서 Y축의 제목과 Y축에서 0을 포함할지 여부 지정 가능
  • axisX : X축의 설정을 정의. 위는 시간 간격을 10초로 설정함 
  • data : 차트에 표시될 실제 데이터 정의
    • type : 차트의 유형을 지정, area, line, bar, column 등 다양한 차트 유형이 있다.
    • datapoints : 차트에 그려질 데이터 포인트들을 배열로 제공. 각 데이터 포인트는 {x,y} 형식으로 구성된다.
• CanvasJsChart  컴포넌트
  • CanvasJsChart는 options 속성을 받아 차트를 렌더링

차트 예제

라인 차트 (Line Chart)

const options = {
  title: {
    text: "Line Chart Example",
  },
  data: [
    {
      type: "line", // 차트 타입을 "line"으로 설정
      dataPoints: [
        { x: 10, y: 50 },
        { x: 20, y: 60 },
        { x: 30, y: 70 },
        { x: 40, y: 90 },
        { x: 50, y: 100 },
      ],
    },
  ],
};

막대 차트 (Bar Chart)

const options = {
  title: {
    text: "Bar Chart Example",
  },
  data: [
    {
      type: "bar", // 차트 타입을 "bar"로 설정
      dataPoints: [
        { label: "Apples", y: 10 },
        { label: "Oranges", y: 15 },
        { label: "Bananas", y: 25 },
        { label: "Grapes", y: 30 },
      ],
    },
  ],
};

원형 차트 (Pie Chart)

const options = {
  title: {
    text: "Pie Chart Example",
  },
  data: [
    {
      type: "pie", // 차트 타입을 "pie"로 설정
      dataPoints: [
        { label: "Apples", y: 30 },
        { label: "Oranges", y: 25 },
        { label: "Bananas", y: 20 },
        { label: "Grapes", y: 15 },
      ],
    },
  ],
};

상호 작용 기능

• 줌 / 스크롤 : zoomEnabled : true 속성을 추가하면 차트를 확대하거나 축소 가능
• 툴팁 : 차트에 마우스를 올리면 값이 표시. 툴팁의 형식은 toolTipContent 속성을 사용하여 사용자 정의할 수 있다.

const options = {
  title: {
    text: "Zoom Enabled Chart",
  },
  zoomEnabled: true, // 줌/스크롤 기능 활성화
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 0, y: 100 },
        { x: 10, y: 120 },
        { x: 20, y: 140 },
        { x: 30, y: 160 },
        { x: 40, y: 180 },
        { x: 50, y: 200 },
      ],
    },
  ],
};

정리

• CanvasJsChart는 options 객체를 사용하여 데이터 시각화를 제어하는 간단한 컴포넌트
• 다양한 차트 유형과 상호작용 기능을 제공하며 데이터 포인트의 X,Y 값을 이용하여 차트의 데이터를 표현
• dataPoints 배열로 데이터를 전달하고 다양한 차트 속성을 설정하여 사용자 맞춤형 차트를 만들 수 있다.