一.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'(趋势线标记的名字)

四. 结束语

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

(转贴)fusionCharts属性参考API的更多相关文章

  1. Spring3.1新属性管理API:PropertySource、Environment、Profile

    Spring3.1提供了新的属性管理API,而且功能非常强大且很完善,对于一些属性配置信息都应该使用新的API来管理.虽然现在Spring已经到4版本了,这篇文章来的晚点. 新的属性管理API Pro ...

  2. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  3. Fusioncharts图表组件API参考方法(Functions)汇总篇(续)

    [摘要]: chartType()FusionCharts的JavaScript类API提供了大量的功能.下面的列表显示在每个功能的详细信息: 一.FusionCharts的类 - 实例功能 1.co ...

  4. FusionCharts属性大全

    属性的分类就以官方的API文档为准吧: 1.Chart: <1>Functional Attributes(功能属性) <2>Titles and AxisNames(标题和坐 ...

  5. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  6. H5视频播放器属性与API控件,以及对程序的解释

    一:理论 1.视频播放器的格式介绍 视频主要有三部分组成:视频.音频.编码格式 视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video ...

  7. 关于 appium get_attribute --获取对应属性值 API说明

    1.获取 content-desc 的方法为 get_attribute("name") ,而且还不能保证返回的一定是 content-desc (content-desc 为空时 ...

  8. hibernate.properties官方属性用例(可用于hibernate.cfg.xml属性参考)

    ######################### Query Language ######################### ## define query language constant ...

  9. as3.0服务端FMS软件常用的方法与属性参考示例

    转自:http://www.cuplayer.com/player/PlayerCode/RTMP/2012/0918429.html Application类的方法汇总方法 描述Applicatio ...

随机推荐

  1. MyEclipse2014安装aptana插件

    1. 2. aptana插件下载地址 链接: https://pan.baidu.com/s/1sloiAK1 密码: a1nh 3. 4. 确认是否安装成功

  2. php递归获取目录下所有文件

    <?php function getFileList($dir){ $dir=iconv("utf-8","gb2312",$dir); if ($hea ...

  3. matomo 开源网站分析平台

    1.安装PHP https://www.jianshu.com/p/8d54a401ec06 yum remove php* yum -y install epel-release rpm -Uvh ...

  4. 问题1:鼠标指向导航栏li,但li中a样式未改变

    <!--HTML代码--><div class="nav-mid-left"> <ul> <li><a href=" ...

  5. 《centos系列》ubuntu终端链接centos服务器

    首先你得知道centos的账户密码:如果你不知道可以直接在centos下使用root用户: passwd 用户名 直接更新用户的密码. 然后在ubuntu终端(前提是已经安装了ssh): ssh ad ...

  6. bbs项目中对反向查询和分组查询的具体的应用

    我的数据库是按照下面的图片的方式设计的 然后看下model中代码 class User(models.Model): uid = models.AutoField(primary_key=True) ...

  7. jstl的forEach详解(转)

    <c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的 ...

  8. ARM板移植udev-126

    下载udev-126.tar.xz 下载的网址为: https://mirrors.edge.kernel.org/pub/linux/utils/kernel/hotplug/ 解压文件并且编译 # ...

  9. .NET通用工具——正则表达式

    正则表达式就是一组字符串运算规则,你需要先把元字符记熟,然后就可以随意组合获得你想要的结果.把一些常用的正则表达式背下来也是一种方法,再加以变化获得你想要的结果. 正则表达式不需要刻意的去学习,当用到 ...

  10. php 图像处理函数

    gd_info       函数:获取当前安装的GD库的信息 getimagesize  函数:获取图像的大小 image_type_to_extension   函数:获取图像类型的文件后缀 ima ...