JsCharts是一款輕量級(jí)的，基于js的圖形報(bào)表工具，提供了線形圖，柱狀圖，餅圖，使用簡(jiǎn)單，相對(duì)其他的圖表如FusionCharts來(lái)講功能可能不是特別強(qiáng)大，但是對(duì)于一些要求不高的應(yīng)用來(lái)講已經(jīng)夠用了。官方網(wǎng)站 提供了很多demo，它本身是收費(fèi)的，但也提供了免費(fèi)版本，我們只需要用它的免費(fèi)版本就OK了。

　　下載之后，我們的文檔結(jié)構(gòu)圖如下：

　　

　　 文件中包含的有示例，源文件，幫助文檔等文件，我們只需要將sources文件中的jscharts.js文件copy一下放到我們的項(xiàng)目中，在具體的頁(yè)面中添加這個(gè)js的引用即可。 ????? 　　??? <script src="Scripts/charts/jscharts.js" type="text/javascript"></script>，此外頁(yè)面中還得有一個(gè)容器來(lái)承載JsCharts，也就是圖表的顯示位置，如我們下面代碼中的chartcontainer，在頁(yè)面中要有這樣的一個(gè)容器<div id="chartcontainer" align="center"></div>，而且id必須是唯一的。

?

　　在項(xiàng)目中我們是通過(guò)一般處理程序獲取數(shù)據(jù)，然后將返回的數(shù)據(jù)經(jīng)過(guò)處理后作為數(shù)據(jù)源賦給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('產(chǎn)品配置器訪問(wèn)量'); 25 myChart.setTitleColor('#8E8E8E'); 26 myChart.setTitleFontSize(11); 27 //設(shè)置X軸的顯示名稱 28 myChart.setAxisNameX(''); 29 //設(shè)置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 小數(shù)位數(shù) 38 //myChart.setAxisValuesDecimals(3); 39 40 ///設(shè)置x軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整，對(duì)餅圖無(wú)效 41 myChart.setAxisValuesNumberX(15); 42 43 ///設(shè)置y軸上顯示的值的個(gè)數(shù)，此值會(huì)自動(dòng)調(diào)整，對(duì)餅圖無(wú)效 44 //myChart.setAxisValuesNumberY(10); 45 46 ///是否顯示x軸上的刻度值 47 myChart.setShowXValues(false); 48 myChart.setGridColor('#C5A2DE'); 49 myChart.setLineColor('#BBBBBB'); 50 51 ///設(shè)置線條的寬度 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軸上添加標(biāo)簽，其參數(shù)是兩個(gè)值構(gòu)成的一個(gè)數(shù)組，第一個(gè)參數(shù)為標(biāo)簽在x軸上的位置，第二個(gè)值為標(biāo)簽顯示的內(nèi)容。 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 /// 登錄次數(shù) 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

　　

　　一般處理程序只是將查詢到的數(shù)據(jù)以json格式的字符串返回，在前臺(tái)的頁(yè)面中需要對(duì)這個(gè)返回值處理，由于JsChart 的數(shù)據(jù)格式是一個(gè)二維數(shù)組，我們會(huì)看到examples中所有的示例的數(shù)據(jù)格式也都是二維數(shù)組，如var myData = new Array(['2005', 2], ['2006', 1], ['2007', 3], ['2008', 6]);，所以需要將返回的json字符串變成一個(gè)二維數(shù)組，否則你一點(diǎn)會(huì)遇到這樣的一個(gè)錯(cuò)誤：

????? JSChart:Input data in wrong format for selected chart type

這就是因?yàn)閿?shù)據(jù)格式導(dǎo)致的。也許你會(huì)這樣做：聲明一個(gè)數(shù)組，
var data = [];
然后data.push(str);
這樣做是不對(duì)的，因?yàn)?span style="font-size:small;">你必須保證你push進(jìn)去的是一個(gè)數(shù)組，因?yàn)槲覀円獦?gòu)造的是一個(gè)二維數(shù)組，不是一個(gè)一維的字符串?dāng)?shù)組。

?

　　下圖是我們的實(shí)際效果圖，你也可以根據(jù)給出的方法快速的繪制一個(gè)圖表，很easy的~~~~

　　?

?

?　　都是測(cè)試庫(kù)，數(shù)據(jù)不太準(zhǔn)確，繪制的圖表看的不是很美觀。。。

　　

轉(zhuǎn)載于:https://www.cnblogs.com/wishese/p/3344052.html

總結(jié)

以上是生活随笔為你收集整理的JSCharts的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。