資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究在JavaScript中建立你的第一個地圖
假設您是一位企業主，您的辦公室位於印度的10個不同邦。現在您想在您的網站上顯示此資料，那麼這篇文章就適合您，我將介紹使用FusionCharts核心JavaScript圖表庫及其地圖包建立互動式地圖的過程。
首先，有兩種方法可以在您的網站上顯示資料：
包含所有地址的列表，或
互動式地圖？
如果您像大多數人一樣是視覺學習者，您會選擇第二個選項——互動式地圖。
如果您想學習如何製作互動式地圖，那麼您來對地方了。
為了便於理解，我將本教程介紹分為四個步驟：
步驟1 - 資料結構
步驟2 - 包含FusionCharts JavaScript檔案
步驟3 - 建立圖表容器元素
步驟4 - 渲染地圖
步驟1 - 資料結構
我們將繪製印度地圖，表示2013年各邦每臺電腦的網際網路數量。以下是相同的資料表格：
| 邦 | 電腦數量 |
|---|---|
| 查謨和克什米爾邦 | 58438 |
| 喜馬偕爾邦 | 41344 |
| 旁遮普邦 | 292124 |
| 等等… |
FusionCharts理解XML和JSON資料，在本教程中我們將使用JSON。
現在我們有了資料，我們將為地圖形成JSON資料陣列。地圖的資料陣列由每個邦/實體的一個物件組成，其中包括該邦的唯一id和value。此id充當邦及其相應值的識別符號。
我們將這樣為地圖形成資料：
"data": [
{ "id": "015", "value": "58438" },
{ "id": "014", "value": "41344" },
{ "id": "028", "value": "292124" },
// more map data…
]步驟2 - 包含FusionCharts JavaScript檔案
這是每個Web開發者在Web應用程式實際程式設計開始之前必須做的第一件事——包含專案的依賴項。
在此步驟中，我們將使用<script>標籤在網頁的頭部部分包含FusionCharts提供的JavaScript檔案。
我們將包含這三個檔案：
FusionCharts核心JavaScript檔案
FusionCharts核心地圖檔案
印度地圖定義檔案
以下是操作方法：
<head> <script type="text/javascript" src="location/of/fusioncharts.js"></script> <script type="text/javascript" src="location/of/fusioncharts.maps.js"></script> <script type="text/javascript" src="location/of/fusioncharts.india.js"></script> </head>
fusioncharts.js和fusioncharts.maps.js是繪製任何地圖所必需的，而fusioncharts.india.js是繪製印度地圖所必需的。
要繪製其他國家或地區的地圖，您必須包含該特定國家或地區JavaScript檔案，這些檔案可在FusionCharts提供的地圖定義包中找到。
步驟3 - 建立圖表容器元素
我們的地圖將在網頁上的HTML <div>元素內佔據其位置。以下是操作方法：
<div id="indian-map">Just a Second!</div>
網頁上每個地圖或圖表的id必須是唯一的。
步驟4 - 渲染地圖
現在我們已經準備好渲染地圖所需的所有內容，我們將最終使用FusionCharts例項為我們的圖表建立一個物件。
以下是相同的語法：
FusionCharts.ready(function() { // // FusionCharts instance
var mapObj=new FusionCharts({ // Map Object // map definition });
});現在，我們將實現上述語法來建立地圖物件，並使用render()方法來渲染圖表。
FusionCharts.ready(function() {
var mapOfIndia = new FusionCharts({
type: "maps/india",
renderAt: "indian-map", // div container for our map
height: "650",
width: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "No. of Computers with Internet in India",
"subCaption": "Census 2011",
"captionFontSize": "25",
// other chart configurations
},
"colorrange": {
"minvalue": "300",
"startlabel": "Low",
"endlabel": "High",
"code": "#efedf5",
"gradient": "1",
"color": [{
"maxvalue": "220000",
"displayvalue": "Avg.",
"code": "#bcbddc"
}, {
"maxvalue": "1400000",
"code": "#756bb1"
}]
},
"data": [{
"id": "015",
"value": "58438"
}, {
"id": "014",
"value": "41344"
}, {
"id": "028",
"value": "292124"
},
// more data
]
}
}).render(); // render method
});如果您已按照上述所有步驟操作，則應該會看到如下所示的精美印度地圖：
後續步驟
基本地圖可以很好地表示資料，但是可以使用地圖和圖表完成許多事情。我將在下面討論其中一些：
自定義設計 - FusionCharts提供了大量的屬性來自定義地圖的外觀。以下是一些我用來增強上述地圖的屬性
captionFontSize - (整數) 用於更改標題的字型大小。
baseFont - (字串) 用於更改圖表中的字型樣式。您不僅限於使用系統字型，還可以選擇任何您喜歡的字體系列。您只需將其包含在HTML中並使用此屬性宣告即可。
新增標記 - FusionCharts在地圖中提供了一個很棒的功能來新增標記，該標記可用於表示城市、商場和地標等位置。
提升到更高的水平 - FusionCharts允許您透過向地圖或圖表新增向下鑽取、註釋和事件等令人驚歎的功能，將您的資料視覺化體驗提升到更高的水平。
694 次瀏覽
