JSCharts

　　JsCharts是一款轻量级的，基于js的图形报表工具，提供了线形图，柱状图，饼图，使用简单，相对其他的图表如FusionCharts来讲功能可能不是特别强大，但是对于一些要求不高的应用来讲已经够用了。官方网站 提供了很多demo，它本身是收费的，但也提供了免费版本，我们只需要用它的免费版本就OK了。

　　下载之后，我们的文档结构图如下：

　　

　　 文件中包含的有示例，源文件，帮助文档等文件，我们只需要将sources文件中的jscharts.js文件copy一下放到我们的项目中，在具体的页面中添加这个js的引用即可。       　　    <script src="Scripts/charts/jscharts.js" type="text/javascript"></script>，此外页面中还得有一个容器来承载JsCharts，也就是图表的显示位置，如我们下面代码中的chartcontainer，在页面中要有这样的一个容器<div id="chartcontainer" align="center"></div>，而且id必须是唯一的。

　　在项目中我们是通过一般处理程序获取数据，然后将返回的数据经过处理后作为数据源赋给jschats。

　　JS代码：

  $(function () {
                             $.ajax({
                                 type: "GET",
                                 dataType: "html",
                                 url: "Charts_Ajax.ashx?oper=pvcount",
                                 error: function (XmlHttpRequest, textStatus, errorThrown) { },
                                 success: function (result) {
                                     var myData = [];
                                     var element;

                                     if (result != null) {
                                         result = eval(result);

                                         for (var i = 0; i < result.length; i++) {
                                             element = new Array();
                                             element.push(result[i].pvdata);
                                             element.push(result[i].pvcount * 1);
                                             myData.push(element);
                                         }

                                         var myChart = new JSChart('chartcontainer', 'line');
                                         myChart.setDataArray(myData);

                                         myChart.setTitle('产品配置器访问量');
                                         myChart.setTitleColor('#8E8E8E');
                                         myChart.setTitleFontSize(11);
                                         //设置X轴的显示名称
                                         myChart.setAxisNameX('');
                                         //设置Y轴的显示名称
                                         myChart.setAxisNameY('');
                                         myChart.setAxisColor('#8420CA');
                                         myChart.setAxisValuesColor('#949494');
                                         myChart.setAxisPaddingLeft(100);
                                         myChart.setAxisPaddingRight(120);
                                         myChart.setAxisPaddingTop(50);
                                         myChart.setAxisPaddingBottom(40);
                                         ///2.000  小数位数
                                         //myChart.setAxisValuesDecimals(3);

                                         ///设置x轴上显示的值的个数，此值会自动调整，对饼图无效
                                         myChart.setAxisValuesNumberX(15);

                                         ///设置y轴上显示的值的个数，此值会自动调整，对饼图无效
                                         //myChart.setAxisValuesNumberY(10);

                                         ///是否显示x轴上的刻度值
                                         myChart.setShowXValues(false);
                                         myChart.setGridColor('#C5A2DE');
                                         myChart.setLineColor('#BBBBBB');

                                         ///设置线条的宽度
                                         myChart.setLineWidth(2);
                                         myChart.setFlagColor('#9D12FD');
                                         myChart.setFlagRadius(4);
                                         //myChart.setGraphExtend(true);   

                                         for (var i = 0; i < result.length; i++) {
                                             myChart.setTooltip([result[i].pvdata, result[i].pvcount]);
                                         }

                                         ///在x轴上添加标签，其参数是两个值构成的一个数组，第一个参数为标签在x轴上的位置，第二个值为标签显示的内容。
                                         //myChart.setLabelX([1997, '1997']);

                                         myChart.setSize(1200, 400);
                                         //myChart.setBackgroundImage('/Images/chart_bg.jpg');
                                         myChart.draw();

                                     }
                                 }
                             });
                         });

　　Charts_Ajax.ashx代码:

  /// <summary>
     /// 登录次数   jschart
     /// </summary>
     private void LoginInfoList()
     {
         IList<dynamic> sysLoginLogList = sysLoginLogBLL.GetSysLoginLogList(searchCount);

         string jsonStr = "";

         jsonStr += "[";
         if (sysLoginLogList != null)
         {
             DateTime dt = DateTime.Now;
             dt = dt.AddDays(-16);
             for (int i = 0; i < 15; i++)
             {
                 dt = dt.AddDays(1);
                 bool flag = false;
                 foreach (var item in sysLoginLogList)
                 {
                     if (dt.ToString("yyyy/MM/dd") == item.pvdata)
                     {
                         flag = true;
                         jsonStr += "{\"pvcount\":\"" + item.pvcount + "\",\"pvdata\":\"" + item.pvdata + "\"},";
                     }
                 }

                 if (!flag)
                 {
                     jsonStr += "{\"pvcount\":\"" + 0 + "\",\"pvdata\":\"" + dt.ToString("yyyy/MM/dd") + "\"},";
                 }
             }

             jsonStr = jsonStr.ToString().Substring(0, jsonStr.ToString().Length - 1);
         }

         jsonStr += "]";

         //JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();

         //string json = jsonSerializer.Serialize(sysLoginLogList);

         strResponse = jsonStr;
     }

　　

　　一般处理程序只是将查询到的数据以json格式的字符串返回，在前台的页面中需要对这个返回值处理，由于JsChart 的数据格式是一个二维数组，我们会看到examples中所有的示例的数据格式也都是二维数组，如var myData = new Array(['2005', 2], ['2006', 1], ['2007', 3], ['2008', 6]);，所以需要将返回的json字符串变成一个二维数组，否则你一点会遇到这样的一个错误：

JSChart:Input data in wrong format for selected chart type

这就是因为数据格式导致的。也许你会这样做：声明一个数组，
var data = [];
然后data.push(str);
这样做是不对的，因为你必须保证你push进去的是一个数组，因为我们要构造的是一个二维数组，不是一个一维的字符串数组。

　　下图是我们的实际效果图，你也可以根据给出的方法快速的绘制一个图表，很easy的~~~~

　　 

　　都是测试库，数据不太准确，绘制的图表看的不是很美观。。。