반응형
google chart
구글 차트의 경우 검색을 통해 찾을 수 있다. 검색을 통해 아래 사이트로 들어간다.
접속 한 다음 빨간색으로 표시된 more을 클릭한다.
여기에서 내가 원하는 다양한 차트를 가져다 쓸 수 있다.
난 scatter chart의 예를 가져왔다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
이렇게 소스코드를 그대로 가져다 붙이면 그래프가 그려진다. 여기서 그래프 틀을 구하고 내 가지고 있는 데이터를 넣어 원하는 차트를 그리면 된다.
반응형
'Base > WEB' 카테고리의 다른 글
| [WEB] D3.js 기본적인 차트 및 구글 차트 그리기 - 5 (0) | 2020.09.14 |
|---|---|
| [WEB] D3.js 데이터 읽어오는 방법(csv,Json) - 4 (0) | 2020.09.14 |
| [WEB] D3.js Event, Aninmation 사용법 - 3 (0) | 2020.09.14 |
| [WEB] D3.js 에서 Data 사용법 - 2 (0) | 2020.09.14 |
| [WEB] D3.js 기본 개념 및 사용법 - 1 (0) | 2020.09.14 |
