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的方法请告知。