Jqplot的应用

发布时间：2013-12-17 05:38:01来源：阅读（994）

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

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

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

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

       1.引用JS，Jquery必须引用        

[html] view plaincopy
1. <link href="@Url.Content("~/Content/Jqplot/jquery.jqplot.css")" rel="stylesheet" type="text/css" />  
2. <script src="@Url.Content("~/Scripts/Jqplot/jquery.jqplot.min.js")" type="text/javascript">script>  
3. <script src="@Url.Content("~/Scripts/Jqplot/jqplot.barRenderer.min.js")" type="text/javascript">script>  
4. <script src="@Url.Content("~/Scripts/Jqplot/jqplot.categoryAxisRenderer.min.js")" type="text/javascript">script>  
5. <script src="@Url.Content("~/Scripts/Jqplot/jqplot.pointLabels.min.js")" type="text/javascript">script>  
6. <script src="@Url.Content("~/Scripts/Jqplot/jqplot.pieRenderer.min.js")" type="text/javascript">script>  
7. <script src="@Url.Content("~/Scripts/JS/UserConsumeDay.js")" type="text/javascript">script>  
8.     

          说明：最后一个引用是为了使用IE7/8，

       2.在HTML中敲入代码         

[html] view plaincopy
1. <div id="chart1" style="width: 600px; height: 250px;float:left;">  
2. div>  


       3.编写JS代码

         

[javascript] view plaincopy
1. $.ajax({  
2.                type: "GET", //提交的类型  
3.                dataType: "json",  
4.                url: "/UserConsumeDay/IndexView/", //提交地址  
5.                data: "id=" + userId, //参数  
6.                success: function (msg) {  
7.                    var dataValue = new Array(); //数据  
8.                    var ticks = new Array(); //横坐标值  
9.                    $(msg).each(function (index, value) {  
10.                        dataValue.push(msg[index].Consume);  
11.                        ticks.push(msg[index].YearMonth);  
12.                    });  
13.                    $("#chart1").html("");  
14.                    var plot1 = $.jqplot('chart1', [dataValue], {  
15.                        animate: !$.jqplot.use_excanvas, //是否动画显示  
16.                        seriesDefaults: {  
17.                            renderer: $.jqplot.BarRenderer, // 利用渲染器（BarRenderer）渲染现有图表  
18.                            pointLabels: { show: true }  
19.                        },  
20.                        title: $("#User").find("option:selected").text() + '--月度消费统计表( Last 12 Monthes)', //标题  
21.                        axes: {  
22.                            xaxis: {  
23.                                renderer: $.jqplot.CategoryAxisRenderer, // 设置横（纵）轴上数据加载的渲染器  
24.                                ticks: ticks//设置横（纵）坐标的刻度上的值，可为该ticks数组中的值  
25.                            },  
26.                            yaxis: {  
27.                                pad: 1.05, // 一个相乘因子  
28.                                tickOptions: { formatString: '$%d'}// 设置坐标轴上刻度值显示格式  
29.                            }  
30.                        }  
31.                    });  
32.                }  
33.            });  


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

       4.效果图

          

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

[sql] view plaincopy
1. select sum(u.ConsumeMoney) as totalMoney, convert(nvarchar(7), u.ConsumeDay,120) as monthConsume   
2. from T_Consume u where  DATEDIFF(MONTH,u.ConsumeDay,GETDATE())<12   
3. group by convert(nvarchar(7), u.ConsumeDay,120)