如何在JSP中实现柱形图 [

JavaScript017

如何在JSP中实现柱形图 [,第1张

使用在jsp中用jasperReport、iReport和jfreechart做一个带有柱状图的简单报表 1. 首先请看这个帖子,上面有一个文档《JasperReport与Ireport的配置与使用》。 http://community.csdn.net/Expert/topic/3059/3059167.xml?temp=.8465387 作者写了一份很详细地用jasperReport和iReport生成一个简单报表的文档,详细、清楚,如果你是新手,请一定要看。只要试着一步步地做,做出一个不带柱状图、饼状图的报表相当容易。特别要注意它上面的传递参数$P{},因为我们在用到它。 但是它上面有一个小小的错误,是在用JSP生成报表的那一段代码。请将第一行的那句:<%@ page contentType="application/pdfcharset=GB2312" %>去掉。不然总是提示下载一个JSP文件,而不是我们希望生成的报表PDF。 如果你不需要那些柱图饼图之类,就不需要往下看了。那份文档已经很详细了。 (在这里要特别感谢作者,这份文档给了我莫大的帮助。我也是我想写这份总结的原因之一) 2. 下载 1> jasperReport 2> iReport 0.3.0 或0.3.1 建议使用0.3.0,因为0.3.1有一些小BUG。如不生成.jasper文档(其实生成的是一个没有后缀名的文档,chartTool也有一些问题。 3> jfreechart 除了jar文件,它们的API文档也很有用。特别是jasperReport自带的DEMO。 @ 生成柱状图 我们假设你已经按《JasperReport与Ireport的配置与使用》的做法生成了一个可以正确运行的报表,那么我们就可以继续了。如果你没有,请再仔细看它,然后再往下看。 我知道的生成柱状图有三种方法,我比较喜欢第三种,但是前两种也应该了解一下。 1> 使用ChartTool。 iReport的工具栏上有一个工具,叫ChartTool。我们点一下它,然后在报表上画一个报表出来,这时就可以看到一个柱状的报表了。然后用执行一下,看是不是已经生成了柱状图了?只可惜这个图我们没有办法改参数,满足不了我们的需要。(也许有办法,但我不会,继续) 2> 使用ChartScriptlet 去jasperReport自带的DEMO中,找一个chart的例子,它使用的就是jfreechart。可以看看它。它的原理是: 在报表上插入一个图片,赋给它一个变量chartImage。该报表调用了一个类ChartScriptlet,它可以动态生成一个柱状图的图片对象,赋给chartImage。这样报表看起来,就会有一个可以按需要设置的柱图了。 这样做:在报表上插入一个图片,再设置一个变量chartImage,为java.awt.Image类型。在图片的Image Expresion处设置$V{chartImage}。打开View->Report Properties->Scriptlet。选择Use this scriptlet class,设置为ChartScriptlet。然后我们把jasperReport中自带的Demo中的chart下的ChartScriptlet.class拷到你报表所在的目录下。运行一下看看,是否有一个饼图? 我们再到jasperReport的DEMO下的chart目录下,看一下ChartScriptlet.java文件。你可以修改它,可以生成自己所需要的柱图、饼图、带图,其它图等等。如果要从数据库中读取数据,可以在这个文件中读取。 3> 自已写一个类,生成一个柱图对象,把它作为一个参数传递给报表,再生成一个PDF 第二种方法那个Scriptlet类,继承自另一个类,你只需要重载其中的一个方法afterReportInit()就行了,其它的都不用管。如果是自己的类,你可以把那个Scriptlet中的那些代码拷过来,但是要有一个方法返回一个Image对象,它就是你所生成好的图片对象。你也可以向它传递参数,这样对数据库的操作就可以在别的地方做了。然后把它个Image对象作为参数传递给报表,就行了.

告诉思路吧, 剩自摸索, 涨经验, 涨姿势啊~~~

php 读取数据, 组织数据json格式, 由客户端调用, 格式:

category: ["管理院",'....."]

data: [ [136,215], [147,196], .....]

客户端, 先调用 Highcharts.chart 构造图表, 设定基本型装横向组堆积图

js通ajax加载数据, 数据设置图标 category, series

chart.redraw 即.

具体先看 highcharts所sample, 比较合适, 直接照搬, 想办修改数据即.

chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效,这也是HTML5 Canvas的一大功劳。