FusionCharts学习笔记

http://hi.baidu.com/touyacathy/blog/item/d47cc5fa89bf049958ee9046.html

1 使用JS方式调用,为了以后的可扩展性,以及跨浏览器兼容性

2 可以载入logo,可以设定各种位置,以及logo所占的范围,还有透明度等,例子如下:

效果图:

3 Label有多种可选格式:

Modes for data labels

The data labels can be displayed on the charts in the following ways:

Wrap mode
Rotated and slanted mode
Staggered mode with customizable staggered lines
Every n-th label

其中n-th label,就是用来解决x轴的标签多长,不能每个都显示的问题.可以控制flash每隔多少个label就显示一下标签.

例子上面的图已经说明问题了,每隔6天显示一次日期,只需要设定<chart labelStep='6'>

4 Number可以Formatting,可以指定是否需要保留小数,是否用逗号分隔等等

5 如果数据差异很巨大,可以显示不同单位,例如可以由flash来自动转换单位,在一个图标中,显示秒/分/时/天/周/月,也可以显示K/M/G/T…

不过在中国,还是下面这个例子更符合国情:

6 可以指定自己的About链接,将”About FusionCharts”变为”关于情报通”,然后链接是情报通的关于页面

7 每个swf的<set> element是很重要的,表明显示的信息有多少个参数可以设定,例如里面有link这个标签,可以用来指定url,并且有各种语法,有”n-url”,”j-function-param1,param2”

还有”F-idFrame-url”等等,分别是新窗口打开链接,调用js函数并传递参数,在iFrame中打开

8 导出image/PDF效果:
分为server-side和client-side两种模式,server-side需要把原始BMP图片传回服务器,由服务器上的GD模块(当然程序是FusionCharts自带的)来转化为PNG/JPG/PDF然后输出给客户端,这样对服务器来说有压力,好处就是图片可以保留在服务器上,后期可以处理(例如邮件给客户,而不是直接下载)
一般还是应该选择client-side模式,因为这样对服务器没有压力,本来嘛,就是截图而已,何必传数据回服务器呢?
不过client-side模式有个问题,那就是FusionCharts工具是在Flash8下实现的,而Flash8不带stream输入输出功能(文档这么说,我没有验证),所以需要用Flash10来实现处理图片流数据,所以就需要额外多加一个div,看起来像个按钮,导出之后,要点一次该按钮,才能保存图片.按钮的位置当然是可以定制的,随便放.

导出时的中文菜单怎么定制?例子:
<chart exportEnabled='1' exportAtClient='1' exportDialogMessage='正在导出,请稍候...' exportFormats='JPEG=导出为JPG图片|PNG=导出为PNG图片|PDF=导出为PDF文件'>

Flash10的导出按钮中文化及定制是通过js完成的:
<div );
</script>

对了,最最重要的,如果要使用client-side导出,别忘了在用js调用FusionCharts时,设定最后一个参数为1!!
<div );
</script>

9 编码问题,如果是用setDataURL的方式,则需要使用utf8有签名的文本,所谓有签名,其实就是开头有几个特殊字符而已,在PHP中的实现为:

header ( 'Content-type: text/xml' );
echo pack ( "C3" , 0xef, 0xbb, 0xbf );

// Now write your XML data to output stream

当然,你用gbk编码的xml文件也可以,看你自己的站点具体是什么编码,怎么使用方便了.

如果用setDataXML的方式,似乎没什么限制,及时整个html是utf8无签名的,也没有出现乱码,挺好.

10 setDataurl.只能接收一个参数

用escape(url)解决问题