jQuery绘图插件 jqPlot

最新推荐文章于 2024-09-09 15:42:29 发布

原创最新推荐文章于 2024-09-09 15:42:29 发布 · 5.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

C# .net

Jquery

本文介绍了一种利用jQuery插件jqPlot实现数据可视化的方法。通过示例代码展示了如何配置和加载折线图及柱状图，并实现了从指定日期范围内的数据源获取数据的功能。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

官网示例地址：http://www.jqplot.com/tests/

插件下载：https://bitbucket.org/cleonello/jqplot/downloads/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<script type="text/javascript" language="javascript" src="Script/jquery-1.7.1.min.js"></script>
<script src="Script/Graph.js" type="text/javascript"></script>
<link href="css/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="Script/excanvas.min.js" type="text/javascript"></script>
<script src="Script/jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="Script/jqplot.highlighter.min.js"></script>
<script  src="Script/jqplot.cursor.min.js"></script>
<script  type="text/javascript" src="Script/jqplot.barRenderer.min.js"></script>
<script  type="text/javascript" src="Script/jqplot.categoryAxisRenderer.min.js"></script>
<script  type="text/javascript" src="Script/jqplot.pointLabels.min.js"></script>
 <!--日期插件-->
    <link href="Css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="Script/DateSel.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
    $("#search").click(function() {
         var graphdiv = "<div  id=\"daychart\" style=\"width:800px; height:320px; float:left; margin-left:100px; margin-top:30px; \"></div>";
         graphdiv += "<div  id=\"daychart2\" style=\"width:800px; height:320px; float:left; margin-left:100px; margin-top:30px; \"></div>";
         $("#main").html(graphdiv);
        var jsonurl = 'Handler/Graph.ashx?sdate=' + $('#sdate').val() + '&edate=' + $('#edate').val();
        loadLine("每日充值曲线统计图", jsonurl, 'daychart');
        loadBar("每日充值柱状统计图", jsonurl, 'daychart2');
    });

    /*曲线*/
    var loadLine = function(title, jsonurl, chardiv) {
        var dataJson = new Array();
        $.ajax({
            async: false,
            url: jsonurl,
            dataType: "json",
            success: function(data) {
                //构造数组
                for (var i = 0; i < data.length; i++) {
                    var chObj = data[i];
                    for (var j = 0; j < chObj.length; j++) {
                        dataJson.push([chObj[j].dTime, chObj[j].V]);
                    }
                }
            }
        });
        var plot1 = $.jqplot(chardiv, [dataJson], {
            title: title,
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            cursor: {
                show: false
            }
        });
    }  //end1oaddata


    /*柱状*/
    var loadBar = function(title, jsonurl, chardiv) {
        var dataJson = new Array();
        $.ajax({
            async: false,
            url: jsonurl,
            dataType: "json",
            success: function(data) {
                //构造数组
                for (var i = 0; i < data.length; i++) {
                    var chObj = data[i];
                    for (var j = 0; j < chObj.length; j++) {
                        dataJson.push([chObj[j].dTime, chObj[j].V]);
                    }
                }
            }
        });
        $.jqplot.config.enablePlugins = true;
        plot1 = $.jqplot(chardiv, [dataJson], {
            title: title,
            animate: !$.jqplot.use_excanvas,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            },
            highlighter: { show: false }
        });
    }  //end1oadBar

    /***************柱形示例**********/
    var loadBarEg = function() {
        $.jqplot.config.enablePlugins = true;
        var bar = [['a', 2], ['b', 4], ['c', 7], ['d', 9], ['e', 12]];

        plot1 = $.jqplot('daychart', [bar], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            },
            highlighter: { show: false }
        });
    } //end loadBarEg
    var loadBarEg2 = function() {
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];
        plot1 = $.jqplot('daychart', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });
    } //end loadBarEg2
    /**************eg***********/
    });
</script>
<body>
<input id="sdate" name="sdate" type="text" class="t" /><input id="edate" name="edate" type="text" class="t" /><input type="button" id="search" value="search" />
<div id="main"></div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Data.SqlClient;
using System.Text;
using Maticsoft.DBUtility;
using System.Data;

namespace BossInvoice.Handler
{
    /// <summary>
    /// 图表数据
    /// </summary>

    public class Graph : IHttpHandler, IRequiresSessionState 
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string sdate = context.Request.Params["sdate"];
            string edate = context.Request.Params["edate"];
            SqlParameter[] parameters = {
                    new SqlParameter("@sdate", SqlDbType.NVarChar,50),
                    new SqlParameter("@edate", SqlDbType.NVarChar,50)};
            parameters[0].Value = sdate;
            parameters[1].Value = edate;
            StringBuilder sql = new StringBuilder();
            sql.Append("SELECT convert(int,sum([Money])) total,convert(varchar(10),[CreateTime],120) CountDate ");
            sql.Append("  FROM [UserBill] where flag<>0  and convert(varchar(10),[CreateTime],120) >=@sdate and convert(varchar(10),[CreateTime],120) <=@edate ");
            sql.Append(" group by convert(varchar(10),[CreateTime],120)");

            System.Collections.ArrayList arrList = new System.Collections.ArrayList();
            IList<data> dataList = new List<data>();//存储曲线数据

            DataSet ds = DbHelperMSQL.ExecuteDataSet(DbHelperMSQL.GwbnBossConncection, sql.ToString(), parameters);
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                string date = ds.Tables[0].Rows[i]["countdate"].ToString();
                string total = ds.Tables[0].Rows[i]["total"].ToString();
                dataList.Add(new data(date, Convert.ToInt32(total)));
            }

            arrList.Add(dataList);
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            System.Web.Script.Serialization.JavaScriptSerializer jscriptSeri = new System.Web.Script.Serialization.JavaScriptSerializer();
            jscriptSeri.Serialize(arrList, sb);
            context.Response.Write(sb.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    class data
    {
        public data(string _dTime, int _v)
        {
            this.dTime = _dTime;
            this.V = _v;
        }
        public string dTime { set; get; }
        public int V { set; get; }
    }
}

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

标签

#jquery #parameters #function #stylesheet #plot