FusionChart
업무를 하다 보면 차트를 사용해야 할 경우가 자주 발생하죠. 특히, 통계나 모니터링 업무를 한다면 더욱더 사용할 수밖에 없는데요. 차트 솔루션 중에서 비교적 연동하기 쉬운 퓨전차트를 한 번 사용해보도록 하겠습니다.
* 참고로 퓨전차트는 무료로 사용할 수 있지만, 차트에 워터마크가 남아있습니다. 워터마크를 제거하기 위해서는 라이센스를 구매해야 됩니다.
FusionChart 소스 연동
퓨전차트의 강점 중 하나는 예제 소스입니다. 사이트에 들어가면 아주 친절하게 개발 언어 별 예제가 있어 연동하기에 좋습니다. 저는 자바 웹 프로젝트를 사용하기 때문에 JS 연동으로 구현해 보겠습니다. 우선 퓨전차트 사이트에 접속합니다.
상단에 'Developer' 메뉴를 클릭한 뒤 'FusionCharts'를 선택합니다.
다음 화면에서 Plain JS를 선택합니다.
다음으로는 CDN 관련 소스를 헤더에 추가합니다. (직접 라이브러리를 받아도 됨.)
|
1
2
3
4
5
6
|
<head>
<!-- Step 1 - Include the fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Step 2 - Include the fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
|
cs |
이번에는 퓨전차트를 화면단에 출력하는 게 목적이기 때문에 서버단에서 데이터를 호출하는 방법은 다음 포스트에서 소개하겠습니다. 일단 사이트에 나와 있는 데이터로 자바스크립트 객체를 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
// 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"
}
];
|
cs |
마지막으로 퓨전차트 설정 부분을 추가합니다. 주석이 있어 소스 해석은 어렵지 않습니다.
아래 소스는 가장 기본 형태의 컬럼형 차트로 이 외에도 라인, 파이 등 다양한 차트를 무료로 연동할 수 있습니다. 그리고 차트에 옵션도 추가로 설정할 수 있는데, 자세한 건 사이트를 참고하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// Create a JSON object to store the chart configurations
const chartConfigs = {
//Specify the chart type
type: "column2d",
//Set the container object
renderAt: "chart-container",
//Specify the width of the chart
width: "100%",
//Specify the height of the chart
height: "400",
//Set the type of data
dataFormat: "json",
dataSource: {
chart: {
//Set the chart caption
caption: "Countries With Most Oil Reserves [2017-18]",
//Set the chart subcaption
subCaption: "In MMbbl = One Million barrels",
//Set the x-axis name
xAxisName: "Country",
//Set the y-axis name
yAxisName: "Reserves (MMbbl)",
numberSuffix: "K",
//Set the theme for your chart
theme: "fusion"
},
// Chart Data from Step 2
data: chartData
}
};
|
cs |
이제 차트를 랜더링하는 소스입니다.
위에서 CDN 주소를 추가하고, 객체를 생성한 뒤, 차트 설정 부분을 추가한 걸 모두 포함한 소스입니다. 차트 형태는 컬럼 차트로 다른 형태의 차트는 설정하는 소스가 일부 다르지만 사이트만 참고하면 쉽게 구현 가능합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
//STEP 2 - 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"
}];
//STEP 3 - Chart Configurations
const chartConfig = {
type: 'column2d',
renderAt: 'chart-container',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
// Chart Configuration
"chart": {
"caption": "Countries With Most Oil Reserves [2017-18]",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion",
},
// Chart Data
"data": chartData
}
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
|
cs |
FusionChart 컬럼형 차트
위 소스의 결과물은 아래와 같습니다.
서버 단에서 호출한 데이터를 차트로 출력하기 위해서는 json 형태로만 잘 담아서 프런트로 넘겨주면 마찬가지로 어렵지 않게 다양한 차트를 구현할 수 있습니다. 이건 다음 포스트에서 다루겠습니다.
이렇게 퓨전차트를 사용하는 방법을 다루어봤는데, 연동하기 정말 간단하죠? 차트 종류도 100가지가 넘고 쉬운 예시, 기술 지원도 적극적인 퓨전차트를 추천드리고 이만 글을 마치겠습니다.
좋은 하루 되세요.
- 여러 형태의 퓨전차트 -
* 다음 포스트: 자바 웹 프로젝트와 퓨전차트 연동 #2 (서버, 프런트)
'[개발] Programming > Tools' 카테고리의 다른 글
| 깃에 풀 리퀘스트(Pull Request) 하는 방법 - 소스 트리(Source Tree) 사용 (0) | 2020.03.07 |
|---|---|
| 자바 웹 프로젝트와 퓨전차트 연동 #2 (서버, 프런트) (0) | 2020.02.25 |
| 구글 챗봇, 다이얼로그 플로우 (dialogFlow)로 챗봇 만들어 보기 (4) | 2020.01.11 |
| 소스 정렬 사이트 모음 (HTML, JS, SQL 등) (0) | 2019.08.30 |
| 윈도우 커맨드 창에서 telnet이 안되는 경우 해결 방법 (0) | 2019.02.28 |
댓글