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代码：

 1  $(function () {
 2                             $.ajax({
 3                                 type: "GET",
 4                                 dataType: "html",
 5                                 url: "Charts_Ajax.ashx?oper=pvcount",
 6                                 error: function (XmlHttpRequest, textStatus, errorThrown) { },
 7                                 success: function (result) { 
 8                                     var myData = [];
 9                                     var element;
10 
11                                     if (result != null) {
12                                         result = eval(result);
13 
14                                         for (var i = 0; i < result.length; i++) {
15                                             element = new Array();
16                                             element.push(result[i].pvdata);
17                                             element.push(result[i].pvcount * 1);
18                                             myData.push(element);
19                                         }
20 
21                                         var myChart = new JSChart('chartcontainer', 'line');
22                                         myChart.setDataArray(myData);
23                                   
24                                         myChart.setTitle('产品配置器访问量');
25                                         myChart.setTitleColor('#8E8E8E');
26                                         myChart.setTitleFontSize(11);
27                                         //设置X轴的显示名称
28                                         myChart.setAxisNameX('');
29                                         //设置Y轴的显示名称
30                                         myChart.setAxisNameY('');
31                                         myChart.setAxisColor('#8420CA');
32                                         myChart.setAxisValuesColor('#949494');
33                                         myChart.setAxisPaddingLeft(100);
34                                         myChart.setAxisPaddingRight(120);
35                                         myChart.setAxisPaddingTop(50);
36                                         myChart.setAxisPaddingBottom(40);
37                                         ///2.000  小数位数
38                                         //myChart.setAxisValuesDecimals(3);
39 
40                                         ///设置x轴上显示的值的个数，此值会自动调整，对饼图无效
41                                         myChart.setAxisValuesNumberX(15);
42 
43                                         ///设置y轴上显示的值的个数，此值会自动调整，对饼图无效
44                                         //myChart.setAxisValuesNumberY(10);
45 
46                                         ///是否显示x轴上的刻度值
47                                         myChart.setShowXValues(false);
48                                         myChart.setGridColor('#C5A2DE');
49                                         myChart.setLineColor('#BBBBBB');
50 
51                                         ///设置线条的宽度
52                                         myChart.setLineWidth(2);
53                                         myChart.setFlagColor('#9D12FD');
54                                         myChart.setFlagRadius(4);
55                                         //myChart.setGraphExtend(true);   
56 
57                                         for (var i = 0; i < result.length; i++) {                                           
58                                             myChart.setTooltip([result[i].pvdata, result[i].pvcount]);
59                                         }
60 
61                                         ///在x轴上添加标签，其参数是两个值构成的一个数组，第一个参数为标签在x轴上的位置，第二个值为标签显示的内容。
62                                         //myChart.setLabelX([1997, '1997']);
63 
64                                         myChart.setSize(1200, 400);
65                                         //myChart.setBackgroundImage('/Images/chart_bg.jpg');
66                                         myChart.draw();
67 
68                                     }
69                                 }
70                             });
71                         });

View Code

　　Charts_Ajax.ashx代码:

 1  /// <summary>
 2     /// 登录次数   jschart
 3     /// </summary>
 4     private void LoginInfoList()
 5     {
 6         IList<dynamic> sysLoginLogList = sysLoginLogBLL.GetSysLoginLogList(searchCount);
 7 
 8         string jsonStr = "";
 9 
10         jsonStr += "[";
11         if (sysLoginLogList != null)
12         {
13             DateTime dt = DateTime.Now;
14             dt = dt.AddDays(-16);
15             for (int i = 0; i < 15; i++)
16             {
17                 dt = dt.AddDays(1);
18                 bool flag = false;
19                 foreach (var item in sysLoginLogList)
20                 {
21                     if (dt.ToString("yyyy/MM/dd") == item.pvdata)
22                     {
23                         flag = true;
24                         jsonStr += "{\"pvcount\":\"" + item.pvcount + "\",\"pvdata\":\"" + item.pvdata + "\"},";
25                     }
26                 }
27 
28                 if (!flag)
29                 {
30                     jsonStr += "{\"pvcount\":\"" + 0 + "\",\"pvdata\":\"" + dt.ToString("yyyy/MM/dd") + "\"},";
31                 }
32             }
33 
34             jsonStr = jsonStr.ToString().Substring(0, jsonStr.ToString().Length - 1);
35         }
36 
37         jsonStr += "]";
38 
39         //JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
40 
41         //string json = jsonSerializer.Serialize(sysLoginLogList);
42 
43         strResponse = jsonStr;
44     }

View Code

　　

　　一般处理程序只是将查询到的数据以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的~~~~

　　 

 

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

　　

转载于:https://www.cnblogs.com/wishese/p/3344052.html