카카오와 구글에서 공개해놓은 오픈소스를 활용하는 연습을 했다.
https://apis.map.kakao.com/web/sample/
https://developers.google.com/chart/interactive/docs/gallery?hl=ko
차트 갤러리 | Charts | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 차트 갤러리 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Google 갤러리는
developers.google.com
1. 도넛 차트 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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([
['Task', 'Hours per Day'],
['Work', 13],
['Eat', 3],
['Commute', 2],
['SNS', 1],
['Sleep', 5]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
2. 카카오 지도 생성
카카오 유료서비스 개인 키 같은 경우
깃헙에 public으로 유출되지 않도록 조심해야 함
'Log > etc.' 카테고리의 다른 글
| Day53_맥북 초기화 과정 와이파이 연결 오류 (0) | 2023.07.07 |
|---|---|
| Day39_[Mac OS] Finder 설정 (0) | 2023.06.29 |
| Day27_JavaScript, CSS 연습 (0) | 2023.06.17 |
| Day14_Safari 사파리 개발자모드 안열림 (0) | 2023.05.31 |
| Day13_MacBook M1 HomeBrew 경로 설정_Brew 자꾸 사라짐 (0) | 2023.05.31 |
