教你开发一款极为简单实用的jQuery图表插件(1)

这里介绍一款简单实用的图表插件，该图表插件是基于jQuery和jQuery的插件 gchart很容易实现的，而gchart插件是封装了Google的图表api 。

一 柱状图

(1) 竖状单行条形直方图效果图：

以上数据取自某个网站六个月份的用户注册量 。从以上数据可以看出，一二月份注册用户数为0，图表能够清晰对比每个月份用户注册量的变化。

//月度报表  
        function MonthReport() {  
            $.ajax({  
                url: "/Home/About",  
                success: function (data) {  
                    var json = eval(data);  
                    var opt = {  
                        data: json,  
                        axis_labels: ["一月", "二月", "三月", "四月", "五月", "六月"],  
                        legend: ["serie1", "serie2", "serie3", "serie4", "serie5", "serie6"],  
                        title: "情缘图表",  
                        size: "400x200" 
                    };  
                    var api = new jGCharts.Api();  
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myDIV");  
                }  
            });  
        }  

(2) 竖状多行条形直方图效果图：

以上数据和第一种情况差不多，这是这里是做的季度统计，这里做了第一季度和第二季度的相关数据统计。显示结果如图

//季度报表  
        function QuarterReport() {  
            $.ajax({  
                url: "/Home/GetTotalCount",  
                success: function (data) {  
                    var json = eval(data);  
                    var opt = {  
                        data: json,  
                        axis_labels: ["一季度", "二季度"],  
                        legend: ["serie1", "serie2", "serie3"],  
                        title: "情缘图表",  
                        size: "400x200" 
                    };  
                    var api = new jGCharts.Api();  
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarter");  
                }  
            });  
        }  

(3) 横条多行条形直方图效果图：

这种情况是上面一种情况的变相显示，只不过横纵坐标修改了。

//季度报表  
        function QuarterReportBhg() {  
            $.ajax({  
                url: "/Home/GetTotalCount",  
                success: function (data) {  
                    var json = eval(data);  
                    var opt = {  
                        data: json,  
                        axis_labels: ["一季度", "二季度"],  
                        legend: ["serie1", "serie2", "serie3"],  
                        title: "情缘图表",  
                        size: "400x200",  
                        type: "bhg" 
                    };  
                    var api = new jGCharts.Api();  
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarterbhg");  
                }  
            });  
        }  

二 堆栈图

堆栈图多用于显示数据变化程度，此处显示了各科分数的情况，似乎不是太直观。但是这里能够显示此种效果就够了

//分数统计  
        function ScoreReport(){  
            $.ajax({  
                url: "/Home/GetScore",  
                success: function (data) {  
                    var json = eval(data);  
                    var opt = {  
                        data: json,  
                        axis_labels: ["贺臣", "情缘", "木木"],  
                        legend: ["语文", "数学", "英语","综合"],  
                        title: "情缘图表",  
                        size: "400x200",  
                        type: "bhs" 
                    };  
                    var api = new jGCharts.Api();  
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myScoreReport");  
                }  
            });  
        }  

三 折线图

折线图很适合地域分布，温度分布图。

//温度走势图  
        function TemperatureReport(){  
            $.ajax({  
                url: "/Home/GetTemperature",  
                success: function (data) {  
                    var json = eval(data);  
                    var opt = {  
                        data: json,  
                        title: "情缘图表",  
                        axis_labels: ["一月", "二月", "三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],  
                        size: "400x200",  
                        type: "lc",  
                        bar_width:"5",  
                        bar_spacing:"5",  
                        fillarea:true 
                    };  
                    var api = new jGCharts.Api();  
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myTemperature");  
                }  
            });  
        }