上一篇已经介绍了一款免费的JS图表插件，这一篇再介绍另一款图表插件，同样是免费的，同样是基于JS的，使用依然很简单。该插件的官方网站，貌似也是收费的，我们可以下载对应的免费版FusionCharts free。FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，使用FusionCharts ，您不必安装任何在您的服务器上。所有您需要做的只是复制粘贴的SWF文件（核心文件FusionCharts ）到您的服务器，然后添加XML格式的数据源，其他任何复杂的操作都不用。
现在官方网站上提供的demo，支持XML和JSON两种格式的数据源，但是从FusionCharts free下载的免费版的只能使用XML作为数据源，还有就是收费版的flash效果比免费版的好，其他的好像没什么区别，免费版的提供的功能已经足够了。
下载之后，我们的文档结构图如下：
只需要将JSClass文件夹中的FusionCharts.js文件以及Charts文件夹中的*.swf文件添加到项目中，因为FusionCharts是一个Flash的图表组件，需要SWF文件来运行，所以这个.js文件和.swf文件是必不可少的，切记。
下面通过代码实现一个线形图（有两条线构成）：
后台返回的XML数据：
/// <summary>
/// 加载指定条数的用户登录信息
/// </summary>
/// <param name="count"></param>
private void LoginInfoListXML(int count)
{
IList<dynamic> sysLoginLogList = sysLoginLogBLL.GetSysLoginLogList(count); IList<dynamic> sysLoginLogListByUserId = sysLoginLogBLL.GetSysLoginLogListByUserId(count); string jsonStr = "<graph caption='产品配置器使用统计' subCaption='' baseFontSize='12' baseFontColor='8E5C15' numVDivLines='30' numdivlines='4' showValues='0' anchorRadius='3' anchorBgAlpha='20' anchorSides='10' rotateNames='1' lineThickness='2' divLineAlpha='40' showAlternateHGridColor='1' ";
jsonStr += " alternateVGridAlpha='30' shadowAlpha='40' vDivlinecolor='8E5C15' limitsDecimalPrecision='0' divLineDecimalPrecision='0' decimalPrecision='0' >"; string category = "<categories>"; string dataset = ""; #region 每天访问人数
dataset += "<dataset renderAs='Line' seriesName='使用人数' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>";
if (sysLoginLogList != null)
{
DateTime dt = DateTime.Now;
dt = dt.AddDays(-31);
for (int i = 0; i < 30; i++)
{
dt = dt.AddDays(1);
bool flag = false;
foreach (var item in sysLoginLogList)
{
if (dt.ToString("yyyy/MM/dd") == item.pvdata)
{
flag = true;
dataset += "<set value='" + item.pvcount + "'/>";
category += "<category name='" + item.pvdata + "'/>";
}
} if (!flag)
{
dataset += "<set value='" + 0 + "'/>";
category += "<category name='" + dt.ToString("yyyy/MM/dd") + "'/>";
}
}
}
category += "</categories>"; dataset += "</dataset>";
#endregion #region 每天的访问人次
dataset += "<dataset renderAs='Line' seriesName='使用人次' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>";
if (sysLoginLogListByUserId != null)
{
DateTime dt = DateTime.Now;
dt = dt.AddDays(-31);
for (int i = 0; i < 30; i++)
{
dt = dt.AddDays(1);
bool flag = false;
foreach (var item in sysLoginLogListByUserId)
{
if (dt.ToString("yyyy/MM/dd") == item.pvdata)
{
flag = true;
dataset += "<set value='" + item.pvcount + "'/>";
}
} if (!flag)
{
dataset += "<set value='" + 0 + "'/>";
}
}
} dataset += "</dataset>"; ///拼接Categories
jsonStr += category;
///拼接dataset
jsonStr += dataset;
jsonStr += "</graph>"; #endregion strResponse = jsonStr;
}
前台页面接收XML数据，图表展示：
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "/Chart/LoadingByCount",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(errorThrown); },
success: function (result) {
var array = result.StrResponse;
var myChart = new FusionCharts(strSite + "Charts/FCF_MSLine.swf", "ChartId", "1000", "320", "0", "0");
//setDataXML("<xml></xml>");
//setDataURL("JsonData/data.xml");
myChart.setDataXML(array);
// myChart.addParam("wmode", "Opaque");
myChart.render("fsfcontainer");
}
});
});
前台页面中只需要将返回的XML数据作为数据源，其他的图表属性可以再详细的去网上查找资料。
FusionCharts的重要熟悉：setDataXML（为FusionCharts指定数据源，参数是XML格式的字符串）、setDataURL（为FusionCharts指定数据源，参数是真实的.XML的文件路径）、render（图表渲染）。
下面通过代码实现一个柱状图：
后台返回的XML数据：
/// <summary>
/// 加载指定条数的下载记录
/// </summary>
private void DownloadListXML(int count)
{
#region 下载记录
//int count = 30;
IList<dynamic> downloadList = sysDownloadLogBLL.GetDownloadList(count);
string xmlStr = "<graph caption='产品配置器下载统计' xAxisName='' yAxisName='' baseFontSize='12' baseFontColor='8E5C15' rotateNames='1' decimalPrecision='0' formatNumberScale='0' >"; string[] strColor = new string[] { "AFD8F8", "F6BD0F", "8BBA00", "FF8E46", "008E8E", "D64646", "8E468E", "588526", "B3AA00", "008ED6", "9D080D", "A186BE", "#9422FB", "#2BFB22", "#E8FB22", "#6C22FB", "#22A9FB",
"#B422FB","#FB8B22","#9C47E0","#513269","#431B61","#8E657F","#BA1B50","#87C04F","#8A791A","#2BC3CA","#2B46CA","#D3B4E0","#FBBDF3"}; if (downloadList != null)
{
DateTime dt = DateTime.Now;
dt = dt.AddDays(-31);
for (int i = 0; i < 30; i++)
{
dt = dt.AddDays(1);
bool flag = false;
foreach (var item in downloadList)
{
if (dt.ToString("yyyy/MM/dd") == item.pvdata)
{
flag = true;
xmlStr += "<set name='" + item.pvdata + "' value='" + item.pvcount + "' color='" + strColor[i] + "' />";
}
} if (!flag)
{
xmlStr += "<set name='" + dt.ToString("yyyy/MM/dd") + "' value='" + 0 + "' color='" + strColor[i] + "' />";
}
}
} xmlStr += "</graph>";
#endregion strResponse = xmlStr;
}
前台页面接收XML数据，图表展示：
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "/Chart/LoadingByDownload",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(errorThrown); },
success: function (result) {
var array = result.StrResponse;
///下载记录chart
var downloadChart = new FusionCharts(strSite + "Charts/FCF_Column3D.swf", "ChartId2", "1000", "320", "0", "0");
downloadChart.setDataXML(array);
downloadChart.render("downloadcontainer");
}
});
});
线形图和柱状图的区别就是在后台拼接XML字符串的时候，XML中的元素构成不同，以及在前台页面中调用的 .swf 文件不同，线形图是FCF_MSLine.swf，而柱状图是FCF_Column3D.swf，其他的也就没什么不同了。
上传一张我们项目中的实际效果图吧，感觉还不错吧，感觉动手尝试一下把，很easy的~~~~
都是测试库，数据不太准确，绘制的图表看的不是很美观。。。