FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。
FusionCharts Suite XT現(xiàn)已更新至3.14.0-sr.1版本，F(xiàn)usionCharts Angular包裝器現(xiàn)在與Angular 8兼容并修復了一些bug。
點擊下載FusionCharts Suite XT最新試用版
創(chuàng)建你的第一個地圖
在本節(jié)中，我們將使用世界地圖創(chuàng)建一個可視化圖表，以顯示平均每年人口增長。
地圖數(shù)據(jù)
下表中顯示了以上地圖的數(shù)據(jù)：
州 | 實體名稱 | 值 |
北美 | NA | 82 |
南美洲 | SA | 2.04 |
亞洲 | AS | 1.78 |
歐洲 | 歐盟 | 40 |
非洲 | AF | 2.58 |
澳大利亞 | AU | 1.30 |
在上表中，“ 實體名稱 ”列表示地圖中表示的地理實體，其全名在“ 狀態(tài)”列中給出。
FusionCharts接受JSON格式的數(shù)據(jù)，其中上述實體由對象中的id鍵表示data。
對于任何地圖可視化，重要的是要為id按鍵提供正確的值。例如，如果要表示非洲，則對應的值id必須為AF而不是AFR。
我們?yōu)榭墒褂肍usionCharts渲染的所有地圖提供了詳細的地圖規(guī)格表，您可以在其中找到id要創(chuàng)建的正確地圖。
以下代碼是上面表格的JSON表示形式，具有呈現(xiàn)上面地圖所需的屬性。
{
// Map Configuration
"chart":
{ "caption": "Average Annual Population Growth",
"subcaption": " 1955-2015",
"numbersuffix": "%",
"includevalueinlabels": "1",
"labelsepchar": ": ",
"entityFillHoverColor": "#FFF9C4",
"theme": "fusion"
},
// Aesthetics; ranges synced with the slider
"colorrange": {
"minvalue": "0",
"code": "#FFE0B2",
"gradient": "1",
"color": [{
"minvalue": "0.5",
"maxvalue": "1.0",
"color": "#FFD74D"
}, {
"minvalue": "1.0",
"maxvalue": "2.0",
"color": "#FB8C00"
}, {
"minvalue": "2.0",
"maxvalue": "3.0",
"color": "#E65100"
}]
},
// Source data as JSON --> id represents countries of world.
"data": [{
"id": "NA",
"value": ".82",
"showLabel": "1"
}, {
"id": "SA",
"value": "2.04",
"showLabel": "1"
}, {
"id": "AS",
"value": "1.78",
"showLabel": "1"
}, {
"id": "EU",
"value": ".40",
"showLabel": "1"
}, {
"id": "AF",
"value": "2.58",
"showLabel": "1"
}, {
"id": "AU",
"value": "1.30",
"showLabel": "1"
}]
}在上面的JSON數(shù)據(jù)中：
創(chuàng)建chart對象以定義地圖的元素。
創(chuàng)建colorRange數(shù)組以設置與特定值范圍關聯(lián)的顏色。
指定minValue并maxValue在color數(shù)組下的colorRange數(shù)組內(nèi)。
創(chuàng)建data數(shù)組以定義各大洲的ID及其對應的值以及配置。例如，根據(jù)第一對象data數(shù)組包含id和value的北美為NA和0.82分別。
圖表對象和相應的數(shù)組包含一組稱為屬性的鍵值對。這些屬性用于設置地圖的功能和外觀屬性。
現(xiàn)在您已經(jīng)擁有JSON格式的數(shù)據(jù)，現(xiàn)在讓我們渲染地圖。
呈現(xiàn)地圖
要渲染地圖，請執(zhí)行以下步驟：
1、包括fusioncharts庫。
2、包括FusionMaps渲染器。
3、包括地圖定義文件。
4、包括FusionCharts主題文件，以將樣式應用于圖表。
5、將地圖渲染器和地圖定義添加為對核心的依賴。
6、將主題作為依賴項添加到核心。
7、將圖表配置存儲為JSON對象。在此JSON對象中：
8、為圖表添加一個容器（實例）。
My First map using FusionCharts Suite XT
id represents countries of world.
"data": [{
"id": "NA",
"value": ".82",
"showLabel": "1"
}, {
"id": "SA",
"value": "2.04",
"showLabel": "1"
}, {
"id": "AS",
"value": "1.78",
"showLabel": "1"
}, {
"id": "EU",
"value": ".40",
"showLabel": "1"
}, {
"id": "AF",
"value": "2.58",
"showLabel": "1"
}, {
"id": "AU",
"value": "1.30",
"showLabel": "1"
}]
}
});
annualPopulation.render();
});
" _ue_custom_node_="true">FusionMaps XT will load map here!現(xiàn)在您的第一個使用Plain JavaScript的地圖已準備就緒。
渲染其他地圖
為了減小包裝的尺寸，F(xiàn)usionCharts僅隨附兩張地圖，即世界地圖和美國地圖。但是，F(xiàn)usionCharts提供了1600多種地圖供您瀏覽。如果要保存在本地，請分別下載地圖文件。
讓我們創(chuàng)建一個加利福尼亞地圖，以顯示“特定月份的網(wǎng)絡訪問量”，如下所示：
要渲染上面的地圖，請先安裝fusionmaps包含所有地圖定義文件的軟件包，如下所示：
$ npm install fusionmaps
安裝fusionmaps軟件包后，呈現(xiàn)加利福尼亞地圖的代碼為：
要使用1600多種地圖中的任何其他地圖（世界和美國除外），請下載地圖定義文件，然后將這些地圖文件復制到當前地圖文件夾中。
地圖定義文件以以下fusioncharts.[MAP_ALIAS].js格式命名，其中MAP_ALIAS代表國家，州或地區(qū)名稱。
<html><head>
<!-- Including the fusioncharts core library -->
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Including the map renderer file -->
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
<!-- Including the map definition file -->
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/maps/fusioncharts.california.js"></script>
<!-- Including the fusion theme -->
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script><script type="text/javascript">const webVisit = {
type: 'maps/california',
renderAt: 'chart-container',
width: '800',
height: '550',
dataFormat: 'json',
dataSource: {
"chart": {
"animation": "0",
"showbevel": "0",
"usehovercolor": "1",
"showlegend": "1",
"legendposition": "BOTTOM",
"legendborderalpha": "0",
"legendbordercolor": "ffffff",
"legendallowdrag": "0",
"legendshadow": "0",
"caption": "Website Visits for the month of March 2018",
"connectorcolor": "000000",
"fillalpha": "80",
"hovercolor": "CCCCCC",
"theme": "fusion"
},
"colorrange": {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "e44a00",
"gradient": "1",
"color": [{"maxvalue": "2500", "code": "f8bd19"}, {"maxvalue": "5000", "code": "6baa01"}]
},
"data": [{"id":"001","value":2834},{"id":"003","value":3182},{"id":"005","value":3280},{"id":"007","value":911},{"id":"009","value":292},{"id":"011","value":530},{"id":"013","value":2515},{"id":"015","value":728},{"id":"017","value":1974},{"id":"019","value":848},{"id":"021","value":3278},{"id":"023","value":4463},{"id":"025","value":1198},{"id":"027","value":378},{"id":"029","value":2610},{"id":"031","value":1200},{"id":"033","value":3820},{"id":"035","value":940},{"id":"037","value":3416},{"id":"039","value":4004},{"id":"041","value":1604},{"id":"043","value":4011},{"id":"045","value":3203},{"id":"047","value":3775},{"id":"049","value":2721},{"id":"051","value":3417},{"id":"053","value":1530},{"id":"055","value":412},{"id":"057","value":3434},{"id":"059","value":1670},{"id":"061","value":1274},{"id":"063","value":4339},{"id":"065","value":2073},{"id":"067","value":1018},{"id":"069","value":3967},{"id":"071","value":3401},{"id":"073","value":3307},{"id":"075","value":1938},{"id":"077","value":489},{"id":"079","value":3207},{"id":"081","value":2295},{"id":"083","value":2747},{"id":"085","value":1114},{"id":"087","value":3400},{"id":"089","value":784},{"id":"091","value":1673},{"id":"093","value":4274},{"id":"095","value":4509},{"id":"097","value":3862},{"id":"099","value":1356},{"id":"101","value":4126},{"id":"103","value":1314},{"id":"105","value":1807},{"id":"107","value":4026},{"id":"109","value":3456},{"id":"111","value":1393},{"id":"113","value":1500},{"id":"115","value":2218}]
}};// RenderwebVisit.render();</script></head></html>呈現(xiàn)圖表時遇到問題？
如果出現(xiàn)錯誤，并且您看不到圖表，請檢查以下內(nèi)容：
如果頁面上出現(xiàn)JavaScript錯誤，請檢查瀏覽器控制臺中的確切錯誤并進行相應修復。
如果該圖表完全沒有顯示，但是沒有JavaScript錯誤，請檢查FusionCharts Suite XT JavaScript庫是否正確加載。您可以在瀏覽器中使用開發(fā)人員工具查看是否fusioncharts.js已加載。
如果收到“ 正在加載數(shù)據(jù)”或“ 在加載數(shù)據(jù)時出錯”消息，請檢查JSON數(shù)據(jù)結構是否正確，或代碼中與引號相關的沖突。
=====================================================
想要了解或購買FusionCharts Suite XT正版授權的朋友歡迎咨詢
關注“慧聚IT”微信公眾號，及時獲取產(chǎn)品最新消息和最新資訊
標簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營 
11次
相關產(chǎn)品
正式授權
最新文章 
半島外圍網(wǎng)上直營相關的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線