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的~~~~
都是测试库，数据不太准确，绘制的图表看的不是很美观。。。
