至此声明:若需要商用,请大家支持正版!
FusionCharts使用心得
一、fusioncharts官网:http://www.fusioncharts.com/
三、版本3.2.1开始已经将示例从文档包中分离出来,提供了更多更具体的例子
一、主要属性
(fusioncharts文件档中有,主要是列出中文,看起来更直观):
- Functional Attributes 功能属性,动画效果,显示XY坐标值,显示阴影等等
- Title and Axis Names 标题及坐标名称
- Chart Cosmetics 图形样式
- Divisional Lines/Grids Y轴线的样式或者表格
- Tool-tip 提示信息
- Paddings-Margings 边框距离
看一看Column3D的绚丽图片:
1.Functional Attributes (功能属性)
- 右键菜单栏属性:showAboutMenuItem、aboutMenuItemLabel、aboutMenuLink
- label 指的是x轴的label,相关的是showLabels、labelDisplay、rotateLabels、slantLabels、labelStep、staggerLines(错位x行显示)。labelDisplay中的五个取值AUTO(V3.2.1新增)、WRAP、STAGGER、ROTATE or NONE 已经包含了slantLabels及rotateLabels,所以如果要向前兼容的话不要取labelDisplay中的特殊值。
- values指的是显示在柱子上的值,相关属性:showValues、rotateValues、placeValuesInsideshow
- Y轴标题属性:rotateYAxisName、yAxisNameWidth、
- Y轴值相关属性:showYAxisValues、showLimits、showDivLineValues、yAxisValuesStep
- 自定义Y轴值的相关属性:adjustDiv、yAxisMinValue、xAxisMaxValue、setAdaptiveYMin(注意)
- 列样式:showShadow、maxColWidth、use3DLighting
- 综合样式:defaultAnimation、clickURL
2.Chart Titles and Aixs Names(标题及坐标轴)
3.Chart Cosmetics(图表样式)
- bg背景样式
- canvas画布
- logo图标
- border边框
每一种类型基本上都包括:Color、Alpha
4.Data Plot Cosmetics(数据样式)
showPlotBorder...主要是针对于每一个柱状结构进行边框样式设置
5.Divisional Lines & Grids
Y轴线的样式设置
6.Number Formatting (格式化数字)
7.Font Properties
8.Tool-tip
9.Chart Paddings & Margins
后续这些属性一般情况下不会去用它,只作为平时参考时查看即可,有特殊需求的时候才需要后续的这些属性。
二、其他图形
基本上了解这个图形的所有属性后,后续的其他图形,其属性都基本相同,但有不同的图形都会有自己独立的属性区,或者是<set>标签的属性有所不同,如Pie饼状图:
1.有一个Pie/Doughnut Properties的属性区,其中最重要的几个属性是slicingDistance、pieYScale(Y轴方向的倾斜度)、PieSliceDepth(图形的厚度)
2.而此时<set>标签中的属性isSlice属性,若打开的话则第一次展示图延时进行展开,很有动画效果
三、子标签介绍
1.<set>标签
每一个显示的元素,在Column3D里的元素为具体的每一个柱子
2.<vline>垂直钱
3.<trendLines> <line>水平线
4.<categories>及<category>
分类,应用于同一图中进行多个图形的显示进行的分类,而其中的分类一般只是用于label的显示,具体的数据还是显示在<dataset>中
很是郁闷,遇到了几个暂时不可用属性:
- set标签的link属性,在使用link='JavaScript:alert(3);'时无法正确调用。
- useEllipsesWhenOverflow对于x-axis及data label都无法使用省略号来做区分
四、样式<style>标签
下一步要熟悉的应该是它里面的style样式的应用了,不过说实在,这个style样式确实用得不多,默认的FusionCharts图形的样式都已经设计都得非常好,除非特殊需求,则需要使用style样式来控制。
样式的类型
- Font 字体
- Animation 动画
- Shadow 阴影
- Glow 外发光
- Bevel 斜边
- Blur 模糊
样式对应的对象分为三类
- background和canvas,负责背景的样式定制
- line垂直线及水平线的样式定制vline,trendLine等
- 所有标题文字的模式定制caption, subcaption,xAxisName,yAxisName等等
1.示例
从FusionCharts文档中来:
<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' showBorder='1' imageSave='1' imageSaveURL='http://www.fusioncharts.com/ExportHandlers/PHP/_FCExporter.php'> <set label='Alex' value='25000' /> <set label='Mark' value='35000' /> <set label='David' value='42300' /> <set label='Graham' value='35300' link="JavaScript: alert('hi JS!'); "/> <set label='John' value='31300' /> <styles> <definition> <style name='MyFirstStyle' type='font' size='25' color='FF0000' align='left'></style> </definition> <application> <apply toObject='CAPTION' styles='MyFirstStyle'/> </application> </styles> </chart>
重要的几个概念:
toObject中的取值,从文档中的图形界面的的Chart Object中来,每个图形会定义很多个它自己的Object,一直以来这个都是被我忽略的,现在终于知道它的用处了,也就是说要控制样式,还是可以非常灵活的。
2.综合示例
所有能用的样式都用上了,感觉还是不错的,用得好的话,可以将图形中的数字变得很是漂亮。
<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' showBorder='1' imageSave='1' imageSaveURL='http://www.fusioncharts.com/ExportHandlers/PHP/_FCExporter.php'> <set label='Alex' value='25000' /> <set label='Mark' value='35000' /> <set label='David' value='42300' /> <set label='Graham' value='35300' link="JavaScript: alert('hi JS!'); "/> <set label='John' value='31300' /> <styles> <definition> <style name='MyFirstStyle' type='font' size='25' color='FF0000' align='left' ></style> <style name='CaptionStyle' type='animation' duration='1' start='0' param='_x'></style> <style name='ShadowStyle' type='shadow' distance='6' angle='45'></style> <style name='GlowStyle' type='glow' strength='1' blurX='4'/> <style name='BevelStyle' type='bevel'/> <style name='BlurStyle' type='blur'/> </definition> <application> <apply toObject='CAPTION' styles='CaptionStyle,MyFirstStyle,ShadowStyle,GlowStyle'/> <apply toObject='DataPlot' styles='BevelStyle,BlurStyle'/> </application> </styles> </chart>
3.样式覆盖
<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' showBorder='1' imageSave='1' imageSaveURL='http://www.fusioncharts.com/ExportHandlers/PHP/_FCExporter.php'> <set label='Alex' value='25000' /> <set label='Mark' value='35000' /> <set label='David' value='42300' /> <set label='Graham' value='35300' link="JavaScript: alert('hi JS!'); "/> <set label='John' value='31300' /> <styles> <definition> <style name='MyFirstStyle' type='font' size='25' color='FF0000' align='left'></style> <style name='CaptionStyle' type='font' bgColor='00FF00'></style> </definition> <application> <apply toObject='CAPTION' styles='CaptionStyle,MyFirstStyle'/> </application> </styles> </chart>
两个类型都是font的样式,用于同一个object中caption中,则默认使用第一个CaptionStyle
感觉本文还是太少内容了,但证明了一点是FusionCharts已经设计得非常的紧凑,基本的功能都已经做到,并且样式非常的好看,API文档及示例都做的非常多。同时也希望此文章可以给FusionCharts的初学者提供一个抛砖引玉的作用,让刚开始学习FusionCharts的同学不至于太过晕煊,因为FusionCharts确实是很多属性,初学者一般只是用一下里面煊的例子作作演示就完了,但同时希望初学者也会对属性进行分类,如此,则可以保证在以后的程序生涯中保持对FusionCharts的熟悉,终生授用。