Jqplot的应用

        在自己做一个MVC的小项目时,需要用图表来显示统计信息,看了很多JS图表,有HighCharts、JqPlot、JsChart,其中HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,在这用了JqPlot(个人和商业都免费),先学习下。

        关于JqPlot的下载可以去:www.jqplot.com/

       关于JqPlot的详细中文配置参考:http://blog.csdn.net/gaoyusi4964238/article/details/4378459

       下载下来后,所有文件如下图:

       下面开始制作一个柱状图:

       1.引用JS,Jquery必须引用        

<link href="@Url.Content("~/Content/Jqplot/jquery.jqplot.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/Jqplot/jquery.jqplot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqplot/jqplot.barRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqplot/jqplot.categoryAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqplot/jqplot.pointLabels.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Jqplot/jqplot.pieRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JS/UserConsumeDay.js")" type="text/javascript"></script>
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/Jqplot/excanvas.min.js")"></script><![endif]-->

          说明:最后一个引用是为了使用IE7/8,

       2.在HTML中敲入代码         

<div id="chart1" style="width: 600px; height: 250px;float:left;">
</div>


       3.编写JS代码

         

 $.ajax({
                type: "GET", //提交的类型
                dataType: "json",
                url: "/UserConsumeDay/IndexView/", //提交地址
                data: "id=" + userId, //参数
                success: function (msg) {
                    var dataValue = new Array(); //数据
                    var ticks = new Array(); //横坐标值
                    $(msg).each(function (index, value) {
                        dataValue.push(msg[index].Consume);
                        ticks.push(msg[index].YearMonth);
                    });
                    $("#chart1").html("");
                    var plot1 = $.jqplot('chart1', [dataValue], {
                        animate: !$.jqplot.use_excanvas, //是否动画显示
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer, // 利用渲染器(BarRenderer)渲染现有图表
                            pointLabels: { show: true }
                        },
                        title: $("#User").find("option:selected").text() + '--月度消费统计表( Last 12 Monthes)', //标题
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer, // 设置横(纵)轴上数据加载的渲染器
                                ticks: ticks//设置横(纵)坐标的刻度上的值,可为该ticks数组中的值
                            },
                            yaxis: {
                                pad: 1.05, // 一个相乘因子
                                tickOptions: { formatString: '$%d'}// 设置坐标轴上刻度值显示格式
                            }
                        }
                    });
                }
            });


          在这我用了Jquery的Ajax获取数据(msg为json数据),并将其转化为横坐标和纵坐标的数组。

       4.效果图

         

       5.编码过程中遇到的问题         

 select sum(u.ConsumeMoney) as totalMoney, convert(nvarchar(7), u.ConsumeDay,120) as monthConsume 
 from T_Consume u where  DATEDIFF(MONTH,u.ConsumeDay,GETDATE())<12 
 group by convert(nvarchar(7), u.ConsumeDay,120)

          上面的SQL语句是为了实现按月统计数据,我的架构是Sping+NHibernate+MVC,为了实现这个统计用了好多种方法,有Linq,HQL语言都没有实现,主要问题是没有办法把日期截取前七位,也就是“年月”,最后用了NHibernate的存储过程,但是这样一来,数据库移植就不好办了,哪位高手如果知道上述SQL语句转Linq的方法请告知。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值