반응형
Charts | Google Developers
Interactive charts for browsers and mobile devices.
developers.google.com
라이브러리를 불러놓고
데이터 설정해서
그린다.
전체 코드 보기
더보기
<!doctype html>
<html>
<head>
<meta chartset="utf-8">
<title>원그래프</title>
<!-- 라이브러리를 읽어들임 ======(※1) -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// 어떤 그래프를 사용할지 지정 ------ (※2)
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// 그래프API로드가 완료되면 실행할 수 있도록 이벤트를 지정 ---- (※3)
google.setOnLoadCallback(drawChart);
// 차트 그리기를 실행 --- (※4)
function drawChart() {
// 데이터오브젝트를 작성 --- (※5)
var data = new google.visualization.DataTable();
// 데이터의 컬럼을 지정 -------- (※6)
data.addColumn('string', '인물');
data.addColumn('number', '취득표');
// 실제 데이터를 지정 ------------- (※7)
data.addRows([
['A', 51],
['B', 34],
['C', 20],
['D', 101],
['E', 80],
['F', 4],
]);
// 그래피의 옵션을 지정 ------- (※8)
var opt = {
'title': '인기투표',
'width': 600,
'height': 400,
pieSliceText: 'percentage', // label:이름 . vaule:실제값
legend: { // 범례
position: 'right',
textStyle: {
color: 'blue',
fontSize: 25
}
} //'none'
};
// 그래프를 표시 ------------- (※9)
var chart = new google.visualization.PieChart( // ***Chart
document.getElementById('chart_div'));
chart.draw(data, opt);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
전체 코드 보기
더보기
ㄴㄴㄷㄹ
<!doctype html>
<html>
<head>
<meta chartset="utf-8">
<title>막대 그래프</title>
<!-- 라이브러리를 읽어들임 ======(※1) -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// 어떤 그래프를 사용할지 지정 ------ (※2)
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// 그래프API로드가 완료되면 실행할 수 있도록 이벤트를 지정 ---- (※3)
google.setOnLoadCallback(drawChart);
// 차트 그리기를 실행 --- (※4)
function drawChart() {
// 데이터오브젝트를 작성 --- (※5)
var data = new google.visualization.DataTable();
// 데이터의 컬럼을 지정 -------- (※6)
data.addColumn('string', '인물');
data.addColumn('number', '취득표');
// 실제 데이터를 지정 ------------- (※7)
data.addRows([
['A', 51],
['B', 34],
['C', 20],
['D', 101],
['E', 80],
['F', 4],
]);
// 그래피의 옵션을 지정 ------- (※8)
var opt = {
'title': '인기투표',
'width': 600,
'height': 400,
};
// 그래프를 표시 ------------- (※9)
var chart = new google.visualization.BarChart( // ***Chart
document.getElementById('chart_div'));
chart.draw(data, opt);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
전체 코드보기
더보기
<html>
<head>
<meta chartset="utf-8">
<!-- 라이브러리 로드 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- 기온데이터 로드 -->
<script type="text/javascript" src="temperature-data.js"></script>
<script type="text/javascript">
// 라이브러리 로드 ---- (※1)
google.load('visualization', '1.0', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawChart);
// 차트 그리기를 수행
function drawChart() {
// 데이터 설정 ----- (※2)
var data = google.visualization.arrayToDataTable(tempData);
// tempData는 temperature-data.js에 정의되어있음
// 그래프의 옵션 설정---- (※3)
var options = {
'title': '최고기온과 최저기온',
'width': 600,
'height': 400,
'colors': ['red', 'blue'],
'pointShape': 'circle', // 점모양
'pointSize': 5 // 점 크기
};
// 그래프 표시 ---- (※4)
var chart = new google.visualization.LineChart( //LineChart
document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
temperature-data.js
var tempData = [["날짜","최고기온","최저기온"],["2020-02-20 00:00",10,1],
["2020-02-21 00:00",11,1],["2020-02-22 00:00",8,3],["2020-02-23 00:00",8,-1],
["2020-02-24 00:00",10,1],["2020-02-25 00:00",10,2],["2020-02-26 00:00",9,4],
["2020-02-27 00:00",9,2]]
데이터 가져오기
get-temperature.js
// 기상청 사이트의 RSS부터 JSON파일을 출력하기
// RSS 주소 ----- (※1)
var RSS = "http://web.kma.go.kr/weather/forecast/mid-term-rss3.jsp?stnId=109";
var SAVE_PATH = "temperature-data.js";
// 모듈을 읽어 들임
var client = require('cheerio-httpcli');
var fs = require('fs');
// RSS 다운로드----- (※2)
client.fetch(RSS, {}, function(err, $, res) {
if (err) { console.log("error"); return; }
// 필요한 항목을 추출하여 표시
var res = [];
$("location:nth-child(1) > data").each(function(idx) { //1은 서울.경기
var tmEf = $(this).find('tmEf').text();
if(tmEf.match('00:00'))
{
var tmn = $(this).find('tmn').text(); //tmn 태그값 찾아서 넣고
var tmx = $(this).find('tmx').text();
var line = [tmEf, parseInt(tmx), parseInt(tmn)]; // 뒤에 둘은 숫자로 바꿔서 넣고
res.push(line); // 배열에 푸쉬
console.log(line);
}
});
// 저장하기 ---- (※4)
res.unshift(['날짜','최고기온','최저기온']); // 앞에 추가
var src = "var tempData = " + JSON.stringify(res);
fs.writeFileSync(SAVE_PATH, src, "utf-8");
console.log("ok!");
});
반응형
'IT' 카테고리의 다른 글
| 데이터 시각화 3] NVD3.js , C3.js (0) | 2020.02.17 |
|---|---|
| 데이터 시각화2] D3.js (0) | 2020.02.17 |
| Day 16 (0) | 2020.02.11 |
| Html] ckeditor 설정 (0) | 2020.02.11 |
| Day14 (0) | 2020.02.08 |
댓글