Amcharts4使用笔记

Amcharts4使用笔记

最近练手的项目中，需要在页面显示柱状图、饼型图等，视频教程中使用的是amchart1.6，而现在最新的技术已经到amcharts4了。之前的文件配置方式已经不适用了，经过两天的摸索，终于用最新的amcharts4实现了需求。

首先，下载amcharts4并解压，依次进入amcharts4>examples，有javascript和json两种配置方式，进入javascript后，里面有各种类型的示例。这里以simple-column-chart为例，打开文件夹，里面有四个文件：index.css，index.html，index.js，README.md。

打开index.html页面，效果如下：

查看index.html的内容：

index.js为图形提供的数据如下：

chart.data = [
	{"country": "USA","visits": 3025},
	{"country": "China","visits": 1882},
	{"country": "Japan","visits": 1809},
	{"country": "Germany","visits": 1322},
	{"country": "UK","visits": 1122},
	{"country": "France","visits": 1114},
	{"country": "India","visits": 984},
	{"country": "Spain","visits": 711},
	{"country": "Netherlands","visits": 665},
	{"country": "Russia","visits": 580},
	{"country": "South Korea","visits": 443},
	{"country": "Canada","visits": 441}];

根据用户需求改变index.css和index.js的内容,就可得到不同的图形。

通过上面的方法可以实现“单机版”的amcharts图形，但我们更多的时候是在项目中进行部署，图形的数据由后台提供，前端动态获取。这里介绍一下自己结合教程摸索出来的方法。

第一步，将上述提到index.css、index.html、index.js和三个需要导入的js文件拷贝到自己的项目路径中（位置自己定，合适就行），这里通过jQuery实现数据的获取，所以还需要额外导入jQuery。

然后，通过代码从后台获取数据，并将数据按照json格式（index.js中的文件为json格式）写入到index.js的同一层级的文件夹下。

// 拼接成指定格式的字符串
StringBuffer _temp = new StringBuffer();
        _temp.append("{data:[");
        for(int i = 0;i

最后，对index.js进行修改，将其中的静态数据改为从data.json中读取：

var data = [];

$.ajax({
	type: "get",
	url: "data.json",
	dataType: "json",
	async: false,
	success: function(result){
		$.each(result.data,function(i,item){
			data.push({name: item.name,value: item.value});
		});
	}
});

chart.data = data;

启动项目，在浏览器中即可得到需要的图形。

data.json中的数据：

{data:[
	{"name":"第1月","value":68},
	{"name":"第2月","value":65},
	{"name":"第3月","value":70},
	{"name":"第4月","value":36},
	{"name":"第5月","value":8},
	{"name":"第6月","value":37},
	{"name":"第7月","value":43},
	{"name":"第8月","value":15},
	{"name":"第9月","value":71},
	{"name":"第10月","value":38},
	{"name":"第11月","value":62},
	{"name":"第12月","value":23}
]}

得到的图形：