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

總結

以上是生活随笔為你收集整理的JSCharts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。