진행하고 있는 프로젝트에서 차트를 구현해야 해서 구글에서 javascript chart 로 검색을 해봤다.
그 중에 대표적인게 Fusion Chart, Google Chart, chart.js 인것같다.
저 중에 내가 원하는 형태에 맞는 것으로 선택해야하는데 내가 원하는 조건은
1. javascript 라이브러리.
2. 다운로드가 되어 프로젝트에 소스를 넣어둘 수 있을 것
3. 방사형 그래프가 될것
4. 무료일 것.
그럼 이제 위의 세가지 차트 라이브러리가 내가 원하는 조건에 맞는지 간략하게 설명해보면
1. Fusion Chart
위의 사이트에서 다운로드 받고 사용법을 익힐 수 있다.
다만, 다운로드를 받기위해서는 license 를 취득해야 하고 Trial 버전과 구매버전을 제공하는 것 같다.
(일단, Trial 버전 받는 것 부터가 귀찮아서 패스)
2. Google Chart
https://developers.google.com/chart
Charts | Google Developers
Interactive charts for browsers and mobile devices.
developers.google.com
여기에서 사용법을 익힐 수 있다.
google chart 는 제공하는 url 을 추가해서 라이브러리를 사용하는 형태이다.
기본 사용 코드는 다음과 같다. 정말 붙여넣기만 하면 됨.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>차트의 종류마다 설정을 다르게 해주면 되고 이에 대한 설명은 잘 되어 있다.
다만, 다운로드를 하는 것이 아니라 점.
방사형 차트(Radar Chart)는 지원이 끝났다는 점.
Warning: This API is deprecated in 2012 and was turned off on March 18, 2019. Please use the actively maintained Google Charts API instead.
Google Chart 도 패스.
3. chart.js
Chart.js | Open source HTML5 Charts for your website
New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.
www.chartjs.org
여기에서 다운로드를 받고 사용법을 익힐 수 있다.
chart.min.js 와 chart.min.css 를 다운로드 받아서 프로젝트에 옮겨두고 실행하였더니 잘된다.
이것도 정말 다음과 같이 코드를 붙여넣기만 하면된다. 쉽다.
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>다만 사이즈가 400으로 지정이 된것같은데 왜 전체화면으로 뜨지?
canvas 태그를 div 로 한번 더 감싸서 div 에 400 으로 지정하니 뭐 일단 사이즈가 조정이 된다.
내가 원하는 방사형 차트도 있고 다운로드도 된다.
거기에 Open source 에 MIT License 라니 무료로 사용 가능하다.
이녀석으로 선택!
색깔도 파스텔톤으로 마음에 드는 군 후후.
이렇게 Fusion Chart, Google Chart, chart.js 에 대한 간략한 내 기준 소개는 끝!
다음 화면을 구상하러 가야지 슝~
'일하딩 > Web' 카테고리의 다른 글
| [CSS] Position 이란? (static, relative, sticky, fixed, absolute) (0) | 2020.07.26 |
|---|---|
| [Html] Button 태그 사용시 자동 submit 없애기 (0) | 2019.12.16 |
| [Jsoup] Java 로 웹 크롤링 하기. (0) | 2019.12.03 |
| [Servlet] JSP 를 사용하지 않고 javascript 에서 Java 호출 하기. (0) | 2019.11.01 |
| [AES] Java encrypt -> javascript decrypt (3) | 2019.10.29 |
댓글