Highmaps網頁圖表教程之下載Highmaps與Highmaps的地圖類型

認識Highmaps

Highmaps是Highcharts的姊妹框架，用來實現地圖圖表。

它全然使用Javascript編寫實現。其結構清晰，使用簡單。開發者能夠非常輕松地構建出常見的各種地圖圖表類型。

本章將簡要介紹Highmaps的特點。並實現第一個Highmaps地圖應用。

Highmaps概述

為了更好學習Highmaps的使用。我們首先了解怎樣獲取Highmaps插件和Highmaps所支持的圖表類型。

下載Highmaps

Highmaps官網提供了完整的Javascript腳本和範例程序。開發人員都能夠免費獲取這些資源。以下解說怎樣下載

（1）在瀏覽器打開官網http://www.highcharts.com/，如圖1.1所看到的。

圖1.1 Highmaps官方首頁

（2）單擊Highmaps頁面下的Downloadbutton。進入Highmaps的下載頁面。如圖1.2所看到的。

圖1.2 Highcharts下載頁面

（3）該頁面提供兩種兩種下載：普通下載和定制下載。

這裏選擇普通下載模式，直接單擊HIGHMAPS 1.1.6button。下載保存文件Highmaps-1.1.6.zip。解壓該文件後如圖1.3所看到的。

圖1.3 Highcharts文件結構

這些目錄依次保存著

• q api目錄中保存著離線的API說明文檔。

• q examples目錄中保存著Highmaps官方提供的各種範例程序；

• q gfx目錄保存這VML功能所須要的圖形文件；

• q graphics目錄保存著範例程序所使用的圖形文件；

js文件夾中保存著Highchats最重要的js文件，如圖1.4所看到的。它裏面包括幾個文件夾。以下依次解說解說：

圖1.4 js文件夾結構

當前文件夾下的Javascript腳本文件分為兩類。

直接以.js結尾的腳本文件是最常使用的文件。這些文件在使用的時候須要依賴對應的框架，如jQuery框架。以.src.js

• q adapters目錄保存著Highmaps的獨立框架文件，便於用戶不借助jQuery實現地圖功能；

• q modules目錄保存著Highmaps的一些模塊功能腳本。

• q themes目錄保存著Highmaps圖標的主題腳本。

Highmaps的地圖類型

Highmaps支持常見的地圖圖表類型。

用戶能夠通過查看範例文件，了解常見的地圖類型。

雙擊壓縮包中的index.htm文件。能夠查看官方提供的地圖類型。

註意：因為網頁中引用了Google API的托管代碼，所以查看演示樣例的時候，最好使用VPN聯網查看。否則，會造成頁面無法打開的問題。

因為官方實例從不同角度展現Highmaps的應用，所以實例分類有點淩亂。這裏列出最常見的幾種地圖類型。

1.基本地圖類型

基本地圖類型是Highmaps中最常見的類型，它使用map模版實現。

它直接使用地圖上的部分地圖作為數據節點。如圖1.5所看到的。

圖1.5 基本地圖類型

2.基本地圖+線條類型

用戶還能夠在基本地圖的基礎上加入新的圖形元素。而新加入的圖形元素作為數據節點而存在。如圖1.6所看到的，人體構造圖是基本地圖。而身高標記圖形就是作為節點存在。該類型圖表由Highmaps的mapline模版實現。

圖1.6 基本地圖+線條類型

3.基本地圖+節點類型

用戶也能夠在基本地圖上直接加入位置坐標，而標記節點信息。

這樣就構成了基本地圖+節點類型圖表。如圖1.7所看到的。在圖中，中國地圖作為基本地圖，而太原節點則作為節點依照地理經緯度標記在地圖上。

圖1.7 基本地圖+節點類型

4.基本地圖+氣泡類型

用戶還能夠在基本地圖基礎上，以氣泡的形式標記節點。這樣不僅展現位置信息，還展現節點相應的數值信息，如圖1.8所看到的。

在圖中，中國地圖作為基本地圖，而每一個省的發展度以氣泡提示。

圖1.8 基本地圖+氣泡類型

本文選自：Highmaps網頁圖表基礎教程大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

Highmaps網頁圖表教程之下載Highmaps與Highmaps的地圖類型