FusionCharts 分类以及各个属性参数列表
《FusionCharts学习及使用笔记》之 第一篇
其实一直以来我都在有意无意的把我平常工作中遇到并解决的问题做个记录,放到我的网易博客中。但却一直没有想过如何把我使用的技术做一个系列化的经验总结。今天就尝试着写一篇吧。希望我的同事以及其他需要帮助的朋友能够有所收获。
一.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><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='Number'(标题内边距)
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的顺序一个不漏的全部列出来了。如果大 家有看不明白的地方请给我留言,我会考虑翻译得更清晰易懂些,后期我也会考虑直接把原版英文解释贴出来,让大家对照着看,应该更能体会每个属性的含义,其 实很多官方文档的英文属性解释并不难,还是鼓励大家多看原文档吧。
以上内容参考文献:FusionChartsV3.1 API
FusionCharts 分类以及各个属性参数列表相关推荐
- KooBoo CMS 分页属性 参数列表
- 在学习EasyX过程中,遇到“没有与参数列表匹配的重载函数loadimage”,修改解决方案字符集属性无效后的解决方法
在学习EasyX过程中,遇到"没有与参数列表匹配的重载函数loadimage"的问题,在网上查询后,很多人给出的方法是--修改解决方案字符集属性. 解决"E0304&qu ...
- 【Kotlin】函数类型 ( 函数类型 | 带参数名称的参数列表 | 可空函数类型 | 复杂函数类型 | 带接收者函数类型 | 函数类型别名 | 函数类型实例化 | 函数调用 )
文章目录 I . 函数类型 II . 带参数名的参数列表 III . 可空函数类型 IV . 复杂函数类型解读 V . 函数类型别名 VI . 带 接收者类型 的函数类型 VII . 函数类型实例化 ...
- 前端学习(2005)vue之电商管理系统电商系统之获取动态参数列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- 前端学习(1966)vue之电商管理系统电商系统之获取参数列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- Python基本语法_函数属性 参数类型 偏函数的应用
目录 目录 前言 软件环境 Python Module的程序入口 函数的属性 Python函数的创建 函数的参数 必备参数 缺省参数 命名参数 不定长参数 匿名参数 偏函数的应用 前言 Python除 ...
- java基础(九) 可变参数列表介绍
一.可变参数简介 在不确定参数的个数时,可以使用可变的参数列表. 1. 语法: 参数类型-(三个点) 例如: void printArray(Object...) 注意: 每个方法最多只有一个可变参数 ...
- day11 函数的参数列表
""" 今日内容:1.函数参数的分类2.形参是对实参的值拷贝3.实参的分类4.形参的分类5.打散机制附1:字符串的比较 """"& ...
- maven各个属性参数详解
转载于:https://blog.csdn.net/earbao/article/details/49924943?utm_source=copy <project xmlns="ht ...
- FusionCharts 的XML标签属性
FusionCharts 的 XML标签属性有一下四种数据类型 * Boolean - 布尔类型,只能为1或者0.例如:<graph showNames='1′ > * Number - ...
最新文章
- 闭包,函数式编程学习小记
- 姚期智云栖大会首日演讲:为什么我说现在是金融科技的“新”黄金时代
- SourceTree的安装
- python连等号_Python比较2列表和2元组用等号
- Windows下一个可与其他数据集控件结合的通用的搜索框GUSIconEdit
- com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field FileSize
- curviloft插件怎么用_Curviloft插件下载
- java file数组 初始化_Java之处理数组
- 抖音企业号开发功能技术搭建
- 新浪微博生成超短链接
- 订单拆单-产品逻辑分析研究
- 【喜讯】PerfMa再获高瓴创投领投1.5亿A++轮融资
- Metasploit-模块介绍
- .locked勒索病毒来势汹汹该怎么办?
- 30年前他发明了万维网,现在他要颠覆互联网
- python pyramid基础学习二
- Java, C, 还是C++?
- 10款国外免费网站在线监控服务工具
- super()和this()
- Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
热门文章
- 算法学习--Day9
- Uva 12063 Zero and Ones
- WebSocket使用教程 - 带完整实例--网址:https://my.oschina.net/u/1266171/blog/357488
- Unity3D内容加密保护
- C#中缓存的简单方法及使用Sql设置缓存依赖项
- selenium问题记录
- .NET根本权限管理框架源代码
- 程序员有了孩子,老大叫玲玲,老二叫玲依,老三叫...
- 几个清华和北邮学霸公众号,值得学习
- R VS Python, 你会选择谁呢?