前端報表技術：使用 JavaScript 生成漂亮圖表
百度 echarts： http://echarts.baidu.com/examples.html
Funsioncharts : http://www.fusioncharts.com/goodies/fusioncharts-free/
Highcharts ： 折線圖、 區域圖、 柱狀圖、 餅狀圖 …
下載地址： http://www.highcharts.com/download
1.目錄結構(不同版本結構可能有所不同)
2.搭建環境
解壓文件,在webapp的js下創建和復制highcharts自目錄下的js文件
如果原項目有jquery-1.8.3.js刪除它里面的jquery.
3.引入模塊
4.基本知識
5.入門案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折線圖</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/highcharts/highcharts.js"></script> <script type="text/javascript" src="js/highcharts/modules/exporting.js"></script> <script type="text/javascript" src="js/highcharts/highcharts-zh_CN.js"></script> </head> <script type="text/javascript"> $(function() { $('#container').highcharts({ //調用主函數 title: { //主標題 text: '各城市各月份溫度表', align:'center' //對齊方式,默認居中對齊 }, subtitle: { //子標題 text: '數據來源:中國中央氣象局', align:'center' //對齊方式 }, exporting:{ enabled:true //是否顯示‘打印’,'導出'等功能按鈕，默認為顯示 }, xAxis: { //x坐標軸 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ] }, yAxis: { //y坐標軸 title: { text: '溫度 (°C)' }/*, 不需要 plotLines: [{ value: 0, width: 1, color: '#808080' }]*/ }, tooltip: { //數據提示框 valueSuffix: '°C' }, legend: { //圖例 layout: 'vertical', //位置,"horizontal" 或 "vertical" align: 'right', //水平對齊方式 verticalAlign: 'middle', //垂直對齊方式 borderWidth: 0 //沒有邊框 }, series: [{ //數據內容 name: '鄭州', data: [17.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: '北京', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: '上海', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: '廣州', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>柱狀圖</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/highcharts/highcharts.js"></script> <script type="text/javascript" src="js/highcharts/modules/exporting.js"></script> <script type="text/javascript" src="js/highcharts/highcharts-zh_CN.js"></script> </head> <script type="text/javascript"> $(function() { $('#container').highcharts({ //調用主函數 chart: { //圖表類型 type: 'column' //柱狀圖,默認為折線圖 }, title: { //主標題 text: '鄭州市各月份降雨量', align:'center' //對齊方式,默認居中對齊 }, subtitle: { //子標題 text: '數據來源:中國中央氣象局', align:'center' //對齊方式 }, xAxis: { //x坐標軸 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ] }, yAxis: { //y坐標 title: { text: '降雨量(mm)' } }, tooltip: { //數據提示框 valueSuffix: 'mm' }, series: [ { //數據內容 name: '鄭州', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] }); }); </script> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
6.常見問題解決
6.1去除圖表右下角的logo
在higcharts.js中找到版權標簽，把enabled屬性的！0替換為0即可。
7.查詢數據庫生成報表
效果圖：
因為界面采用easyui+zTree，所以先從index.html跳轉到一個json上,json仔跳轉到一個thml頁面上，然后發送異步請求，獲取數據
highchart.json界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折線圖</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <script type="text/javascript" src="../../js/highcharts/highcharts.js"></script> <script type="text/javascript" src="../../js/highcharts/modules/exporting.js"></script> <script type="text/javascript" src="../../js/highcharts/highcharts-zh_CN.js"></script> </head> <script type="text/javascript"> $(function() { $.post("../../highchart_show.action",function(data){ $('#container').highcharts({ //調用主函數 title: { //主標題 text: '快遞員部門分布圖', align:'center' //對齊方式,默認居中對齊 }, subtitle: { //子標題 text: '數據來源:BOS數據庫', align:'center' //對齊方式 }, exporting:{ enabled:true //是否顯示‘打印’,'導出'等功能按鈕，默認為顯示 }, xAxis: { //x坐標軸 categories:data.categories }, yAxis: { //y坐標軸 title: { text: '人數' } }, tooltip: { //數據提示框 valueSuffix: '人' }, series:[{ data:data.series }] }); },"json"); }); </script> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
package cn.itcast.bos.web.action.highchart; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.apache.struts2.convention.annotation.Action; import org.apache.struts2.convention.annotation.Namespace; import org.apache.struts2.convention.annotation.ParentPackage; import org.apache.struts2.convention.annotation.Result; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; import cn.itcast.bos.service.base.CourierService; @Controller @Scope("prototype") @Namespace("/") @ParentPackage("json-default") public class HighchartAction extends ActionSupport{ @Autowired private CourierService courierService; @Action(value="highchart_show",results={@Result(name="success",type="json")}) public String highchartShow(){ List<Object[]> list = courierService.highchartShow(); List<String> categories = new ArrayList<>(); List<Long> series = new ArrayList<>(); for (Object[] object : list) { categories.add((String) object[0]); series.add( (Long) object[1]); } Map<String, Object> map = new HashMap<>(); map.put("categories", categories); map.put("series", series); System.out.println(map); ActionContext.getContext().getValueStack().push(map); return SUCCESS; } }
service層代碼
dao層代碼
