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	数字显示的后缀