FusionCharts 学习总结

首页 > 代码库 > FusionCharts 学习总结

2024-07-03 10:52:15 226人阅读

　　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=http://www.mamicode.com/‘100‘ color=‘AFD8F8‘ />  ");

　　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 = "http://www.mamicode.com/";    //从后台获取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=http://www.mamicode.com/‘{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=http://www.mamicode.com/‘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=http://www.mamicode.com/‘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=http://www.mamicode.com/‘{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=http://www.mamicode.com/‘{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=http://www.mamicode.com/‘{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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > FusionCharts 学习总结

FusionCharts 学习总结

看完仍有疑问？有类似问题直接问程序猿