Highmaps網頁圖表教程之Highmaps第一個實例與圖表構成

時間 2019-11-06

標籤 highmaps 網頁圖表教程第一個實例構成欄目 HTML 简体版

原文原文鏈接

Highmaps網頁圖表教程之Highmaps第一個實例與圖表構成

Highmaps第一個實例

下面咱們來實現本教程的第一個Highmaps實例。javascript

【實例1-1：hellomap】下面來製做一箇中國地圖的圖表。操做過程以下：css

（1）新建一個網頁文件，命名爲Hellomap。同時將title設置Hello Highmaps。代碼以下：html

<html xmlns="http://www.w3.org/1999/xhtml">java
<head>jquery
<meta charset="utf-8" />spa
<title>Hello Highmaps</title>.net
<style type="text/css">插件
#container {調試
width:500px;orm
height:500px;
border:1px solid #000;
padding :0px;
margin:10px;
}
</style>
</head>
<body>
</body>
</html>

（2）在網頁中添加一個div，設置id爲container。

<div id="container"></div>

（3）設置該div的樣式，代碼以下：

<style type="text/css">
#container {
width:500px;
height:500px;
border:1px solid #000;
padding :0px;
margin:10px;
}
</style>

（4）引去jQuery腳本和Highmaps腳本，代碼以下：

<script src="jquery.js"></script>
<script src="highmaps.js"></script>

（5）引入地圖數據，這裏使用的是從Highmaps官網下載的地圖數據。代碼以下：

<script src="cn-all-sar-taiwan.js"></script>

（6）添加地圖繪製代碼。代碼以下：

<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
},
mapNavigation: {
enabled: true
},
title: {
text: '地圖'
},
subtitle: {
text: '臨時數據'
},
series: [{
name:'省份',
mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],
joinBy:'hc-key',
data: [{
'hc-key': 'cn-zj',
value:22
}, {
'hc-key': 'cn-sx',
value:50
}],
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
}
}],
credits: {
text: '大學霸',
href: 'http://daxueba.net'
}
};
$('#container').highcharts('Map',options);
});
</script>

保存以上文件，運行結果如圖1.9所示。

圖1.9 第一個Highmaps實例

Highmaps圖表構成

爲了方便你們更好了解Highmaps圖表，這裏從界面和代碼兩個角度講解Highmaps地圖的實現方式。

Highmaps界面構成

在第一個實例中，雖然咱們編寫的代碼不多，可是Highmaps卻爲咱們生成了很是完整的地圖圖表。在這個圖表中，除了顯示地圖之外，還顯示了不少輔助圖表元素，如圖1.10所示。這些輔助元素包括標題、副標題、縮放按鈕、提示框、數據標籤、圖例和版權信息。下面簡要講解這些元素的做用。

q 標題/副標題：用來簡要說明圖表所要表達的內容，幫助瀏覽者快速瞭解圖表的重點。
q 縮放按鈕：用來放大和縮小地圖，幫助瀏覽者更清楚的瞭解地圖細節。
q 提示框：當鼠標懸浮在有數據的節點上，就會以彈出的形式顯示節點的相關信息。
q 數據標籤：以靜態的形式顯示節點數值，因爲空間有限，不少時候數據標籤會被隱藏。
q 圖例：用來數據的種類，尤爲當圖中包含多類數據的時候。同時，瀏覽者能夠經過單擊圖例的方式，選中某一些數據，或者取消某一類的數據的顯示。
q 版權信息：用來講明圖表全部者信息。

圖1.10 輔助圖表元素

Highmaps代碼構成

雖然咱們在第一個實例中並無編寫多少代碼，但圖1.9卻展示豐富的內容。這充分的體現了Highmaps使用的便捷性。實現Highmaps圖表實際分爲兩個步驟，依次講解。

1.圖表配置項對象

Highmaps核心主體就是圖表配置項對象。該對象包含了圖表的各種數據和配置信息。每一個部分每每都是由更小的配置項對象組成。用戶只要按照規範的格式，填寫對應的數據和配置值，就能夠。整個過程就像搭建積木同樣。下面對第一個實例的配置項對象作簡要介紹。

var options = {
chart: { //圖表的基本信息配置項
},
mapNavigation: { //導航功能
enabled: true //啓用導航功能
},
title: { //標題
text: '地圖' //設置標題文本
},
subtitle: { //副標題
text: '臨時數據' //設置副標題
},
series: [{ //定義數據列
name:'省份', //數據列的名字
mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'], //地圖數據來源
joinBy:'hc-key', //設置節點與地圖關聯模式
data: [{ //節點數據
'hc-key': 'cn-zj',
value:22
}, {
'hc-key': 'cn-sx',
value:50
}],
dataLabels: { //數據標籤
enabled: true,
crop: false,
overflow: 'none',
}
}],
credits: { //版權信息
text: '大學霸',
href: 'http://daxueba.net'
}
};

從代碼中能夠看出，界面中的每一個部分都對應代碼中的一個小模塊。這樣，便於用戶構建圖表，並進行後期的調試。

2.在容器中繪製圖表

在指定好配置項對象後，用戶就可使用Highmaps插件提供的higcharts方法在指定的容器中繪製圖表。須要的代碼只須要如下一行。

$('#container').highcharts('Map',options);

只須要以上兩個步驟，就能夠在現有的網頁中繪製出圖1.9所示的圖表了。用戶對圖表進行擴展，只須要修改圖表配置對象便可。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。