http://blog.csdn.net/wsk7860/article/details/8751061
最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用Highchars 这里和大家分享下使用心得。
重点说明此代码是针对一个报表显示多个项对比显示。
直接贴代码：web端
<script type="text/javascript" src="js/jquery/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/highcharts/highcharts.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', //DIV容器ID type: 'column'//报表类型 }, //报表名称 title:{ text:'测试' }, / /补充说明 subtitle: { text: '报表说明' }, yAxis: { min: 0, title: { text: '单位(mm)' } }, //x轴显示内容 xAxis: { categories: [ ] }, / /数据来源(多个对比的) series: [{},{},{},{}] }; //json url 地址这里我使用的servlet var url = "http://127.0.0.1:8080/servlet/JsonServlet"; $.getJSON(url,function(data) { var i,len=data.length; for( i=0;i<len;i++){ //赋值 series options.series[i].data = data[i].list; options.series[i].name = data[i].name; //对报表X轴显示名称赋值 options.xAxis.categories[i]=data[i].year; } var chart = new Highcharts.Chart(options); }); }); </script> <body> <div id="container"></div> </body>
后台servlet doget() 方法内容：
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
JSONArray members = new JSONArray();
PrintWriter out= response.getWriter();
try {
for(int i=1;i<5;i++){
//构建JSON 对象
JSONObject member = new JSONObject();
//构建series所需参数
member.put("name", "张飞"+i); //对应series.name
JSONArray list = new JSONArray();//对应series.data
for(int k=1;k<5;k++){
list.put(k*100);
}
member.put("year", (2012 + i));//对应Y轴显示
member.put("list", list);
member.put("color", "#FF0022");//如需要可以设置柱状图颜色
members.put(member);
}
out.write(members.toString());
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();
图片为效果图：
