jquery报表组件highchat的运用

jquery报表组件highchat的使用

之前项目里面的报表组建用的是flash的amchart，非常漂亮，但是有几个缺陷，比如在数据量多的时候，某些提示信息会被flash给遮挡住，导致显示不全。另外部分浏览器没有安装flash的播放插件，导致客户端无法正常显示，另外amchart只支持xml格式的数据，参数等配置都在xml中进行配置的，和java的体系结构有些格格不入。所以后来索性替换成了jquery的一个报表插件highchart。

?

该插件支持各种主流的图表，比如饼图，柱图，线图。支持一些类似amchart的效果，比如动态缩进，动态加载，鼠标悬停提示，提示框等，支持json数据，支持jquery，支持ajax加载。

?

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

?

具体使用不多说了很简单的，主要说些小细节。

?

封装的js调用方法。

(function($){$.fn.extend({columnChart : function(option){var defaultOption = {url:'',moduleName:''};$.extend(defaultOption,option);var chartOptions = {chart: {renderTo: $(this).attr('id'),defaultSeriesType: 'column'},title: {text: ''},xAxis: {categories:[]},yAxis: {allowDecimals: false,min: 0,title: {text: ''}},legend: {align: 'right',x: -100,verticalAlign: 'top',y: 20,floating: true,backgroundColor: '#FFFFFF',borderColor: '#CCCCCC',borderWidth: 1,shadow: true},tooltip: {formatter: function() {return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ defaultOption.moduleName+'总数量: '+ this.point.stackTotal;}},plotOptions: {column: {stacking: 'normal'}},    series: []};$.get(defaultOption.url, function(data) {var moduleName='';if(defaultOption.moduleName != ''){moduleName = defaultOption.moduleName;}else{moduleName = data.moduleName;}chartOptions.title.text = moduleName+'柱状图';chartOptions.yAxis.title.text = moduleName;chartOptions.xAxis.categories = data.categories;chartOptions.series = data.series;        new Highcharts.Chart(chartOptions);});}})$.fn.extend({pieChart : function(option){var defaultOption = {url:"",moduleName:""};$.extend(defaultOption, option);var chartOptions = {chart: {    renderTo: $(this).attr('id'),        plotBackgroundColor: null,        plotBorderWidth: 2,        plotShadow: true    },    title: {        text: defaultOption.moduleName+'饼状图'    },    tooltip: {        formatter: function() {    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';        }    },    plotOptions: {        pie: {            allowPointSelect: true,            cursor: 'pointer',            dataLabels: {            enabled: true,                formatter: function() {                if(this.y>0)    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';                }             },            showInLegend: true,    point: {        events : {         click : function(){//绑定click事件          alert("11111111111");         }        }    }         }      },      series: [{      type: 'pie',      name: 'Browser share',          data: []      }]};$.get(defaultOption.url, function(data){ chartOptions.series[0].data=data; new Highcharts.Chart(chartOptions);    });                        }});})(jQuery)

?

后台很简单，用一个javabean组装数据拼装成一个json对象抛出即可。黑色背景色代码表示为饼图添加一个点击的事件，允许做些例外的操作，比如显示详情，或者切换页面等。

?

?

另外highchart支持到处图片或者pdf文件，需要导入几个lib包，最主要的是batik，该包由于升级到1.7，分散成20多个小的lib包，后来用了1.6的，加载几个其他必须的，一共3个lib包。

?

中文乱码问题，通过filter设置编码即可解决。

?

?

?