引用:highChart控件不错，挺漂亮

 

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

 

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

 

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

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

 

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

(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,   
                     <SPAN style="BACKGROUND-COLOR: #888888">   point: {   
                            events : {   
                             click : function(){//绑定click事件   
                              alert("11111111111");   
                             }   
                            }   
                        }</SPAN>   
                     }   
                  },   
                  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设置编码即可解决。


http://highcharts.codeplex.com/                 ---highcharts.net官方网站