fusioncharts_中文说明


使用 FusionCharts 之前必须先引用 FusionCharts.js 特殊字符需要经过转换。如: “ €”欧元符号 ——— 需要用“%80”替换 “£”英镑符号 ——— 需要用“%A3”替换 “¥”人名币符号—— 需要用“%A5”替换 “¢”分符号 ————需要用“%A2”替换 “%”百分号 ———— 需要用“%25”替换 “&”连字符 ———— 需要用“&”替换 “>”大于号 ———— 需要用“>”替换 “'”单引号 ———— 需要用“'”替换 如果要显示双引号,直接使用就可以了,前提是属性值是用单引号括起来的。如 果 属性值是用双引号括起来的,要显示单引号,也可以直接使用,而不必用 “'”来 替换它 一.FusionCharts 的分类 关于 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> 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。例如: <2>Number - 数字类型,只能为数字。例如: <3>String - 字符串类型,只能为字符串。例如: <4>Hex Color Code - 十六进制颜色代码,前边没有’#’.例如: 好了,了解了这么多了。下面的就简单了,让我来一一介绍具体的每个属性吧。 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. 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'(趋势线标记的名字)
还剩12页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

shihuaji

贡献于2016-07-13

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf