data: [88, 32, 91, 34, 90],
这两处就是数据源，改成你要的动态数据就可以了
使用在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对象作为参数传递给报表，就行了.1、模拟数据
// 模拟100条0-100的随机数，作为柱状图的高度
var data = Array.apply(0, Array(100)).map(function() {
return Math.random() * 100
})
2、创建SVG容器
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = document.body.clientWidth - margin.left - margin.right,
height = 500 - margin.top - margin.bottom
var chart = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
chart就是最终建立的容器，下面就往容器里面放元素。
3、画柱状图
// 计算每根柱状物体的宽度
var barWidth = width / data.length
// 用g作每根柱状物体的容器，意义可类比div
// 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形
var bar = chart.selectAll('g')
.data(data)
.enter()
.append('g')
// 接收一个数据填充一个g元素
// 同时为g设置位置
.attr('transform', function(d, i) {
return 'translate(' + i * barWidth + ', 0)'
})
bar.append('rect')
// 添加一个矩形
.attr('y', function(d) {
return height - d
})
.attr('height', function(d) {
return d
})
.attr('width', barWidth - 1)
前文提到svg的元素定位都是基于整个svg容器左上角作为原点，但并不能使用position: absolute等方法定位，此处的g元素通过位移来定位x坐标，即transform: translate(x, 0)。
这里的bar可类比jQuery对象，是一个类数组对象，bar调用的方法都会对bar里面每个对象进行调用。代码中每一次调用都插入一个矩形，同时设置y坐标、高度和宽度，x坐标跟父容器（g）保持一致即可。这里需要注意y坐标往下为正，为了让所有矩形的下边处于同一高度，这里设置每个矩形的y坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形，这里设置矩形宽度为父容器的宽度减1。
通过以上js代码再稍微设置一点css
rect {
fill: #2177BB
}
即可看到一张最简单的柱状图了。
4、添加坐标轴
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([height, 0])
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(1)
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
// 添加x坐标轴
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
// 添加y坐标轴
chart.append('g')
.attr('class', 'y axis')
.call(yAxis)
完整的柱状图就是这样了
