FusionCharts学习笔记
http://hi.baidu.com/touyacathy/blog/item/d47cc5fa89bf049958ee9046.html
1 使用JS方式调用,为了以后的可扩展性,以及跨浏览器兼容性
2 可以载入logo,可以设定各种位置,以及logo所占的范围,还有透明度等,例子如下:
<chart logoURL='/img/logo.gif' logoPosition='CC' logoAlpha='50' logoScale='150'>
效果图:
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…
不过在中国,还是下面这个例子更符合国情:
<chart numberScaleValue='10000,10000,10000' numberScaleUnit='万,亿,兆' >
6 可以指定自己的About链接,将”About FusionCharts”变为”关于情报通”,然后链接是情报通的关于页面
<chart showAboutMenuItem='1' aboutMenuItemLabel='关于情报通' aboutMenuItemLink='n-/site_about.html'>
7 每个swf的<set> element是很重要的,表明显示的信息有多少个参数可以设定,例如里面有link这个标签,可以用来指定url,并且有各种语法,有”n-url”,”j-function-param1,param
还有”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 id="fcexpDiv" align="center">XXXXXXXXXXXXXXXXXXXXXX</div>
<script type="text/javascript">
//Render the export component in this
//Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
//attribute of chart XML.
var myExportComponent = new FusionChartsExportObject("fcExporter1", "/FusionCharts/Charts/FCExporter.swf");
//Customize the component properties
//Width and height
myExportComponent.componentAttributes.width = '400';
myExportComponent.componentAttributes.height = '60';
//Background color
myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
myExportComponent.componentAttributes.borderThickness = '2';
myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
myExportComponent.componentAttributes.fontFace = 'Arial';
myExportComponent.componentAttributes.fontColor = '0372AB';
myExportComponent.componentAttributes.fontSize = '12';
//Message - caption of export component
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = '在报表上右键导出,然后点此按钮保存图片';
//Button visual configuration
myExportComponent.componentAttributes.btnWidth = '200';
myExportComponent.componentAttributes.btnHeight= '25';
myExportComponent.componentAttributes.btnColor = 'E1f5ff';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '15';
//Title of button
myExportComponent.componentAttributes.btnsavetitle = '图片已生成,点击保存'
myExportComponent.componentAttributes.btndisabledtitle = '报表上右键可以导出图片';
//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");
</script>
对了,最最重要的,如果要使用client-side导出,别忘了在用js调用FusionCharts时,设定最后一个参数为1!!
<div id="chartdiv" align="center">The chart will appear within this DIV.</div>
<script type="text/javascript">
var myChart = new FusionCharts("/FusionCharts/Charts/Column2D.swf", "myChartId", "900", "300", "0", "1");
//就是上面这最后一个参数,必须是1，才能和另外那个控制按钮交互
myChart.setDataURL("/xml/fc_cn.xml");
myChart.render("chartdiv");
</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)解决问题