fusioncharts学习心得

至此声明：若需要商用，请大家支持正版！

FusionCharts使用心得

一、fusioncharts官网：http://www.fusioncharts.com/

二、学习用直接download，商用请 buy now

三、版本3.2.1开始已经将示例从文档包中分离出来，提供了更多更具体的例子

一、主要属性

（fusioncharts文件档中有，主要是列出中文，看起来更直观）：

 

1. Functional Attributes 功能属性，动画效果，显示XY坐标值，显示阴影等等
2. Title and Axis Names 标题及坐标名称
3. Chart Cosmetics 图形样式
4. Divisional Lines/Grids Y轴线的样式或者表格
5. Tool-tip 提示信息
6. Paddings-Margings 边框距离

看一看Column3D的绚丽图片：

1.Functional Attributes （功能属性）

1. 右键菜单栏属性：showAboutMenuItem、aboutMenuItemLabel、aboutMenuLink
2. label 指的是x轴的label，相关的是showLabels、labelDisplay、rotateLabels、slantLabels、labelStep、staggerLines（错位x行显示）。labelDisplay中的五个取值AUTO（V3.2.1新增）、WRAP、STAGGER、ROTATE or NONE 已经包含了slantLabels及rotateLabels，所以如果要向前兼容的话不要取labelDisplay中的特殊值。
3. values指的是显示在柱子上的值，相关属性：showValues、rotateValues、placeValuesInsideshow
4. Y轴标题属性：rotateYAxisName、yAxisNameWidth、
   
5. Y轴值相关属性：showYAxisValues、showLimits、showDivLineValues、yAxisValuesStep
6. 自定义Y轴值的相关属性：adjustDiv、yAxisMinValue、xAxisMaxValue、setAdaptiveYMin（注意）
7. 列样式：showShadow、maxColWidth、use3DLighting
8. 综合样式：defaultAnimation、clickURL

2.Chart Titles and Aixs Names（标题及坐标轴）

3.Chart Cosmetics（图表样式）

1. bg背景样式
2. canvas画布
3. logo图标
4. 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>中

 

很是郁闷，遇到了几个暂时不可用属性：

1. set标签的link属性，在使用link='JavaScript:alert(3);'时无法正确调用。
2. useEllipsesWhenOverflow对于x-axis及data label都无法使用省略号来做区分

 

 

四、样式<style>标签

        下一步要熟悉的应该是它里面的style样式的应用了，不过说实在，这个style样式确实用得不多，默认的FusionCharts图形的样式都已经设计都得非常好，除非特殊需求，则需要使用style样式来控制。

        样式的类型

1. Font                    字体
   
2. Animation            动画
   
3. Shadow              阴影
   
4. Glow                   外发光
   
5. Bevel                  斜边
   
6. Blur                    模糊

        样式对应的对象分为三类

1. background和canvas，负责背景的样式定制
2. line垂直线及水平线的样式定制vline,trendLine等
3. 所有标题文字的模式定制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的熟悉，终生授用。

 

评论

5 楼 zhangyamei0726 2013-01-11  

FusionCharts.js 里面有好多东西都没看懂 会不会是那里面已经设置好了这个属性，然后再在xml中设置就不管用了呢？

4 楼 zhangyamei0726 2013-01-11  

<style name='MyFirstStyle' type='font' size='25' color='FF0000' align='left'></style> 


align='left'怎么不管用呢？

能不能帮我解答？

3 楼 haiyupeter 2012-12-11  

han2011zhang 写道

内存溢出怎么解决？楼主有没有遇到？

没有遇到过耶，你是在什么浏览器内存溢出的？

2 楼 han2011zhang 2012-12-11  

内存溢出怎么解决？楼主有没有遇到？

1 楼 foreverczj 2012-03-12  

请问您在学习的时候，能导出3D的报表吗