WalkingBo의 걷는 정보

히트맵(Heat Map) - amChart 와 django이용 본문

IT/웹

히트맵(Heat Map) - amChart 와 django이용

walkingbo 2020. 2. 3. 13:18

1. 히트맵

 

- 열을 뜻하는 히트와 지도를 뜻하는 맵을 결합시킨 단어로, 색상으로 표현할 수 있는 다양한 정보를 일정한 이미지위에 열분포 형태의 비쥬얼한 그래픽으로 출력하는 것이다.

 

2. amChart

 

- 자바스크립트 형식으로 차트와 맵을 쉽게 만들 수 있도록 지원하는 라이브러리 사이트

- docs를 참고하여 여러 기능 구현 가능(아래 예제코드는 일부 기능이 더 추가 됨)

- 주소: https://www.amcharts.com 

 

JavaScript Charts & Maps - amCharts

JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. Fast and responsive. WordPress plugin available. Developed since 2006.

www.amcharts.com

 

3. 예제

 

- 장고를 이용하여 예제 수행

 

1)html 파일 작성

 

 - basic.html

 

{% load staticfiles %}

 

<!DOCTYPE html>

<html>

 

<head>

<script src="https://www.amcharts.com/lib/4/core.js"></script>

<script src="https://www.amcharts.com/lib/4/charts.js"></script>

<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>

<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<script src="https://www.amcharts.com/lib/4/maps.js"></script>

<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>

</head>

 

<body>

 

<h1>HEAT MAP</h1>

<div id="chartdiv1" style="width: 100%; height: 250px;"></div>

<div id="chartdiv2"></div>

<script src="/static/js/worldmap.js" type="text/javascript"></script>

 

</body>

 

</html>

 

 

2)자바스크립트 파일 작성

 

 - worldmap.js

 

am4core.useTheme(am4themes_animated);

 

// 지도 인스턴스 생성

var chart = am4core.create("chartdiv1", am4maps.MapChart);

 

// 사용할 맵 선택

chart.geodata = am4geodata_worldLow;

 

chart.projection = new am4maps.projections.Miller();

 

// map polygon series 생성

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

 

// GeoJSON data 사용

polygonSeries.useGeodata = true;

 

// 설정

var polygonTemplate = polygonSeries.mapPolygons.template;

polygonTemplate.tooltipText = "{name} \n infected people:{value.value.formatNumber('#')}";

polygonTemplate.fillOpacity = 0.6;

 

// hover 생성

var hs = polygonTemplate.states.create("hover");

hs.properties.fillOpacity = 0.9;

 

// 남극대륙 제거 

polygonSeries.exclude = ["AQ"];

 

//heat 규칙 생성

polygonSeries.heatRules.push({

  property: "fill",

  target: polygonSeries.mapPolygons.template,

  min: am4core.color("#C18282"),

  max: am4core.color("#800000")

});

 

// heat 범례 추가 

var heatLegend = chart.chartContainer.createChild(am4maps.HeatLegend);

heatLegend.valign = "bottom";

heatLegend.align = "left";

heatLegend.width = am4core.percent(40);

heatLegend.series = polygonSeries;

heatLegend.orientation = "vertical";

heatLegend.padding(20, 20, 20, 20);

heatLegend.valueAxis.renderer.labels.template.fontSize = 10;

heatLegend.valueAxis.renderer.minGridDistance = 40;

heatLegend.minValue = 0;

heatLegend.maxValue = 1000;

 

// Add some data

polygonSeries.data = [{

  "id": "US",

  "name": "United States",

  "value": 500,

 

}, {

  "id": "FR",

  "name": "France",

  "value": 600,

  

}, {

  "id": "CN",

  "name": "China",

  "value": 100,

  

}];

 

// 줌 드래그 기능 없애기

chart.maxZoomLevel = 1;

chart.seriesContainer.draggable = false;

chart.seriesContainer.resizable = false;

 

4. 결과

heat map 결과 이미지

 

 

* 해당 사이트 내 예제 주소(heat map)

 - https://codepen.io/team/amcharts/pen/yvdwrR

'IT > 웹' 카테고리의 다른 글

Elementor - 워드프레스 페이지 빌더  (0) 2020.02.12
웹 호스팅 - 드림호스트 이용(상품결제 편)  (0) 2020.02.11
Dreamweaver (드림위버) - 사이트 정의  (0) 2020.02.06
Pingendo - 반응형 웹 디자인 툴  (0) 2020.02.05
반응형 웹 기본 설정(뷰포트)  (1) 2020.01.30
'IT/웹' Related Articles more
Comments