amcharts_4(水晶报表的简单实用)

本文介绍了如何使用amcharts创建图表报表,包括从官方下载资源、理解饼图例子的源码、调整文件路径、导入数据以及如何处理Servlet返回的json数据。通过示例展示了将数据动态引入到图表中的方法,并提出在处理多列数据时遇到的问题及当前解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.资料准备
1.下载地址:https://www.amcharts.com/download/
下载那个5.8M的下载那个5.8M的即可
在这里插入图片描述解压后的目录,examples里有所有的图表例子,当然你也可以查看官网,一目了然。
二.使用amcharts
1.打开任意一个例子以饼图为例,查看index.html的源码可见
在这里插入图片描述
2.由图可知,他需要5个支持文件才可运行那么我们将这写文件摘出来放到一起即可以拥有一个独立的饼图报表。
效果如下
在这里插入图片描述3.需要注意的是文件位置改变路径也要重写哦!看我的:
在这里插入图片描述
4.数据导入
我们查看他的index.js文件
在这里插入图片描述
可见他通过json格式处理静态数据。但是我们平常要展示的数据是servlet处理后的数据,所以我们选官网提供的另一个方法
在这里插入图片描述
只需要提供数据路径即可。举例如下:
在这里插入图片描述我通过doSelectAction提供数据那么我的数据路径就是上级目录下的select即"…/select"
我统计了emp表的工资占比以名字为“单位”,所以
在这里插入图片描述
这两个地方要改成对应的值哟!
然后看看效果图:
在这里插入图片描述数据就出来了!
三.关于Servlet处理数据
amcharts需要的是一个json格式数组那么我们直接用
JSONArray arr= JSONArray.fromObject("");
处理的得到数据即可,但是一张表中往往不止两列而JSONArray是根据反射原理写的往往会把我们全部的对象属性全部得到,即使我们只查两列他也会把其他列的值列出来设值为0.
所以我的解决办法又写了一个小对象只有我需要的数据的两列,然后查出所有后再给我那个小对象赋值,代码如下:
在这里插入图片描述
在这里插入图片描述
不知怎么,总感觉很low,重用性极低。你们有什么办法呀?

xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值