FusionCharts简单教程(三)-----FusionCharts的基本属性
通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色、设置提示信息、设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比较详细的了解,只有了解了这些最基本的元素才能制作出我们想要的图像。
FusionCharts的基本元素主要包括如下几个方面:图像背景和画布、图形标签、刻度线标签、提示信息、数据。
一、图像背景和画布。
这个标签类主要是用于设置图像的背景、边框和对整个画布进行设置。
属性名称 |
属性说明 |
示例或说明 |
bgColor |
背景颜色 |
bgColor='999999,FFFFF渐变 bgColor=’999999’ 单色 |
bgAlpha |
背景透明度 |
设置范围在1-100 |
showBorder |
图表外是否显示边框 |
默认二维图表显示,三维不显示 |
borderColor |
边框颜色 |
十六进制表示去掉前面的#号 |
borderThickness |
边框线的粗细 |
像素表示 |
borderAlpha |
边框透明度 |
|
bgSWF |
背景图片或动画 |
保证此图片和SWF文件在同一个文件夹 |
bgSWFAlpha |
设置背景图片的透明度 |
上面是对整个画布进行控制、设置,其实我们还可以对二维的图像进行设置,其中包括:背景图片、边框以及透明度。
属性名称 |
属性说明 |
示例或说明 |
canvasbgColor |
图表背景颜色 |
可设置单色也可以使用梯度设置渐变色 |
canvasbgAlpha |
图表背景透明度 |
设置范围在1-100 |
canvasBorderColor |
图表背景边框颜色 |
|
canvasBorderThickness |
图表背景边框线粗细 |
|
canvasBorderAlpha |
图表背景边框透明度 |
对于透明度而已,它会随着值的变大而越不明显。下面是透明度为100和60的比较(注意边框的变化),
二、图形标签
图形标签主要是用于表现图像的数据轴、名称、字体等等及其相关的属性的设置。
2.1图表名称
通过图表的名称属性我们可以设置图形的名称、子名称、X、Y轴的名称。
属性名称 |
属性说明 |
示例或说明 |
caption |
标题 |
|
subcaption |
子标题 |
|
xAxisName |
X轴名称 |
|
yAxisName |
Y轴名称 |
|
rotateYAxisName |
Y轴名称是否旋转的显示 |
|
rotateNames |
X轴名称是否旋转的显示 |
slantLabels=’1’时,斜45度,否则斜90度竖排 |
2.2字体属性
属性名称 |
属性说明 |
示例或说明 |
outCnvbaseFont |
Canvas外面的字体 |
即标题、子标题、X/Y轴名称字体 |
outCnvbaseFontSize |
Canvas外面的字体大小 |
范围在0-72 |
outCnvbaseFontColor |
Canvas外面的字体颜色 |
|
baseFont |
Canvas里面的字体 |
|
baseFontSize |
Canvas里面的字体大小 |
|
baseFontColor |
Canvas里面的字体颜色 |
2.3数据轴属性
属性名称 |
属性说明 |
示例或说明 |
showLabels |
是否显示X轴标签名称 |
默认显示 |
showYAxisValues |
是否显示Y轴标签名称 |
默认显示 |
numberPrefix |
Y轴数据加上前缀 |
如numberPrefix = ‘a’ |
numberSuffix |
Y轴数据加上后缀 |
如numberPrefix = ‘b’ |
formatNumberScale |
是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M |
formatNumberScale=’0’即可去除掉这个’k’ |
labelDisplay |
标签显示格式 |
WRAP(重叠)ROTATE(旋转)Stagger(交错) |
slantLabels |
标签旋转显示时的倾斜角度 |
|
staggerLines |
标签交错显示时的交错行数 |
|
labelStep |
横轴标签隔几个显示 |
|
yAxisValuesStep |
纵轴标签隔几个显示 |
|
yAxisMinValue |
Y轴坐标的最小值 |
|
yAxisMaxValue |
Y轴坐标的最大值 |
|
xAxisMinValue |
X轴坐标的最小值 |
|
xAxisMaxValue |
X轴坐标的最大值 |
2.4图例相关属性
属性名称 |
属性说明 |
示例或说明 |
showLegend |
是否显示图例说明 |
默认显示 |
legendPosition |
设置图例说明的位置 |
|
legendBgColor |
设置图例说明的背景颜色 |
|
legendBgAlpha |
设置图例说明的背景透明度 |
|
legendBorderColor |
设置图例说明的边框颜色 |
|
legendBorderThickness |
设置图例说明的边框粗细 |
|
legendBorderAlpha |
设置图例说明的边框透明度 |
|
legendShadow |
是否显示为图例说明显示阴影 |
|
legendScrollBgColor |
设置图例说明滚动条的背景颜色 |
当图例说明中有很多事件时 |
legendScrollBarColor |
设置图例说明滚动条的颜色 |
当图例说明中有很多事件时 |
egendScrollBtnColor |
设置图例说明滚动条的按钮的颜色 |
当图例说明中有很多事件时 |
2.53D图表属性
属性名称 |
属性说明 |
示例或说明 |
view2D() |
以二维的形式显示 |
3D图表已有的方法接口 |
view3D() |
以三维的形式显示 |
3D图表已有的方法接口 |
resetView() |
重置,恢复到原先的角度 |
3D图表已有的方法接口 |
rotateView(x,y) |
旋转到所选的角度 |
3D图表已有的方法接口 |
getViewAngles() |
获得当前图表所处的横纵角度 |
var a=getViewAngles(); alert(a.xAng); alert(a.yAng); |
cameraAngX |
设置图表角度(横轴角度) |
0 to 360/0 to -360默认为30度 |
cameraAngY |
设置图表角度(纵轴角度) |
0 to 360/0 to -360默认为-45度 |
startAngX |
设置图表开始的角度(横轴角度) |
0 to 360/0 to -360 |
endAngX |
设置图表结束的角度(横轴角度) |
0 to 360/0 to -360 |
startAngY |
设置图表开始的角度(纵轴角度) |
0 to 360/0 to -360 |
endAngY |
设置图表结束的角度(纵轴角度) |
0 to 360/0 to -360 |
dynamicShading |
是否设置光源影响 |
|
lightAngX |
设置光源的角度(横轴角度) |
0 to 360/0 to -360 |
lightAngY |
设置光源的角度(纵轴角度) |
0 to 360/0 to -360 |
YZWallDepth |
设置yz面的深度 |
|
ZXWallDepth |
设置zx面的深度 |
|
XYWallDepth |
设置xy面的深度 |
|
clustered |
图表是否嵌入显示 |
默认前后重叠显示 |
三、刻度线
在刻度线标签中我们可以设置零平面、刻度线和趋势线。
3.1零平面
属性名称 |
属性说明 |
示例或说明 |
zeroPlaneColor |
设置零线(面)的颜色 |
|
zeroPlaneThickness |
设置零线(面)的粗细 |
|
zeroPlaneAlpha |
设置零线(面)的透明度 |
|
zeroPlaneShowBorder |
是否显示零面的外框 |
只针对3D图表 |
zeroPlaneBorderColor |
设置零面外框的颜色 |
只针对3D图表 |
3.2刻度线
属性名称 |
属性说明 |
示例或说明 |
divLineColor |
设置div的颜色 |
|
divLineThickness |
设置div的线条粗细 |
1-5 |
divLineAlpha |
设置div的线条透明度 |
1-100 |
divLineIsDashed |
设置div是否虚线显示 |
|
showAlternateHGridColor |
设置div块是否高亮显示 |
|
vDivLineColor |
设置垂直div的颜色 |
|
vDivLineThickness |
设置垂直div的线条粗细 |
|
vDivLineAlpha |
设置垂直div的线条透明度 |
|
vDivLineIsDashed |
设置垂直div是否虚线显示 |
|
showAlternateVGridColor |
设置垂直div块是否高亮显示 |
alternateVGridAlpha (透明度) |
上面图像将零平面颜色设置为绿色、刻度线颜色为白色、粗细为1、虚线显示(如果虚线实现,粗细最好<=2否则就不清晰)。
3.3趋势线
属性名称 |
属性说明 |
示例或说明 |
dashed |
是否虚线显示 |
默认实线显示 |
dashLen |
设置虚线长度 |
|
dashGap |
设置虚线间隙宽度 |
|
startValue |
起始值 |
单个时一条横线,有结束值时,两点连线 |
endValue |
结束值 |
|
displayvalue |
线标示 |
|
valueOnRight |
设置displayvalue显示右边 |
valueOnRight ='1' |
color |
设置线颜色 |
四、提示信息
当我们将鼠标放在某快数据区域的时候,提示信息就会显示相应的提示内容,包括数据、所属“单位”、以及一些用户设置的信息。通过如下几个属性我们定制自己的提示信息。
属性名称 |
属性说明 |
示例或说明 |
showToolTip |
鼠标放上去是否显示提示 |
Set属性里可自定义设置toolText |
toolText |
自定义提示框显示的内容 |
|
toolTipBorderColor |
提示框边框的颜色 |
|
toolTipBgColor |
提示框背景颜色 |
五、数据格式
decimals |
设置小数点后面保留的位数 |
|
forceDecimals |
是否强制保留小数点后面的decimals设置的位数 |
|
formatNumberScale |
是否按默认的数据格式显示 |
|
decimalSeparator |
小数点的分隔表示方式 |
默认‘.’ |
thousandSeparator |
千分位的分隔表示方式 |
默认‘,’ |
numberScaleValue |
两个联合一起使用,定义数据标度 |
numberScaleValue='1000,1000,1000' |
numberScaleUnit |
numberScaleUnit='K,M,B' |
|
numberPrefix |
数字显示的前缀 |
numberPrefix='$' |
numberSuffix |
数字显示的后缀 |
FusionCharts简单教程(三)-----FusionCharts的基本属性的更多相关文章
- FusionCharts简单教程(三)-----如何自定义图表上的工具提示
最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- FusionCharts简单教程(一)---建立第一个FusionCharts图形
由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...
- FusionCharts简单教程---建立第一个FusionCharts图形
由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...
- FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能
前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- FusionCharts简单教程(六)------加载外部Logo
一.加载外部文件Logo 在使用FusionCharts时,我们可能需要在加载图像的时候需要在图表中显示标识.图片等等.这里我们可以使用logoURL属性来实现.如: <chart ...
- FusionCharts简单教程(四)-----基本数字格式
在统计图例中什么是最基本,最重要的元素?那就是数据.一个数据的统计图像那就是一堆空白.但是数据存在多种形式,比如小数,比如千分位等等.又如若一个数据是12.000000001,对于数据要求 ...
- FusionCharts简单教程(五)-----FusionCharts中的那些特殊符号
在FusionCharts中有些特殊字符,我们需要进行编码操作才能够使用,否则就无法正常显示. 欧元符号 在FusionCharts里显示"€",你需要用 ...
随机推荐
- .Net中的加密解密
返回博客列表 转 .Net中的加密解密 李朝强 发布时间: 2015/11/23 12:55 阅读: 33 收藏: 3 点赞: 0 评论: 0 在一些比较重要的应用场景中,通过网络传递数据需要进行加密 ...
- 用python画xy散点图
import matplotlib.pyplot as plt plt.plot([1,2,3],[4,5,6],'ro') plt.show()#这个智障的编辑器 这样的话,就可以画一个散点图,图中 ...
- redis五种数据类型的使用(zz)
redis五种数据类型的使用 redis五种数据类型的使用 (摘自:http://tech.it168.com/a2011/0818/1234/000001234478_all.shtml ) 1.S ...
- 解析jquery获取父窗口的元素
("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx ...
- android六大框架
-LinearLayout线性布局 垂直排序,每行仅包含一个界面元素 水平排序,每列仅包含一个界面元素 orientation,Layout-weight,Layout-margin(外边距,与屏幕) ...
- paip.语义分析--分词--常见的单音节字词 2_deDuli 单字词 774个
paip.语义分析--分词--常见的单音节字词 2_deDuli 单字词 774个 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址 ...
- checkbox、全选反选,获取值
<input id="Chk_All" onclick="CheckAll()" type="checkbox" /> < ...
- Python爬虫入门案例:获取百词斩已学单词列表
百词斩是一款很不错的单词记忆APP,在学习过程中,它会记录你所学的每个单词及你答错的次数,通过此列表可以很方便地找到自己在记忆哪些单词时总是反复出错记不住.我们来用Python来爬取这些信息,同时学习 ...
- ruby 常注意的
1.ruby中生成字符串有两种形式 一种单引号,这种在使用时,对字符串不作处理,照原样输出 双引号就不同了,他会查找字符串中需要替换的字符,例如\n,#{}这种都会先替换为需要的值. 所以在使用的时候 ...
- Microsoft Office 2010/2013安装组件预设
日常维护中,多台电脑需要安装Office,可是Office包含的组件又很多(Excel/Word/PPT/OUTLOOK/ACCESS等),有些是不需要的,默认情况下Office都默认安装,一个一个调 ...