通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色、设置提示信息、设置间隔颜色等等,这时就需要我们对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
设置线颜色
四、提示信息
当我们将鼠标放在某快数据区域的时候,网站空间,提示信息就会显示相应的提示内容,包括数据、所属“单位”、以及一些用户设置的信息。通过如下几个属性我们定制自己的提示信息。
生命太过短暂,今天放弃了明天不一定能得到