FusionCharts参数说明
(3D饼图属性(Pie3D.swf )
animation 是否显示加载图表时的动画
palette 内置的图表样式,共5个
paletteColors 自定义图表元素颜色(为多个,如过过少会重复)
showAboutMenuItem 右键是否显示"关于FusionCharts"
aboutMenuItemLabel 右键关于自定义文字
aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式)
showZeroPies 是否显示0值的饼
showPercentValues labels上是否显示百分数
showPercentInToolTip tip上是否显示百分数
showLabels 是否显示Label
manageLabelOverflow 当Label溢出时进行自动管理
useEllipsesWhenOverflow 当Label溢出时候使用...
showValues 是否显示值
labelSepChar label上的分隔符
defaultAnimation 是否关闭默认动画一开始自定义动画
clickURL 整个图表的点击的url
标题
caption 主标题
subCaption 副标题
图表的装饰
showBorder 显示边框
borderColor 边框颜色
borderThickness 边框粗细
borderAlpha 边框透明度
bgColor 背景颜色
bgAlpha 背景透明度
bgRatio 背景比例
bgAngle 背景角度
bgSWF 背景flash地址可以是图片地址
bgSWFAlpha 背景flash的透明度
showVLineLabelBorder
logoURL log地址
logoPosition log位置
logoAlpha log透明度
logoScale log比例
logoLink log链接
元素的装饰
showPlotBorder 每一片的边框
plotBorderColor 每一片的边框颜色
plotBorderThickness 每一片的边框粗细
plotBorderAlpha 每一片的边框透明度
plotFillAlpha 每一片的边框填充透明度
use3DLighting 3d光效果
饼/圈专有属性
slicingDistance 当点击图表的时候这一片饼离开中心点的距离
pieRadius 饼的外半径
startingAngle 起始角度
enableRotation 开启旋转
pieInnerFaceAlpha 图表里面的透明度
pieOuterFaceAlpha 图表外面的透明度
pieYScale 饼立起来的角度,角度越大看到的面积越大.
pieSliceDepth 图表的厚度
标明线 & Labels (label和图表元素之间的线)
enableSmartLabels 是否开启标明显
skipOverlapLabels 跳过重复标签
isSmartLineSlanted 标明线方式(倾斜或直)
smartLineColor 标明线颜色
smartLineThickness 标明线粗细
smartLineAlpha 标明线透明度
labelDistance
smartLabelClearance 标明线长度
数字
formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
defaultNumberScale 默认数量级
numberScaleUnit
numberScaleValue
numberPrefix 数字前缀
numberSuffix 数字后缀
decimalSeparator 小数分隔符
thousandSeparator 千位分割符
inDecimalSeparator 在十进位分割符
inThousandSeparator 在千位分割符
decimals 小数
forceDecimals 是否用0填充以至满足要保留的小数位
字体
baseFont 基本字体
baseFontSize 基本字号
baseFontColor 基本字颜色
Tool-tip
showToolTip 是否显示提示
toolTipBgColor 提示背景色
toolTipBorderColor 提示边框色
toolTipSepChar 提示分隔符
showToolTipShadow 是否显示提示Tool-tip阴影
边距
captionPadding 标题内边距
chartLeftMargin 图表左外边距
chartRightMargin 图表右外边距
chartTopMargin 图表上外边距
chartBottomMargin 图表下外边距
set元素
borderColor 边框颜色
isSliced 被切开
label [label]
value 值
color 颜色
link 链接(FusionCharts链接格式)
toolText 自定义提示
图例(3.2版本以上)
showLegend 是否显示图例
legendPosition 图例位置
legendCaption 图例说明
legendIconScale 图例图标0-5(图例图标大小)
legendBgColor 图例背景色
legendBgAlpha 图例透明度
legendBorderColor 图例边框颜色
legendBorderThickness 图例边框粗细
legendBorderAlpha 图例边框透明度
legendShadow 图例阴影
legendAllowDrag 是否允许拖动图例
legendScrollBgColor 图例滚动条背景色
legendScrollBarColor 图例滚动条颜色
legendScrollBtnColor 图例滚动条按钮颜
reverseLegend 反转图例
interactiveLegend 图例交互(是否可点击)
legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)
minimiseWrappingInLegend
fusionCharts参数的详细说明——按图标类型
3D饼图属性(Pie3D.swf )
animation 是否显示加载图表时的动画
palette 内置的图表样式,共5个
paletteColors 自定义图表元素颜色(为多个,如过过少会重复)
showAboutMenuItem 右键是否显示"关于FusionCharts"
aboutMenuItemLabel 右键关于自定义文字
aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式)
showZeroPies 是否显示0值的饼
showPercentValues labels上是否显示百分数
showPercentInToolTip tip上是否显示百分数
showLabels 是否显示Label
manageLabelOverflow 当Label溢出时进行自动管理
useEllipsesWhenOverflow 当Label溢出时候使用...
showValues 是否显示值
labelSepChar label上的分隔符
defaultAnimation 是否关闭默认动画一开始自定义动画
clickURL 整个图表的点击的url
标题
caption 主标题
subCaption 副标题
图表的装饰
showBorder 显示边框
borderColor 边框颜色
borderThickness 边框粗细
borderAlpha 边框透明度
bgColor 背景颜色
bgAlpha 背景透明度
bgRatio 背景比例
bgAngle 背景角度
bgSWF 背景flash地址可以是图片地址
bgSWFAlpha 背景flash的透明度
showVLineLabelBorder
logoURL log地址
logoPosition log位置
logoAlpha log透明度
logoScale log比例
logoLink log链接
元素的装饰
showPlotBorder 每一片的边框
plotBorderColor 每一片的边框颜色
plotBorderThickness 每一片的边框粗细
plotBorderAlpha 每一片的边框透明度
plotFillAlpha 每一片的边框填充透明度
use3DLighting 3d光效果
饼/圈专有属性
slicingDistance 当点击图表的时候这一片饼离开中心点的距离
pieRadius 饼的外半径
startingAngle 起始角度
enableRotation 开启旋转
pieInnerFaceAlpha 图表里面的透明度
pieOuterFaceAlpha 图表外面的透明度
pieYScale 饼立起来的角度,角度越大看到的面积越大.
pieSliceDepth 图表的厚度
标明线 & Labels (label和图表元素之间的线)
enableSmartLabels 是否开启标明显
skipOverlapLabels 跳过重复标签
isSmartLineSlanted 标明线方式(倾斜或直)
smartLineColor 标明线颜色
smartLineThickness 标明线粗细
smartLineAlpha 标明线透明度
labelDistance
smartLabelClearance 标明线长度
数字
formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
defaultNumberScale 默认数量级
numberScaleUnit
numberScaleValue
numberPrefix 数字前缀
numberSuffix 数字后缀
decimalSeparator 小数分隔符
thousandSeparator 千位分割符
inDecimalSeparator 在十进位分割符
inThousandSeparator 在千位分割符
decimals 小数
forceDecimals 是否用0填充以至满足要保留的小数位
字体
baseFont 基本字体
baseFontSize 基本字号
baseFontColor 基本字颜色
Tool-tip
showToolTip 是否显示提示
toolTipBgColor 提示背景色
toolTipBorderColor 提示边框色
toolTipSepChar 提示分隔符
showToolTipShadow 是否显示提示Tool-tip阴影
边距
captionPadding 标题内边距
chartLeftMargin 图表左外边距
chartRightMargin 图表右外边距
chartTopMargin 图表上外边距
chartBottomMargin 图表下外边距
set元素
borderColor 边框颜色
isSliced 被切开
label [label]
value 值
color 颜色
link 链接(FusionCharts链接格式)
toolText 自定义提示
图例(3.2版本以上)
showLegend 是否显示图例
legendPosition 图例位置
legendCaption 图例说明
legendIconScale 图例图标0-5(图例图标大小)
legendBgColor 图例背景色
legendBgAlpha 图例透明度
legendBorderColor 图例边框颜色
legendBorderThickness 图例边框粗细
legendBorderAlpha 图例边框透明度
legendShadow 图例阴影
legendAllowDrag 是否允许拖动图例
legendScrollBgColor 图例滚动条背景色
legendScrollBarColor 图例滚动条颜色
legendScrollBtnColor 图例滚动条按钮颜
reverseLegend 反转图例
interactiveLegend 图例交互(是否可点击)
legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)
minimiseWrappingInLegend
多系列折线图(MSLine.swf)
[default]
showLabels 是否显示Label
labelDisplay Label的展示形式(AUTO/WRAP/STAGGER/ROTATE/NONE)
useEllipsesWhenOverflow 当Label溢出时候使用...
rotateLabels 旋转Label
slantLabels 如果rotateLabels=1,设置label是否偏转个角度.
labelStep label步伐(可以设置5个一显示/和category中showLabel='0'有些类似但不完全相同,区别在于这个属性是先展示后去掉不要的label,后者正好相反.这样对label会不会自动折行很有关系)
staggerLines 如果 labelDisplay='STAGGER',Label显示多少行.
showValues 是否显示值
valuePosition 值的位置(ABOVE/BELOW/AUTO,上下自动)
rotateValues 把值旋转
showYAxisValues 是否y轴值
showLimits 是否y轴极限值
yAxisValuesStep y轴值步伐(距离几个刻度显示一个值)
showShadow 是否显示阴影
adjustDiv 调整线
rotateYAxisName 是否旋转y轴名字
yAxisNameWidth y轴名字的宽
clickURL 图表点击的url
defaultAnimation 默认动画
yAxisMinValue 指定纵轴(y轴)最小值,数字
yAxisMaxValue 指定纵轴(y轴)最大值,数字
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
图表和画布的样式
showBorder 是否显示边框
borderColor 边框颜色
borderThickness 边框粗细
borderAlpha 边框透明度
bgColor 图表背景色,6位16进制颜色值
bgAlpha 图表背景透明度
bgRatio 图表背景的放大缩小比例
bgAngle 图表背景的角度
bgSWF 图表背景flash也可以是图片地址
bgSWFAlpha 图表背景flash的透明度
canvasBgColor 画布背景色,6位16进制颜色值
canvasBgAlpha 画布透明度,[0-100]
canvasBgRatio 画布放大缩小比例
canvasBgAngle 画布角度
canvasBorderColor 画布边框颜色,6位16进制颜色值
canvasBorderThickness 画布边框厚度,[0-100]
canvasBorderAlpha 画布边框透明度
showVLineLabelBorder
[logo]
图表元素细节
lineColor 线的颜色
lineThickness 线的粗细
lineAlpha 线的透明度
lineDashed 是否虚线
lineDashLen 每个小虚线长度
lineDashGap 两个小虚线间的距离
折点
drawAnchors 是否显示折点
anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形)
anchorRadius 折点半径
anchorBorderColor 折点边框颜色
anchorBorderThickness 折点边框粗细
anchorBgColor 折点背景色
anchorAlpha 折点透明度
anchorBgAlpha 折点背景透明度
分区线和网格
numVDivLines 画布内部垂直分区线条数,数字
vDivLineColor 垂直分区线颜色,6位16进制颜色值
vDivLineThickness 垂直分区线厚度,[1-5]
vDivLineAlpha 垂直分区线透明度,[0-100]
vDivLineIsDashed 垂直分区线是否为虚线
vDivLineDashLen 垂直分区线每个虚线长度
vDivLineDashGap 垂直分区线2个虚线间距离
showAlternateVGridColor 是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor 纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度,[0-100]
numDivLines 画布内部水平分区线条数,数字
divLineColor 水平分区线颜色,6位16进制颜色值
divLineThickness 水平分区线厚度,[1-5]
divLineAlpha 水平分区线透明度,[0-100]
divLineIsDashed 水平分区线是否为虚线
divLineDashLen 水平分区线每个虚线长度
divLineDashGap 水平分区线2个虚线间距离
zeroPlaneColor 0线颜色
zeroPlaneThickness 0线粗细
zeroPlaneAlpha 0线透明度
showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor 横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度,[0-100]
showZeroPlane 是否显示0线
[图例]
字体属性
baseFont 图表字体
baseFontSize 图表字体大小
baseFontColor 图表字体颜色,6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色,6位16进制颜色值
[Tool-tip]
图表的内外边距
captionPadding 标题内边距
chartLeftMargin 图表左外边距
chartRightMargin 图表右外边距
chartTopMargin 图表上外边距
chartBottomMargin 图表下外边距
Set标签
value 数据值
displayValue 显示的值
color 颜色
link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[java script:函数])
toolText 自定义提示
showValue 是否显示值
valuePosition 值得位置
alpha 透明度
anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形)
anchorRadius 折点半径
anchorBorderColor 折点边框颜色
anchorBorderThickness 折点边框粗细
anchorBgColor 折点背景色
anchorAlpha 折点透明度
anchorBgAlpha 折点背景透明度
dashed 虚线
3D柱状图(Column3D.swf )
图表样式
canvasBaseColor 底盘颜色
showCanvasBase 是否显示底盘
canvasbasecolor 底盘颜色
柱图元素细节
plotGradientColor 渐变色
2D条图(Bar2D.swf )
区分线及网格
alternateVGridColor 垂直网格交替的颜色。
alternateVGridAlpha 垂直网格交替的透明度。
2D条图(Bar2D.swf )
区分线及网格
alternateVGridColor 垂直网格交替的颜色。
alternateVGridAlpha 垂直网格交替的透明度。
功能特性
animation 是否动画显示数据,默认为 1(True)
showNames 是否显示横向坐标轴(x轴)标签名称
rotateNames 是否旋转显示标签,默认为0(False):横向显示
showValues 是否在图表显示对应的数据值,默认为1(True)
yAxisMinValue 指定纵轴(y轴)最小值,数字
yAxisMaxValue 指定纵轴(y轴)最大值,数字
showLimits 是否显示图表限值(y轴最大、最小值),默认为1(True)
showColumnShadow 是否显示各条形图间的阴影(若柱面图在一起并列的话)
showAlternateHGridColor 是否隔行显示不同颜色
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
imageSave='1' 是否保存图片
imageSaveURL='Path/FusionChartsSave.jsp '图片路径
hoverCapSepChar=','。鼠标放到柱面上时显示的提示信息的分隔符
showhovercap='1' 鼠标放到柱面上时是否显示提示信息
hoverCapBgColor=‘ffffff’提示信息背景颜色
图表和画布的样式
bgColor 图表背景色,6位16进制颜色值
canvasBgColor 画布背景色,6位16进制颜色值
canvasBgAlpha 画布透明度,[0-100]
canvasBorderColor 画布边框颜色,6位16进制颜色值
canvasBorderThickness 画布边框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否显示系列名,默认为1(True)
字体属性
baseFont 图表字体样式
baseFontSize 图表字体大小
baseFontColor 图表字体颜色,6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色,6位16进制颜色值
分区线和网格
numDivLines 画布内部水平分区线条数,数字
divLineColor 水平分区线颜色,6位16进制颜色值
divLineThickness 水平分区线厚度,[1-5]
divLineAlpha 水平分区线透明度,[0-100]
showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor 横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度,[0-100]
showDivLineValues 是否显示Div行的值,默认??
numVDivLines 画布内部垂直分区线条数,数字
vDivLineColor 垂直分区线颜色,6位16进制颜色值
vDivLineThickness 垂直分区线厚度,[1-5]
vDivLineAlpha 垂直分区线透明度,[0-100]
showAlternateVGridColor 是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor 纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度,[0-100]
数字格式
numberPrefix 增加数字前缀
numberSuffix 增加数字后缀 % 为 '%25' / (吨)为‘%ef%bc%88%e5%90%a8%ef%bc%89’(Server.UrlEncode编码)
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision 指定小数位的位数, [0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分区线的值小数位的位数, [0-10]
limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数,[0-10]
formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
decimalSeparator 指定小数分隔符,默认为'.'
thousandSeparator 指定千分位分隔符,默认为','
Tool- tip/Hover标题
showhovercap 是否显示悬停说明框,默认为1(True)
hoverCapBgColor 悬停说明框背景色,6位16进制颜色值
hoverCapBorderColor 悬停说明框边框颜色,6位16进制颜色值
hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness 折线的厚度
anchorRadius 折线节点半径,数字
anchorBgAlpha 折线节点透明度,[0-100]
anchorBgColor 折线节点填充颜色,6位16进制颜色值
anchorBorderColor 折线节点边框颜色,6位16进制颜色值
Set标签使用的参数
value 数据值
color 颜色
link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])
name 横向坐标轴标签名称
showFCMenuItem='0' 设置右键显示不显示
1. varmyChart= newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "
500");
第一个参数是SWF 文件的地址。
第二个是图形的id。这个id 你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有
多个图形的时候,这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
1. myChart.setDataURL("Data.xml");
最后,我们把图形渲染在指定的地方。
1. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id,这就表示把图形render 到"chartdiv"。
现在你运行JSChart.html,你会看到同Chart.html 一样的效果。很显然使用JavaScript 加载
图形,更方便,更直观。
如果你想在一个新的窗口打开页面,只需要在连接的前面加上“n-”,就像下面的代码一样:
1. <graph caption='Monthly Sales Summary' subcaption='For the year 2006 '
2. xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
3. <set name='Jan' value='1 7400' link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8' />
XML数据节点和常用属性详解
caption=‘标题‘
subcaption=‘子标题‘
clickURL=‘abc.jsp‘ 点击整个图表时跳转到abc.jsp
xAxisName=部门‘
numberPrefix =‘¥’ 数据前缀单位
numberSuffix =‘个’ 数据后缀单位
Decimals=‘2’ 保留两位小数,四舍五入
forceDecimals=‘2’ 强制保留两位小数,对于5.1 转换为5.10
yAxisName=‘完成率’
如果使用汉字汉符需加属性:rotateYAxisName=‘1’
showValues=‘1’
yAxisMaxValue=‘100’
对于百分比的常用bgColor='999999,FFFFFF‘
渐变bgColor=‘999999 ’ 单色
useRoundEdges=‘1’ 光线效果
baseFont=‘宋体‘
baseFontSize='12'
baseFontColor='333333'