Amcharts4使用笔记

最新推荐文章于 2024-05-15 09:30:28 发布

Lincain

最新推荐文章于 2024-05-15 09:30:28 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/Lincain/article/details/86678705

版权

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}
]}

得到的图形：
在这里插入图片描述