FusionCharts 学习总结

　　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