通过前面两章的讲解我们可以制作出简单的图像，但是有时候我们需要对图像进行一个精确的规划，比如设置背景颜色、设置提示信息、设置间隔颜色等等，这时就需要我们对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 |
数字显示的后缀 |