教你一款极为简单实用的图表插件

这里介绍一款简单实用的图表插件，该图表插件是基于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");
                }
            });

        } 

 

四  饼图 

    

一般情况下我最细的是饼图，给人的感觉就是很不错。 以上两个图其实就这是类型不同而已

//饼图
        function QuarterPie(){
            $.ajax({
                url: "/Home/GetQuarterPie",
                success: function (data) {
                    var json = eval(data);
                    var opt = {
                        data: json,
                        title: "情缘图表",
                        axis_labels: ["一月", "二月", "三月","四月"],
                        size: "400x200",
                        type: "p"
                    };
                    var api = new jGCharts.Api();
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarterPie");
                }
            });
        }

//3D饼图
        function Quarter3DPie(){
            $.ajax({
                url: "/Home/GetQuarterPie",
                success: function (data) {
                    var json = eval(data);
                    var opt = {
                        data: json,
                        title: "情缘图表",
                        axis_labels: ["一月", "二月", "三月","四月"],
                        size: "400x200",
                        type: "p3"
                    };
                    var api = new jGCharts.Api();
                    jQuery('<img>').attr('src', api.make(opt)).appendTo("#myQuarter3DPie");
                }
            });

        } 

 

 五  代码分析

从上面的代码可以看出，其实使用这个插件制作图表就类型的不同而已。需要修改的是 type 这个值

这里介绍type支持的类型：

 折线图 lc

 点线图 lxy 

 Sparkline 图 ls 

 叠加型水平条形图 bhs

 叠加型垂直条形图 bvs 

 水平条形图 bhg 

 垂直条形图 bvg 

 饼图 p 

 三维饼图 p3 

 维恩图 v   (目前没有看到效果，各位可以尝试)

 散点图 s    (目前没有看到效果，各位可以尝试)

 雷达图 r    (目前没有看到效果，各位可以尝试)

 地图 t       (目前没有看到效果，各位可以尝试)

 仪表 gom   

 

六  插件相关参数说明

data:  一个二维数组，参数类型如下：[[153, 60, 52], [113, 70, 60], [120, 80, 40]] 

size： 图片显示的大小 ( width x height ) 300x200

type： 前面已经说过了 这里不再累述

xis_labels ： 横轴文字

legend ：图例

bar_width : 20    默认 20  条形宽度

        bar_spacing : 1   默认1  条形间距

        colors : ['4b9b41','81419b','41599b']   图例显示颜色

        bg   : 'e0e0e0'    背景颜色

                  bg_trasparency : 50   背景透明度

    bg_offset : '000000'  渐变终结色

    bg_angle  : '45',        默认 90   渐变角度 

    bg_type   : 'gradient' 默认 solid 渐变方式

                  bg_width  : '10'        默认 10  渐变步伐

        chbg        : 'FFFFFF',           图表区颜色

  chbg_offset : '4b9b41'  图表区渐变终结色

  chbg_angle  : '45'     默认90    渐变角度

  chbg_type   : 'gradient'       默认 solid  渐变方式

title       : 'Bar Chart',     图表标题 

  title_color : 'a98147', 

  title_size  : 20   默认10

grid        : true,   默认 false 网格

  grid_x      : 5,    默认 10 X轴网格宽度

  grid_y      : 5,    默认格宽度

  grid_line   : 5,    默认

  grid_blank  : 0   默认度

       fillarea : true    默认图表区

       fillbottom : true 默认下端

       filltop : true  默认充上端

       lines: [[4,2,2],[6,3,3]] 点线图，[线宽,点宽,空白宽]

 

七  代码示例下载 

点击下载， 代码有一部分是使用的的数据库数据，因此运行的时候可能会有问题，这里需要做相应的修改！ 

这里就简单介绍到这里，如果各位有兴趣可以尝试修改其中的效果来看看运行效果 

时间： 2024-09-19 20:39:33

教你一款极为简单实用的图表插件的相关文章

asp.net中一款极为简单实用的图表插件(jquery)_实用技巧

一  柱状图  (1) 竖状单行条形直方图效果图:   以上数据取自某个网站六个月份的用户注册量 .从以上数据可以看出,一二月份注册用户数为0,图表能够清晰对比每个月份用户注册量的变化. 复制代码 代码如下: //月度报表 function MonthReport() { $.ajax({ url: "/Home/About", success: function (data) { var json = eval(data); var opt = { data: json, axis_

一款简单实用的php操作mysql数据库类_php技巧

本文实例讲述了一款简单实用的php操作mysql数据库类.分享给大家供大家参考.具体如下: 复制代码 代码如下: /* 本款数据库连接类,他会自动加载sql防注入功能,过滤一些敏感的sql查询关键词,同时还可以增加判断字段 show table status的性质与show table类 获取数据库所有表名等.*/ @ini_set('mysql.trace_mode','off'); class mysql {  public $dblink;  public $pconnect;  priv

“截”出精彩-简单实用的Lava截图功能

Lava-Lava的截图功能一直是网友们所津津乐道的,不仅操作方便,而且还相当实用,特别是它的高级截屏功能,让你在截图后无须再打开图片处理软件,就可以直接编辑,加框或者标注等. 有了Lava-Lava,我们就可以随时随地的截图发给好友,比如看到网页上的一个美图,或者一个超级长而复杂的网页链接,甚至是视频时候的对方形象或者我的自拍照.而且,在写Word文档的时候,如果我们需要截图的话,可以直接用Lava-Lava的截图复制粘贴到Word文档里面,好省力吧!下面就跟随我一步一步了解lava-lava

25款轻巧实用的SKETCH插件大合集

  Sketch绝对是除了PS和AI之外在Mac 平台上最热门的设计工具,它更新迅速,功能完备,并且非常契合目前对于UI设计的需求,最重要的是,Sketch 小巧灵便不臃肿,还具有相当强大的可拓展性. Sketch 的优秀之处就是从它的可拓展性上延展开的,围绕着它的不仅有大量的设计师,还有一个活跃的开发者社群,许多优秀的免费插件都由此诞生.这些来自开发者社群的优秀插件从各个不同的角度完善.强化了Sketch的功能,让设计项目可以更加快速高效的完成.当然,在下载这些免费插件之前,请先装上Sketc

jquery实现简单实用的弹出层效果代码_jquery

本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D

JavaScript实现非常简单实用的下拉菜单效果_javascript技巧

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

40款非常实用的 jQuery 插件推荐（系列三）

jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色.jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验.这篇文章是40款实用 jQuery插件系列文章最后一篇,希望这些实用的插件能帮助到您.   Elastislide – A Responsive jQuery Carousel Plugin ( 演示 | 下载 )  Elastislide 是一款非常棒的响应式

WEBJX收集分享6款实用jQuery小插件及源码

文章简介:jQuery是一款最流行的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. jQuery是一款最流行的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以

简单实用的网页表单设计:设计用户喜欢的网页表单

文章描述:漫谈表单设计. 跟你所知的相反,布满漂亮的按钮.颜色和字体,再加上一大把jQuery插件的表单并不一定好用.真的,这么做只能(零散地)体现表单可用性的1/3. In this article, we'll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tra