FusionCharts Free 使用方法

FusionCharts Free 使用方法

FusionCharts Free目前最新的版本3.0 官方下载下来的文件 虽然不收费,但是每次图表上都有个讨厌的连接,所以可爱的破解帝 早早地放出了破解版本,至于在哪能找到, 大家就Google去吧..里面我们要用到的文件上篇已经介绍了,就是几个.swf 文件和一个js.

上篇介绍了fcf 最基本的创建方式,就是一段简单的js 脚本,和一个xml数据文件.当然你也可以不写那段js脚本,

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
	codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" > 
	<param name="movie" value="/FusionCharts/Column3D.swf" /> 
	<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"> 
	<param name="quality" value="high" /> 
	<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" 
		quality="high" width="600" height="500" name="Column3D"type="application/x-shockwave-flash" 
		pluginspage="http://www.macromedia.com/go/getf lashplayer" /> 
</object> 

 

第一处标红的地就是 flash的数据模板,第二处是 加载的xml文件的地址了.

这种方式有个坏处,就是在有的浏览器打开flash时候有提示 点击激活控件,,不知道大家见过没,所以本人推荐用javascript来创建..

上面只是简单的介绍,下面进入正题:

FCF几个常用的属性介绍

FCF的属性N多,这里我只找几个常用的来介绍下

FCF 中是用1和0来表示Bool值的.1表示true，0表示false

<chart caption='主标题' subcaption='副标题' animation='1' formatNumberScale='0' numberSuffix='元' pieSliceDepth='30' rotateValues='1' > 

… 

</chart> 

 

Caption ，subcaption主标题 副标题

Animation:是否启用动画, Bool类型

numberSuffix : Y轴单位后缀 numberPrefix:前缀.

formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M

rotateValues : 显示的值的形状, 竖的是1(True)横向显示0。

<categories>

<category label='2004' name='2004'/>

。。。

</categories>

设置X 轴的值

<set name = '2003' value='38000' />

Y轴显示的数据值,这里的值必须和category的个数对应,而且顺序也不能错,否则数据会显示错乱(本人觉得这点fcf做的很不智能,至少应该可以用name对应吧.)

<dataset seriesName='Andrew' >

<set name = '2004' value='36412' />

</dataset>

一个Dataset表示一个项,也就是表示一个图表上的一个数据。

实例Demo

网上的一些Demo生成的数据都是比较有规律的,无非就一个组合图或者单系数据显示,这里就跳过简单的,做一个复杂点的数据生成,因为实际中统计的数据一般都不会那么有规律。

数据库表如下:

现在要统计出每人每年的消费情况..数据是没有规律的,有的人在一些年份上没有数据,

我们利用FCF的js 来创建图表, 无非就是要传递一个xml数据,或者一个xml格式的字符串.这里我采用了后台生成的方法.

public string GetCharts() 

{

StringBuilder sb = new StringBuilder();

sb.Append("<chart caption='主标题' subcaption='副标题' palette='0' animation='1' formatNumberScale='1' numberSuffix='元a' pieSliceDepth='30' rotateValues='1' startingAngle='125'>");

sb.Append(DataGeneration.getAccessData());

sb.Append("</chart>");

return FusionCharts.RenderChart("/Charts/MSColumn3D.swf", "", sb.ToString(), "EmpSalesTotal", "700", "500", false, false);

}

在前台页面直接掉调用这个方法输出就可以了。

DataGeneration.getAccessData()

这个就是生成数据的方法了,

    public static string getAccessData()
        {
            StringBuilder SDataSet = new StringBuilder();
            StringBuilder Scategory = new StringBuilder();
            DataTable table = new DataTable();
            List<AccessDat> list = new List<AccessDat>();
            string sql = "select Names,Years,sum(Sales) as Sales from AccessDat group by Years,Names";
            using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=TestDb;User ID=sa;Password=sasasa"))
            {
                conn.Open();
                SqlCommand command = new SqlCommand(sql, conn);
                SqlDataReader reader = command.ExecuteReader();
                AccessDat dat = new AccessDat();
                while (reader.Read())
                {
                    dat = new AccessDat()
                    {
                        Names = reader["Names"].ToString(),
                        Sales = reader["Sales"].ToString(),
                        Years = reader["Years"].ToString()
                    };
                    list.Add(dat);
                }
                reader.Close();
            }
            //Names列表            var nameList = from item in list group item by item.Names;
            //Years列表            var yearList = from item in list orderby item.Years descending group item by item.Years;
            //先创建x轴数据，Years为X轴数据            Scategory.Append("<categories>");
            foreach (var item in yearList)
            {
                Scategory.Append("<category label='" + item.Key + "' name='" +
                        item.Key + "'/>");
            }
            Scategory.Append("</categories>");
            //获取x轴项数            int allCount = yearList.Count();
            foreach (var item in nameList)
            {
                SDataSet.Append("<dataset seriesName='" + item.Key + "' >");
                //根据当前循环到的Names 得到该人每年的Sales,列表                var slaesList = from p in list
                                where p.Names == item.Key
                                orderby p.Years descending
                                group p by p.Years into g
                                select new { g.Key, Sales = g.Select(p => p.Sales).First() };
                //此处注意,为了set的顺序和category顺序对应,我循环的是yearList,而不是slaesList

                //如果没个set的顺序不与category对应循环出的数据是不对滴 

               foreach (var ys in yearList)
                {
                    //判断这个年在该人的列表里是否存在. 

               	if (!(from p in slaesList where p.Key == ys.Key select p).Any(c => c.Key.Equals(ys.Key)))
                    {
                        SDataSet.Append("<set />");
                    }
                    else
                    {
                        string str = slaesList.Single(p => p.Key == ys.Key).Sales;
                        SDataSet.Append("<set name = '" + ys.Key + "' value='" + str + "' />");
                    }
                }
                SDataSet.Append("</dataset>");
            }
            StringBuilder Xmldata = new StringBuilder();
            Xmldata.Append(Scategory.ToString());
            Xmldata.Append(SDataSet.ToString());
            return Xmldata.ToString();
        }

上面代码基本都写了注释,用了一些Lambda 表达式,很是爽. 但本人感觉还应该有更好的写法, 为了使年份和数值对应上,这样做的就是不很灵活了,待我再研究研究,如果有高人请指点一下,..

效果图: