안녕하세요 일루넥스 개발팀 배누리 입니다.
오늘은 퓨전차트에 대해 정리해보려고 합니다.
1. Fusion Charts 란?
퓨전차트는 사용자가 손쉽게 대시보드를 만드는 것을 도와주는 라이브러리 입니다.
Fusion Charts는 무료로 사용할 수 있으나, 무료 버전 차트에는 워터마크가 표시됩니다. 워터마크를 제거하기 위해서는 라이센스를 구매해야 합니다.
Fusion Charts 는 90여개의 풍부한 차트 라이브러리를 제공하며, 우수한 커스터마이징 기능을 가지고 있습니다. 또한, 문서화가 잘 되어 있어 누구나 쉽게 사용할 수 있습니다.
라이브러리는 크게 FusionCharts Suite, FusionTime , FusionExport 세 가지로 나뉩니다.
- FusionCharts Suite: 깔끔한 디자인의 차트나 그래프를 그릴 수 있는 라이브러리
- FusionTime: 수천 개의 시간 순의 데이터를 차트로 그릴 수 있는 라이브러리
- FusionExport: 차트 뿐만 아니라 전체 대시보드를 PDF 형식 혹은 링크로 export 할 수 있는 라이브러리
이 중에서 다양한 디자인의 차트를 손쉽게 만들고, 활용할 수 있는 FusionCharts Suite에 대해 소개해 보고자 합니다.
2. Fusion Charts Suite 차트 종류
2.1. Fusion Charts Suite 차트 종류
Column Chart
Scatter
World Map
Doughnut
Line
Combination Charts
Fusion Charts를 이용하여 위와 같이 다양한 형태의 차트를 그릴 수 있습니다.
또한 Fusion Charts에서는 몇 가지 테마를 제공 해주기 때문에 다른 테마를 가진 표를 그릴 수도 있습니다.
이 밖에도 다양한 형태의 예시 차트가 있습니다. 더 많은 예시 차트는 하단의 링크에서 살펴 보실 수 있습니다.
3. 표 그리기
Fusion Charts는 개발 언어, 프레임워크 별로 예제가 수록되어 있어 예제를 따라 하며 쉽게 차트를 구현해 볼 수 있습니다.
이번에는 jQuery를 사용하여 하단의 표를 그리는 방법을 알아보도록 하겠습니다.
3.1. 설치하기
설치하는 방법에는 세 가지가 있습니다. 세 가지 중에 한가지 방식으로 설치합니다.
3.1.1. CDN
<head>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- FusionCharts -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- jQuery-FusionCharts -->
<script type="text/javascript" src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"></script>
<!-- Fusion Theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head> 3.1.2. Local Files
<head>
<!-- jQuery -->
<script type="text/javascript" src="path/to/local/jquery.min.js"></script>
<!-- FusionCharts -->
<script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
<!-- jQuery-FusionCharts -->
<script type="text/javascript" src="path/to/local/jquery-fusioncharts.js"></script>
<!-- Fusion Theme -->
<script type="text/javascript" src="path/to/local/fusioncharts.theme.fusion.js"></script>
</head> 3.1.3. NPM
npm install jquery-fusioncharts fusioncharts --save //index.js
//Including FusionCharts Dependencies
var FusionCharts = require('fusioncharts');
var Charts = require('fusioncharts/fusioncharts.charts');
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');
Charts(FusionCharts); // Resolve Charts as dependency for FusionCharts
FusionTheme(FusionCharts); // Resolve Fusion theme as dependency for FusionCharts
jQueryFusionCharts(FusionCharts); //Resolve jQueryFusionCharts as dependency for FusionCharts 3.2. 데이터 준비하기
한 가지의 데이터만 표시하기 때문에 이 차트에서는 x축에 표시될 라벨과, y축에 표시될 값으로 구분하여 준비합니다.
데이터의 구조는 차트 별로 다르기 때문에, 상세한 내용은 해당 차트 문서를 참고해야 합니다.
예를 들어, Multi Charts 일 경우에는 X축에 표시될 라벨 배열인 category와 dataset으로 구분되어 집니다.
// Preparing the chart data
const chartData = [
{
label: "Venezuela",
value: "290"
},
{
label: "Saudi",
value: "260"
},
{
label: "Canada",
value: "180"
},
{
label: "Iran",
value: "140"
},
{
label: "Russia",
value: "115"
},
{
label: "UAE",
value: "100"
},
{
label: "US",
value: "30"
},
{
label: "China",
value: "30"
}
]; 3.3. 차트 설정하기
chartConfigs 에는 스타일, 위치, 등의 다양한 설정을 추가하여 차트를 원하는 형태로 표시할 수 있습니다.
- type에는 표시할 차트의 형태를 정의합니다.
- chart 에는 Fusion Charts의 Attributes를 사용하여 차트의 디자인 요소를 설정합니다.
- data 에는 차트를 그리기 위한 데이터를 정의합니다.
// Create a JSON object to store the chart configurations
const chartConfigs = {
type: "column2d", //Set the chart type
width: "700", //Set the chart width
height: "400", //Set the chart height
dataFormat: "json", //Set the type of data
chart: {
caption: "Countries With Most Oil Reserves [2017-18]", //Set the chart caption
subCaption: "In MMbbl = One Million barrels", //Set the chart subcaption
xAxisName: "Country", //Set the x-axis name
yAxisName: "Reserves (MMbbl)", //Set the y-axis name
numberSuffix: "K",
theme: "fusion" //Set the theme for your chart
},
// Chart Data - from step 2
data: chartData
}; 3.4. 차트 그리기
<div id="chart-container">FusionCharts will render here</div> // Create a chart container
$('document').ready(function () {
$("#chart-container").insertFusionCharts(chartConfigs);
}); 이와 같이 간단하게 차트를 그릴 수 있습니다.
Fusion Charts 에서 제공하는 테마를 사용하는 동시에, Attributes를 설정하여 원하는 데이터를 원하는 형태로 표현할 수 있습니다.
하단의 링크에서 Fusion Charts Suite가 제공하는 모든 형태의 차트와, 해당 차트를 표시할 수 있는 Attributes 를 확인할 수 있습니다.
공통적인 속성도 있지만, 차트 마다 가지고 있는 고유한 속성들이 있기 때문에 해당하는 차트의 속성을 찾아 참고해야 합니다.
https://www.fusioncharts.com/dev/chart-attributes/area2d
Fusion Charts 에서 사용하는 표와 관련된 용어를 알면 원하는 Attributes를 쉽게 찾을 수 있습니다.
차트에서 사용하는 용어들에 대해 알아보도록 하겠습니다.
4.4. 차트에서 사용하는 용어들
① caption
② subcaption
③ yAxisName /xAxisName : X축, Y축 이름
④ numberprefix/numbersuffix : 숫자의 앞 혹은 뒤에 추가하는 단어
⑤ label
⑥ value
⑦ tooltip: dataplot에 hover시 표시되는 박스
plottooltext: 툴팁 안의 글자
(ex: Sales of $seriesName in $label was <b>$dataValue</b>)
plottooltext는 예시와 같이 $+변수를 사용하여 데이터를 원하는 형태로 표시할 수 있습니다.
⑧ data plot
⑨ Legend
해당 용어들을 참고한다면 원하는 Attributes를 빠르게 찾아서 차트를 원하는 형태로 수정할 수 있을 것 입니다.
하단의 링크는 차트 컴포넌트별 문서입니다.
https://www.fusioncharts.com/dev/chart-guide/chart-configurations/size-and-type
마치며
이번 시간에는 FusionCharts 의 기본 사용법과 용어들에 대해 알아보았습니다.
다음 블로그 글에서는 Fusion Charts를 사용하면서 구현하는 데 필요한 Attribute를 찾는 데 어려움을 겪었던 몇 가지 예시를 정리해보도록 하겠습니다.
감사합니다.
