[JavaScript] FusionCharts 라이브러리

FusionCharts 라이브러리

들어가며

• 자바스크립트(JavaScript)의 FusionCharts 라이브러리에 대해 정리해본다.

 

FusionCharts

개념

• 웹 기반 대시보드와 데이터 시각화를 위한 자바스크립트(JavaScript) 차트 라이브러리
• 개발자와 기업이 다양한 형태의 데이터를 차트, 그래프, 게이지(Gauge), 지도 등으로 시각화 할 수 있다.
• 무료 및 유료 플랜이 있어 프로젝트의 필요에 따라 선택 가능하다.
• 공식 홈페이지 : JavaScript charts for web & mobile | FusionCharts

 

특징

• 선 차트, 파이 차트, 게이지, 히트맵 등 100개 이상의 차트 유형 지원
• 복잡한 비즈니스 대시보드나 보고서를 쉽게 만들 수 있다.
• 모든 차트는 반응형 디자인이 적용되어 모바일, 태블릿, 데스크탑에서도 잘 표시된다.
• 다양한 옵션을 통해 차트 스타일과 기능을 커스텀할 수 있다.
• React, Angular, Vue.js와 같은 프론트엔드 프레임워크뿐만 아니라 Node.js, Python, ASP.NET 등 백엔드와도 통합할 수 있다.

 

설치

$ npm install fusioncharts   # yarn add fusioncharts

 

 

• 리액트에서 FusionCharts를 사용하려면 아래의 명령을 실행한다.

$ npm install fusioncharts react-fusioncharts   # yarn add fusioncharts react-fusioncharts

 

사용 예시 코드

import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, Charts);

const chartData = [
  { label: "Q1", value: "12000" },
  { label: "Q2", value: "15000" },
  { label: "Q3", value: "18000" },
  { label: "Q4", value: "20000" },
];

const chartConfigs = {
  type: 'column2d',
  width: '100%',
  height: '400',
  dataFormat: 'json',
  dataSource: {
    chart: { caption: "Quarterly Revenue", theme: "fusion" },
    data: chartData,
  },
};

const MyChart = () => <ReactFC {...chartConfigs} />;
export default MyChart;

 

참고 사이트

FusionCharts Dev Centre