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来制作专业的JavaScript图表。
FusionCharts Suite XT现已更新至3.14.0-sr.1版本，FusionCharts Angular包装器现在与Angular 8兼容并修复了一些bug。
点击下载FusionCharts Suite XT最新试用版
创建你的第一个地图
在本节中，我们将使用世界地图创建一个可视化图表，以显示平均每年人口增长。
地图数据
下表中显示了以上地图的数据：
州 | 实体名称 | 值 |
北美 | NA | 82 |
南美洲 | SA | 2.04 |
亚洲 | AS | 1.78 |
欧洲 | 欧盟 | 40 |
非洲 | AF | 2.58 |
澳大利亚 | AU | 1.30 |
在上表中，“ 实体名称 ”列表示地图中表示的地理实体，其全名在“ 状态”列中给出。
FusionCharts接受JSON格式的数据，其中上述实体由对象中的id键表示data。
对于任何地图可视化，重要的是要为id按键提供正确的值。例如，如果要表示非洲，则对应的值id必须为AF而不是AFR。
我们为可使用FusionCharts渲染的所有地图提供了详细的地图规格表，您可以在其中找到id要创建的正确地图。
以下代码是上面表格的JSON表示形式，具有呈现上面地图所需的属性。
{
// 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数据中：
创建chart对象以定义地图的元素。
创建colorRange数组以设置与特定值范围关联的颜色。
指定minValue并maxValue在color数组下的colorRange数组内。
创建data数组以定义各大洲的ID及其对应的值以及配置。例如，根据第一对象data数组包含id和value的北美为NA和0.82分别。
图表对象和相应的数组包含一组称为属性的键值对。这些属性用于设置地图的功能和外观属性。
现在您已经拥有JSON格式的数据，现在让我们渲染地图。
呈现地图
要渲染地图，请执行以下步骤：
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!现在您的第一个使用Plain JavaScript的地图已准备就绪。
渲染其他地图
为了减小包装的尺寸，FusionCharts仅随附两张地图，即世界地图和美国地图。但是，FusionCharts提供了1600多种地图供您浏览。如果要保存在本地，请分别下载地图文件。
让我们创建一个加利福尼亚地图，以显示“特定月份的网络访问量”，如下所示：
要渲染上面的地图，请先安装fusionmaps包含所有地图定义文件的软件包，如下所示：
$ npm install fusionmaps
安装fusionmaps软件包后，呈现加利福尼亚地图的代码为：
要使用1600多种地图中的任何其他地图（世界和美国除外），请下载地图定义文件，然后将这些地图文件复制到当前地图文件夹中。
地图定义文件以以下fusioncharts.[MAP_ALIAS].js格式命名，其中MAP_ALIAS代表国家，州或地区名称。
<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>呈现图表时遇到问题？
如果出现错误，并且您看不到图表，请检查以下内容：
如果页面上出现JavaScript错误，请检查浏览器控制台中的确切错误并进行相应修复。
如果该图表完全没有显示，但是没有JavaScript错误，请检查FusionCharts Suite XT JavaScript库是否正确加载。您可以在浏览器中使用开发人员工具查看是否fusioncharts.js已加载。
如果收到“ 正在加载数据”或“ 在加载数据时出错”消息，请检查JSON数据结构是否正确，或代码中与引号相关的冲突。
=====================================================
想要了解或购买FusionCharts Suite XT正版授权的朋友欢迎咨询
关注“慧聚IT”微信公众号，及时获取产品最新消息和最新资讯
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自：
彩票走势图 
9次
相关产品
最新文章 
彩票走势图相关的文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线