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的内容：
<meta charset="UTF-8" />
<title>amCharts V4 Example - simple-column-chart</title>
<!-- 为页面提供样式 -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- 负责图像显示的div -->
<div id="chartdiv"></div>
<!-- 需要导入的三个js文件 -->
<script src="../../../core.js"></script>
<script src="../../../charts.js"></script>
<script src="../../../themes/animated.js"></script>
<!-- 提供数据 -->
<script src="index.js"></script>
</body>
</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。
<html>
<head>
<meta charset="UTF-8" />
<title>amCharts V4 Example - simple-column-chart</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartdiv"></div>
<script src="../../../components/chart/core.js"></script>
<script src="../../../components/chart/charts.js"></script>
<script src="../../../components/chart/themes/animated.js"></script>
<script src="../../../components/jquery-ui/jquery-1.2.6.js"></script>
<script src="index.js"></script>
</body>
</html>
然后，通过代码从后台获取数据，并将数据按照json格式（index.js中的文件为json格式）写入到index.js的同一层级的文件夹下。
// 拼接成指定格式的字符串
StringBuffer _temp = new StringBuffer();
_temp.append("{data:[");
for(int i = 0;i<dataList.size();) {
_temp.append("{\"name\":\"").append(dataList.get(i++))
.append("\",\"value\":").append(dataList.get(i++)).append("},");
}
UtilFuns utilFuns = new UtilFuns();
String _str = utilFuns.replaceLast(_temp.toString(), ",", "");
return new StringBuffer(_str).append("]}").toString();
// 写入指定位置的json文件内
fileUtil.createTxt(path+"/stat/chart/"+file, "data.json", dataString)；
最后，对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}
]}
得到的图形：