fusionCharts属性参考API

关于FusionCharts的基本介绍我就不在这里浪费篇幅了，想了解的朋友自己去www.baigoogedu.com里面找吧。我就说说FusionCharts的官方四大分类:


1.FusionCharts


2.FusionMaps


3.FusionWidgets


4.PowerCharts


每种类型我还是贴个图吧(从左到右依次对应):


   


二.关于FusionCharts的FusionCharts


大家知道了FusionCharts分类以后，就明白了FusionCharts的FusionCharts吧。之前我们小组研究FusionCharts的时候，这个念法一直都觉得很绕口，现在熟悉了，就好了。其实我们在现有的项目中几乎85%的图形都来至于FusionCharts的FusionCharts，还有5%来至于FusionCharts的FusionWidgets，5%来自FusionCharts的PowerCharts。可能大家会问，我这个"什么的什么"说法是不是太罗嗦，直接说子类不就行了吗？不知道细心的读者发现没有，上面的综合加起来是95%，其实我们项目中还有的5%的图形是来自于amcharts的amstock。关于amcharts我就不多说了，以后有机会再做个专题吧，以免跑题了。


FusionCharts的FusionCharts分类有很多种。按数据类型分类有:


1.单组数据类型图表(Single Data Charts)


2.多组数据类型图表(Multi-Data Charts)


按图的展示类型分类(也是官方分类)有:


1.单系列图表(Single Series Charts)


2.多系列图表(Multi-Series Charts)


3.堆积式图表(Stacked Charts)


4.组合图表(Combination Charts)


5.分布图(XY Plot Charts)


6.滚动图(Scroll Charts)


其实我们的项目中通常所说的分类就是按数据类型分类的，这个分类是我们自己在实际工作中总结出来的。而按图形展示来分类是FusionCharts官方文档的分类，是很标准的分类。


数据类型分类如图(从左到右依次对应)：


 


图的展示类型分类(从左到右依次对应)：


     


三.关于FusionCharts的FusionCharts的Attributes(属性)


关于FusionCharts的FusionCharts中很多不同的图、不同类型的图其实有很多共通的属性，当然也有一些各自特殊的属性。下面我先来给大家介绍这些共通的属性吧。






上图为FusionCharts的FusionCharts中Column2D.swf的属性。我将拿此图的属性作为例子讲解，因为此图的属性几乎全部为通用属性。(具体是99%通用还是100%通用这个我还真没有统计过，至少是95%通用吧)。属性的分类就以官方的API文档为准吧：


1.Chart:


<1>Functional Attributes(功能属性)


<2>Titles and Axis Names(标题和坐标抽名字)


<3> Charts Cosmetics(图表美容属性)


<4>Divisional Lines/Grids(分区线/网格 属性)


<5>Tool-tip(工具提示属性)


<6>Paddings and Margins(填充和边距属性)


2.Data:


<1><set> element(set元素属性)


<2>Plot Cosmetics(节点美容属性)


3.Others:


<1>Number Formatting(数字格式化属性)


<2>Font Properties(字体属性)


<3>Vertical Lines(垂直线属性)


<4>Trend Lines(趋势线属性)。


注:细心的读者会发现，我上面列的属性分类和图片上的有点不一致，我来解释一下：Chart的Chart Image和Data的Sample XML Data是链接到图片和数据，不是属性。Chart的Chart Objects是高级"对象组合属性"，平时也很少使用，这里就暂不做介绍了吧，有机会的话，以后单独写篇文章再给大家讲解。


属性的分类先介绍到这里，下面我来详细解释每个属性的用途，但在这之前，我得提一下属性的数据类型。FusionCharts 的 XML标签属性有一下四种数据类型:


<1>Boolean - 布尔类型，只能为1或者0。例如：<chart showNames=’1′ >


<2>Number - 数字类型，只能为数字。例如：<chart yAxisMaxValue=’200′ >


<3>String - 字符串类型，只能为字符串。例如： <chart caption=’My Chart’ >


<4>Hex Color Code - 十六进制颜色代码，前边没有’#’.例如： <chart bgColor=’FFFFDD’ >


好了，了解了这么多了。下面的就简单了，让我来一一介绍具体的每个属性吧。


1.Functional Attributes(功能属性)


animation='0/1' (设置图形的显示是否是动画显示)


palette='1-5' (5种默认的调色板风格任你选)


paletteColors='String' (手动设置调色板的颜色paletteColors='FF0000,0372AB,FF5904...')


showAboutMenuItem='0/1'(在图形上点击右键时是否显示about链接)


aboutMenuItemLabel='String'(about链接的具体名字)


aboutMenuItemLink='String'(about链接的具体链接地址)


showLabels='0/1'(是否显示x轴的坐标值)


labelDisplay='WRAP/STAGGER/ROTATE/NONE'(x轴坐标值的具体展现形式)


rotateLabels='0/1'(是否旋转x轴的坐标值)


slantLabels='0/1'(将x轴坐标值旋转为倾斜的还是完全垂直的)


labelStep='1 or above'(x轴坐标值的步长，即可以设置隔几个柱子显示一个值)


staggerLines='2 or above'(如果labelDisplay设置为STAGGER,则此属性是控制一个展示周期)


showValues='0/1'(是否在图形上显示每根柱子具体的值)


rotateValues='0/1'(是否旋转图形上显示的柱子的值)


placeValuesInside='0/1'(图形上柱子的值是否显示在柱子里面)


showYAxisValues='0/1'(是否显示Y轴的值)


showLimits='0/1'(是否显示极值)


showDivLineValues='0/1'(是否在divline处显示值)


yAxisValuesStep='1 or above'(Y轴值的步长)


showShadow='0/1'(是否显示阴影)


adjustDiv='0/1'(是否自动调整divlines)


rotateYAxisName='0/1'(是否旋转Y轴的名字)


yAxisNameWidth='Number'(Y轴名字的宽度)


clickURL='String'(点击的链接地址)


defaultAnimation='0/1'(是否使用默认动画)


yAxisMinValue='Number'(Y轴的最小值)


yAxisMaxValue='Number'(Y轴的最大值)


setAdaptiveYMin='0/1'(自动设置Y轴的最小值)


2.Titles and Axis Names(标题和坐标抽名字)


caption='String'(主标题名字)


subCaption='String'(副标题名字)


xAxisName='String'(X轴名字)


yAxisName='String'(Y轴名字)


3.Charts Cosmetics(图表美容属性)


bgColor='Color' (图表的背景色)


bgAlpha='0-100'(背景色的透明度)


bgRatio='1-100'(如果背景色有两个，该属性设置差异的比例)


bgAngle='0-360'(转变背景颜色的角度，设置一个倾斜度)


bgSWF='String'(用做背景的swf路径)


bgSWFAlpha='0-100'(背景swf的透明度)


canvasBgColor='Color'(画板背景颜色)


canvasBgAlpha='0-100'(画板背景透明度)


canvasBgRatio='Number'(不同画板背景色的比率)


canvasBgAngle='Number'(画布背景色显示角度)


canvasBorderColor='Color'(画板边框的颜色)


canvasBorderThickness='Number'(画板边框的宽度)


canvasBorderAlpha='0-100'(画板边框的透明度)


showBorder='0/1'(是否显示图表边框)


borderColor='Color'(边框颜色)


borderThickness='Number'(图表边框的粗细)


borderAlpha='0-100'(边框透明度)


showVLineLabelBorder='0/1'(是否显示垂直线label的宽度)


logoURL='String'(在图表上加上logo,logo图片的地址)


logoPosition='TL/TR/BL/BR/CC'(logo的位置)


logoAlpha='0-100'(logo的透明度)


logoScale='1-300'(控制logo放大缩小的倍数)


logoLink='String'(logo的链接地址)


4.Divisional Lines/Grids(分区线/网格 属性)


numDivLines='>0'(水平网格线的数量)


divLineColor='Color'(网格线颜色)


divLineThickness='1-5'(网格线粗细)


divLineAlpha='0-100'(网格线透明度)


divLineIsDashed='0/1'(网格线是否显示为虚线)


divLineDashLen='Number'(每个虚线的长度)


divLineDashGap='Number'(每个虚线间的间隔长度)


zeroPlaneColor='Color'(0值处网格线颜色)


zeroPlaneThickness='Number'(0值处网格线粗细)


zeroPlaneAlpha='0-100'(0值处网格线透明度)


showAlternateHGridColor='0/1'(是否交替显示网格颜色)


alternateHGridColor='Color'(水平网格颜色)


alternateHGridAlpha='Number'(水平网格透明度)


5.Tool-tip(工具提示属性)


showToolTip='0/1'(是否显示气泡提示)


toolTipBgColor='Color'(气泡提示的背景颜色)


toolTipBorderColor='Color'(汽包提示的边框颜色)


toolTipSepChar='String'(气泡提示的分隔符)


showToolTipShadow='0/1'(是否使气泡提示带有阴影效果)


6.Paddings and Margins(填充和边距属性)


captionPadding


xAxisNamePadding='Number'画板与x轴标题之间的距离


yAxisNamePadding='Number'(画板与y轴标题之间的距离)


yAxisValuesPadding='Number'(画板与y轴值之间的距离)


labelPadding='Number'(画板离label之间的距离)


valuePadding='Number'(柱子离值之间的距离)


plotSpacePercent='0-80'(两个bar之间的距离)


chartLeftMargin='Number'(距左边框的距离)


chartRightMargin='Number'(距右边框的距离)


chartTopMargin='Number'(距上边框的距离)


chartBottomMargin='Number'(距下边框的距离)


canvasLeftMargin='Number'(画板离左边的距离)


canvasRightMargin='Number'(画板离右边的距离)


canvasTopMargin='Number'(画板离上边的距离)


canvasBottomMargin='Number'(画板离下边的距离)


7.<set> element(set元素属性)


label='String'(具体的标签)


value='Number'(具体的值)


displayValue='String'(显示的值)


color='Color'(该柱子的颜色)


link='String'(链接地址)


toolText='String'(气泡提示时显示的值)


showLabel='0/1'(是否显示标签)


showValue='0/1'(是否显示此柱子的值)


dashed='0/1'(柱子的边框是否显示为虚线)


alpha='Number'(柱子的透明度)


8.Plot Cosmetics(节点美容属性)


useRoundEdges='0/1'(是否显示光滑边缘)


showPlotBorder='0/1'(是否显示柱子的边框)


plotBorderColor='Color'(柱子边框的颜色)


plotBorderThickness='0-5'(柱子边框的厚度)


plotBorderAlpha='0-100'(柱子边框的透明度)


plotBorderDashed='0/1'(柱子边框是否显示为虚线)


plotBorderDashLen='Number'(虚线的长度)


plotBorderDashGap='Number'(虚线的间隔)


plotFillAngle='0-360'(数据填充色角度)


plotFillRatio='0-100'(数据填充色比率)


plotFillAlpha='0-100'(数据填充色透明度)


plotGradientColor='Color'(数据的有坡度颜色方案)


9.Number Formatting(数字格式化属性)


formatNumber='0-1'(是否格式化数值)


formatNumberScale='0-1'(是否对大数值以k,M方式表示)


defaultNumberScale='String'(默认的数字格式化)


numberScaleUnit='String'(设置进位规则对应的单位eg:k,m,b)


numberScaleValue='String'(设置进位的规则eg:1000,1000,1000)


numberPrefix='String'(数值前缀)


numberSuffix='String'(数值后缀)


decimalSeparator='String'(设置小数点的分隔符的表示形式,|.)


thousandSeparator='String'(设置3位数值之间的分隔符的表示形式,|.)


inDecimalSeparator='String'(设置小数分隔符)


inThousandSeparator='String'(设置千位分隔符)


decimals='0-10'(小数点后保留几位)


forceDecimals='0/1'(小数点后位数不够的，是否强制补0)


yAxisValueDecimals='0-10'(y轴值保留几位小数)


10.Font Properties(字体属性)


baseFont='String'(字体)


baseFontSize='0-72'(字体大小)


baseFontColor='Color'(字体颜色)


outCnvBaseFont='String'(画板外的字体)


outCnvBaseFontSize='0-72'(画板外的字体大小)


outCnvBaseFontColor='Color'(画板外的字体颜色)


11.Vertical Lines(垂直线属性)


color='Color'(颜色)


thickness='Number'(厚度)


alpha='0-100'(透明度)


dashed='0/1'(是否使用虚线)


dashLen='Number'(虚线的长度)


dashGap='Number'(虚线间隔的长度)


label='String'(此垂直线的名字)


showLabelBorder='0/1'(是否显示label的边框)


linePosition='0/1'(line的位置)


labelPosition='0/1'(label的位置)


labelHAlign='left/center/right'(水平线label的位置)


labelVAlign='top/middle/bottom'(垂直线label的位置)


12.Trend Lines(趋势线属性)


startValue='Number'(开始值)


endValue='Number'(结束值)


displayValue='String'(显示的值)


color='Color'(颜色)


isTrendZone='0/1'(是否显示趋势线)


showOnTop='0/1'(趋势线是否显示在上面)


thickness='Number'(趋势线的宽度)


alpha='0-100'(趋势线的透明度)


dashed='0/1'(趋势线是否为虚线)


dashLen='Number'(趋势线虚线的长度)


dashGap='Number'(虚线之间的间隔长度)


valueOnRight='0/1'(趋势线的标记是否在右边)


toolText='String'(趋势线标记的名字)


四. 结束语


到此为止我就把FusionCharts的FusionCharts中的Column2D.swf属性按照官方API的顺序一个不漏的全部列出来了。如果大家有看不明白的地方请给我留言，我会考虑翻译得更清晰易懂些，后期我也会考虑直接把原版英文解释贴出来，让大家对照着看，应该更能体会每个属性的含义，其实很多官方文档的英文属性解释并不难，还是鼓励大家多看原文档吧