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 = 0; 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 = 0; i <= 100; 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; //从0-100匹配分数 for (int i = 0; i <= 100; 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; //从0-100匹配分数 for (int i = 0; i <= 100; 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; //从0-100匹配分数 for (int i = 0; i <= 100; 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.csdn.net/chenssy/article/details/9865999
http://www.360doc.com/content/12/0727/09/1007797_226714525.shtml
FusionCharts 学习总结,布布扣,bubuko.com
原文：http://www.cnblogs.com/yyx3254/p/3714535.html