FusionCharts和Charts一样都是对数据进行统计并绘制成图标的控件，但FusionCharts带有跨浏览器的flash图表组件解决方案，功能更为强大。、
在这里我将采用Js来加载FusionCharts图形:
第一步：导入FusionCharts.js文件
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
第二步：定义一个DIV，它必须具备一个元素：id
<div id="chartdiv_01" align="center"></div>
第三步：建立一个FusionCharts对象
var myChart = new FusionCharts("para1", "para2", "para3", "para4");
Para1：表示的是SWF文件的地址。
Para2：该图形的ID，这个可以随便命名，但是需要保证它的唯一性。
para3：图形的高度。
Para4：图形的长度。
例如：
var myChart = new FusionCharts("../FusionCharts/Doughnut3D.swf", "myChartId_02", "600", "500");
第四步：设置数据文件
这里有两种方法加载xml数据文件
第一种利用setDataURL：
myChart.setDataURL("Data.xml");
第二种利用setDataXML：
myChart.setDataURL(<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='一月' value='100' color='AFD8F8' />
<set name='二月' value='200' color='F6BD0F' />
<set name='三月' value='300' color='8BBA00' />
<set name='四月' value='120' color='FF8E46' />
<set name='五月' value='220' color='008E8E' />
<set name='六月' value='330' color='D64646' />
<set name='七月' value='210' color='8E468E' />
<set name='八月' value='544' color='588526' />
<set name='九月' value='565' color='B3AA00' />
<set name='十月' value='754' color='008ED6' />
<set name='十一月' value='441' color='9D080D' />
<set name='十二月' value='654' color='A186BE' />
</graph>");
dataXML和dataURL都可以提供数据，只不过dataURL是将数据文件以URL地址的形式，而dataXML则是以XML文本的形式。说的直白点就是dataURL将xml文件的地址告知FCF，而dataXML是将XML数据文件里的内容告知FCF。其中setDataXML()方面的参数是一个完整的XML字符串。
第五步：指定图形渲染的位置。
myChart.render("chartdiv_01");
通过上面五个步骤就是完成js加载FusionCharts图形。如果需要加载多个图形，只需要重复第二步—第五步，但是需要确保DIV和FusionCharts对象的id的唯一性。
<script>
var xmlData = "<%=xmldata %>"; //从后台获取xml数据字符串xmldata
var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "500", "500");
myChart.setDataXML(xmlData); //myChart.setDataURL("Data.xml");
myChart.render("chartDiv");
</script>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
//using InfoSoftGlobal; public partial class pieChart : System.Web.UI.Page
{
StringBuilder xmlDataSource = new StringBuilder();
public string xmldata;
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
getXml();
xmldata = xmlDataSource.ToString();
BindGridview();
}
}
public void getXml()
{
string sql = "select COUNT(*) Num,Sex from Users group by Sex order by Sex desc ";
DataTable dt = DBHelper.GetDataSet(sql);
//添加xml数据
xmlDataSource.AppendFormat("<graph showLegend='1' caption='班级男女比例统计' showValues='0' decimalPrecision='2' formatNumberScale='0'>");
for (int i = ; i < dt.Rows.Count; i++)
{
xmlDataSource.AppendFormat("<set name='{0}' value='{1}' link='pieChart.aspx?sex={0}'/>", dt.Rows[i]["Sex"].ToString(), dt.Rows[i]["Num"].ToString());
}
xmlDataSource.AppendFormat("</graph>");
//this.chartDiv.InnerHtml = FusionCharts.RenderChart("FusionCharts/FCF_Pie3D.swf","", xmlDataSource.ToString(), "chartDiv", "500", "500", false, false);
}
public void BindGridview()
{
string sex = Convert.ToString(Request.QueryString["sex"]);
string sql = "select * from users where Sex='" + sex + "'";
DataTable dt = DBHelper.GetDataSet(sql);
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}
}
这里在构建xml数据字符串时用的是StringBuilder类的AppendFormat方法。
对于多系列图形被用来比较两个或更多的数据集，xml格式如下：
<graph caption='Business Results 2005 v 2006 ' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3 f3f3' bgAlpha='70' showColumnShadow='1 ' divlinecolor='c5c5c5' divLineAlpha='6 0' showAlternateHGridCol
or='1 ' alternateHGridColor='f8f8f8' alternateHGridAlpha='6 0' >
<categories>
<category name='Jan' />
<category name='Feb' />
<category name='Mar' />
<category name='Apr' />
<category name='May' />
<category name='Jun' />
<category name='Jul' />
<category name='Aug' />
<category name='Sep' />
<category name='Oct' />
<category name='Nov' />
<category name='Dec' />
</categories>
<dataset seriesName='2 006' color='c4e3f7' >
<set value='2 7400' />
<set value='2 9800' />
<set value='2 5800' />
<set value='2 6800' />
<set value='2 9600' />
<set value='3 2600' />
<set value='3 1800' />
<set value='3 6700' />
<set value='2 9700' />
<set value='3 1900' />
<set value='3 4800' />
<set value='2 4800' />
</dataset>
<dataset seriesName='2 005' color='Fad35e' >
<set value='1 0000'/>
<set value='1 1500'/>
<set value='1 2500'/>
<set value='1 5000'/>
<set value='1 1000' />
<set value='9 800' />
<set value='1 1800' />
<set value='1 9700' />
<set value='2 1700' />
<set value='2 1900' />
<set value='2 2900' />
<set value='2 0800' />
</dataset>
<trendlines>
<line startValue='2 6000' color='9 1C728' displayValue='Target' showOnTop='1 '/>
</trendlines>
</graph>
我们发现，上面多了一个<categories>元素，它包含很多的子元素，如
1. <category name='Jan' />
每个<category>就表示X 轴上的一个名称。
上面还有两个<dataset>元素，一个用来表示2006 年的数据，一个表示2005 年。每个<set>则
表示图形上的一个数据。
注意<categories>的子元素的数量应该和<dataset>子元素的一致。
如果某个数据点没有数据，则<set />即可，在graph属性加上connectNullData='1'可讲不连续点连接起来。
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text; public partial class lineChart : System.Web.UI.Page
{
StringBuilder xmlDataSource = new StringBuilder();
public string xmldata;
protected void Page_Load(object sender, EventArgs e)
{
getXml();
xmldata = xmlDataSource.ToString();
}
public void getXml()
{
xmlDataSource.AppendFormat("<graph caption='学生语数英成绩统计' connectNullData='1' xAxisName='分数' yAxisName='人数' xAxisMinValue='50' xAxisMaxValue='100' labelStep='10' showValues='0' decimalPrecision='0' formatNumberScale='0'>");
//
xmlDataSource.AppendFormat("<categories >");
for (int i = ; i <= ; i++)
{
xmlDataSource.AppendFormat("<category name='{0}'/>",i.ToString());
}
xmlDataSource.AppendFormat("</categories>");
//添加语文成绩
getChineseXml();
//添加数学成绩
getMathXml();
//添加英语成绩
getEnglishXml();
xmlDataSource.AppendFormat("</graph>");
}
public void getChineseXml()
{
string sqlChinese = "select COUNT(Chinese) Num,Chinese from Users group by Chinese";
DataTable dtChinese = DBHelper.GetDataSet(sqlChinese);
xmlDataSource.AppendFormat("<dataset seriesName='语文' color='c4e3f7'>");
int n = ;
//从0-100匹配分数
for (int i = ; i <= ; i++)
{
if (n >= dtChinese.Rows.Count)
{
break;
}
if (i == Convert.ToInt32(dtChinese.Rows[n]["Chinese"]))
{
xmlDataSource.AppendFormat("<set value='{0}'/>",dtChinese.Rows[n]["Num"].ToString());
n++;
}
else
{
xmlDataSource.AppendFormat("<set />");
}
}
xmlDataSource.AppendFormat("</dataset>");
}
public void getMathXml()
{
string sqlMath = "select COUNT(Math) Num,Math from Users group by Math";
DataTable dtMath = DBHelper.GetDataSet(sqlMath);
xmlDataSource.AppendFormat("<dataset seriesName='数学' color='Fad35e'>");
int n = ;
//从0-100匹配分数
for (int i = ; i <= ; i++)
{
if (n >= dtMath.Rows.Count)
{
break;
}
if (i == Convert.ToInt32(dtMath.Rows[n]["Math"]))
{
xmlDataSource.AppendFormat("<set value='{0}'/>",dtMath.Rows[n]["Num"].ToString());
n++;
}
else
{
xmlDataSource.AppendFormat("<set />");
}
}
xmlDataSource.AppendFormat("</dataset>");
}
public void getEnglishXml()
{
string sqlEnglish = "select COUNT(English) Num,English from Users group by English";
DataTable dtEnglish = DBHelper.GetDataSet(sqlEnglish);
xmlDataSource.AppendFormat("<dataset seriesName='英语' color='91C728'>");
int n = ;
//从0-100匹配分数
for (int i = ; i <= ; i++)
{
if (n >= dtEnglish.Rows.Count)
{
break;
}
if (i == Convert.ToInt32(dtEnglish.Rows[n]["English"]))
{
xmlDataSource.AppendFormat("<set value='{0}'/>",dtEnglish.Rows[n]["Num"].ToString());
n++;
}
else
{
xmlDataSource.AppendFormat("<set />");
}
}
xmlDataSource.AppendFormat("</dataset>");
}
}
参考以下链接：
http://blog.****.net/chenssy/article/details/9865999
http://www.360doc.com/content/12/0727/09/1007797_226714525.shtml