Highcharts를 사용하여 지도 히트맵을 만드는 방법-JS 튜토리얼-php.cn

Highcharts를 사용하여 지도 히트맵을 만드는 방법

王林

풀어 주다： 2023-12-17 16:06:31

원래의

1268명이 탐색했습니다.

Highcharts를 사용하여 지도 히트맵을 만드는 방법

Highcharts를 사용하여 지도 히트맵을 만드는 방법은 구체적인 코드 예제가 필요합니다

히트맵은 다양한 색상을 통해 각 영역의 데이터 분포를 표현할 수 있는 시각적 데이터 표시 방법입니다. 데이터 시각화 분야에서 Highcharts는 풍부한 차트 유형과 대화형 기능을 제공하는 매우 인기 있는 JavaScript 라이브러리입니다.

이 글에서는 Highcharts를 사용하여 지도 히트맵을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 데이터를 준비해야 합니다. 다양한 도시와 해당 인구가 포함된 데이터세트가 있다고 가정해 보겠습니다. 데이터 형식은

var data = [
  ['北京', 21536],
  ['上海', 24150],
  ['广州', 13278],
  ...
];

로그인 후 복사

와 유사합니다. 다음으로 빈 HTML 페이지를 만들고 Highcharts에 대한 참조를 추가하겠습니다. Highcharts 라이브러리 파일을 다운로드하여 HTML 페이지에 소개하거나 온라인 참조 방법을 사용할 수 있습니다. HTML 페이지에 다음 코드를 추가하세요:

<!DOCTYPE html>
<html>
<head>
  <title>地图热力图示例</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/maps/modules/map.js"></script>
  <script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
</head>
<body>
  <div id="container" style="width: 800px; height: 600px;"></div>
  <script src="path/to/your/script.js"></script>
</body>
</html>

로그인 후 복사

이 예에서는 Highcharts의 지도 모듈과 중국 지도의 데이터를 소개했습니다.

다음으로 지도 히트맵을 그리는 로직을 JavaScript 코드로 작성해야 합니다. path/to/your/script.js 파일에 다음 코드를 추가합니다.

Highcharts.mapChart('container', {
  title: {
    text: '中国城市人口分布热力图'
  },
  subtitle: {
    text: '数据来源: 维基百科'
  },
  series: [{
    type: 'map',
    mapData: Highcharts.maps['cn/all-sar-taiwan'],
    data: data,
    name: '人口',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  }]
});

로그인 후 복사

이 코드에서는 Highcharts.mapChart 함수를 사용하여 지도 차트를 만들고 제목, 부제, 데이터 등을 설정합니다.

마지막으로 브라우저에서 HTML 페이지만 열면 그려진 지도 히트맵을 볼 수 있습니다.

하이차트를 사용하여 지도 히트맵을 만드는 단계를 요약하면 다음과 같습니다.