FusionChart参数大全图文解释.docx
《FusionChart参数大全图文解释.docx》由会员分享，可在线阅读，更多相关《FusionChart参数大全图文解释.docx（88页珍藏版）》请在冰豆网上搜索。
FusionChart参数大全图文解释
FusionChart参数大全（图文解释）
说明：
1、颜色值使用16进制表示，不需要#前缀，比如红色：
FF0000
2、透明度，有效范围0~100
3、下面的例图是用2D柱状图有需要的时候会引入其他类型的图。
4、布尔类型的值都用’1’和’0’表示。
5、图片导出功能
/******若要将图表导出为图片或pdf，添加以下属性--start********************/
graphConfig.setExportEnabled（"1"）;
graphConfig.setExportAtClient（"1"）;
graphConfig.setExportFormats（"PNG"）;//PDF=导出为PDF|PNG=导出为PNG图片|JPG=导出JPG图片
graphConfig.setExportDialogMessage（）;
graphConfig.setExportHandler（"fcExporter1"）;
/******将图表导出为图片或pdf添加属性---end********************/
页面需引入js（FusionChartsExportComponent.js）
varmyExportComponent=newFusionChartsExportObject（"fcExporter1","/fusionCharts/swf/FCExporter.swf"）;
myExportCponentAttributes.width='700';
myExportCponentAttributes.height='60';
//Backgroundcolor
myExportCponentAttributes.bgColor='FFFFFF';
//Borderproperties
myExportCponentAttributes.borderThickness='2';
myExportCponentAttributes.borderColor='0372AB';
//Fontproperties
myExportCponentAttributes.fontFace='Arial';
myExportCponentAttributes.fontColor='0372AB';
myExportCponentAttributes.fontSize='12';
//Message-captionofexportcomponent
myExportCponentAttributes.showMessage='1';
myExportCponentAttributes.message='先右击图表导出,再点击下边按钮进行保存.';
//Buttonvisualconfiguration
myExportCponentAttributes.btnWidth='200';
myExportCponentAttributes.btnHeight='25';
myExportCponentAttributes.btnColor='E1f5ff';
myExportCponentAttributes.btnBorderColor='0372AB';
//Buttonfontproperties
myExportCponentAttributes.btnFontFace='Verdana';
myExportCponentAttributes.btnFontColor='0372AB';
myExportCponentAttributes.btnFontSize='15';
//Titleofbutton
myExportCponentAttributes.btnsavetitle='保存图表';
myExportCponentAttributes.btndisabledtitle='等待导出...';
myExportComponent.Render（"fcexpDiv"）;
functionexportChart（exportFormat）{
alert（monColumnChart.hasRendered（）+"---"+myExportComponent.exportChart）;
if（monColumnChart.hasRendered（））{
document.getElementById（"linkToExportedFile"）.innerHTML="Exporting...";
monColumnChart.exportChart（{"exportFormat":
exportFormat}）;
}else{
document.getElementById（"linkToExportedFile"）.innerHTML="Pleasewaittillthechartcompletesrendering...";
}
}
functionFC_Exported（）{
//alert（"导出成功！
"）;
}
1、背景（Background）
bgColor="FF0000"bgColor="00FF00"bgColor="FF0000,00FF00"
相关属性参数：
1）：
bgColor设置背景颜色。
（多个颜色则显示为渐变效果）举例说明（最希望你懂的）：
A:
bgColor="FF0000"使用红色背景。
B:
bgColor="FF0000,00FF00"使用红色到绿色的渐变作为背景。
2）：
bgAlpha背景透明度，值的个数和颜色值一致。
（js中一定要加这个Chart.setTransparent（））
3）：
bgRatio各个背景色的比例，值的个数和颜色值一致，总和为100（颜色渐变时使用该属性）
4）：
bgAngle背景渐变的方向，0~360：
（颜色渐变时使用该属性）
0表示从左向右渐变
45表示从左上角到右下角渐变
90表示从上向下渐变
180表示从右向左渐变
360和0一样表示从左向右渐变其他角度类推。
见下图个角度效果（下图颜色设置为bgColor="FF0000,00FF00,0000FF"）
04590180
5）：
bgSWF使用背景图片，可以是图片或者swf的flash，图片必须和图表在同一域名下。
6）：
bgSWFAlpha背景图片的透明度。
（0背景图不可见，100背景图最清晰）
2、边框（Border）
相关属性参数：
1）：
showBorder设置是否显示边框1：
显示0：
不显示默认值：
2D类图表显示边框，3D类图表不显示。
2）：
borderColor边框颜色。
3）：
borderThickness边框宽度，单位为像素。
4）：
borderAlpha边框的透明度。
3、画布（Canvas）
相关属性参数：
1）：
canvasbgColor画布背景色。
（多个颜色用逗号隔开，表示渐变）
2）：
canvasbgAlpha画布背景透明度。
3）：
canvasBgRatio画布背景颜色的比例，总和100。
（颜色的比例，渐变时使用）
4）：
canvasBgAngle画布背景渐变角度，参见1.4。
5）：
canvasBorderColor画布边框颜色。
6）：
canvasBorderThickness画布边框的宽度，单位为像素。
7）：
canvasBorderAlpha画布边框的透明度。
---3D画布属性：
8）：
showCanvasBg是否显示画布背景。
9）：
showCanvasBase是否显示画布基座（右下图银灰色部分）。
showCanvasBase=’0’showCanvasBase=’1’
10）：
canvasBaseDepth画布基座高度，单位像素。
canvasBaseDepth='40'11）：
canvasBaseDepth画布背景的厚度，单位像素。
canvasBgDepth='10'
4、标题、坐标轴、字体（Titles）
相关属性参数：
------标题、坐标轴：
1）：
caption主标题。
2）：
subCaption子标题。
3）：
xAxisNameX轴名称。
4）：
yAxisNameY轴名称。
5）：
yAxisMaxValueY轴最大值
6）：
yAxisMinValueY轴最小值
7）：
setAdaptiveYMin自动调节Y轴最小值
setAdaptiveYMin=’1’
8）：
rotateYAxisNameY轴名称水平放置（默认Y轴名称为垂直放置）。
9）：
yAxisNameWidthY轴名称宽度。
10）：
showYAxisValues是否显示Y轴值。
即上图的$0$24$48…
11）：
showLabels是否显示X轴值。
即上图的JanFebMarApr…
------字体：
12）：
outCnvbaseFont画布外字体，对画布外的所有元素起作用。
13）：
outCnvbaseFontSize画布外字体大小。
14）：
outCnvbaseFontColor画布外字体颜色。
outCnvbaseFontColor='FF0000'
15）：
baseFont图表上所有文本的字体。
16）：
baseFontSize图表上所有文本的字体大小。
17）：
baseFontColor图表上所有文本的字体颜色。
baseFontColor='0000FF'
5、数据区域（DataPlot）
相关属性参数：
1）：
plotGradientColor渐变色，设置成’’则不渐变。
2）：
plotFillRatio渐变色比例。
3）：
plotFillAlpha渐变色透明度。
4）：
plotFillAngle渐变角度参见1.4。
5）：
showPlotBorder是否显示柱子的边框。
（下图showPlotBorder='0'）
6）：
plotBorderDashe柱子的边框是否用虚线。
7）：
plotBorderDashLen柱子的边框用虚线,虚线的长度。
8）：
plotBorderDashGap柱子的边框用虚线,虚线之间的间隔。
9）：
useRoundEdges是否用圆角矩形和玻璃效果。
10）：
showValues是否显示数据。
11）：
labelDisplayX轴标签的显示方式控制
labelDisplay='WRAP'labelDisplay='Rotate'
labelDisplay='Rotate'slantLabels='1'labelStep='4'
labelDisplay='Stagger'labelDisplay='Stagger'staggerLines='3'
6、数据值（DataValues）
相关属性参数：
1）：
rotateValues是否垂直显示数值。
2）：
placeValuesInside是否将数值显示在柱子里面。
rotateValues='1'placeValuesInside='1'
7、水平/竖直分割线（DivisionalLines/VertcalDivisionLines）
相关属性参数：
----水平
1）：
divLineColor水平分割线的颜色。
2）：
divLineThickness水平分割线的高度。
3）：
divLineAlpha水平分割线的透明度。
4）：
divLineIsDashed水平分割线是否使用虚线。
5）：
divLineDashLen水平分割线每一小截虚线的长度。
6）：
divLineDashGap水平分割线之间的间隔。
7）：
showAlternateHGridColor水平分割线之间的颜色是否交替。
8）：
adjustDiv是否使用默认水平分割线，默认为使用。
即水平分割线是默认有的。
9）：
numDivLines在adjustDiv=’0’时使用，水平分割线的条数。
----竖直
10）：
numVDivLines竖直分割线的条数。
11）：
vDivLineColor竖直分割线的颜色。
12）：
vDivLineThickness竖直分割线的高度。
13）：
vDivLineAlpha竖直分割线的透明度。
14）：
vDivLineIsDashed竖直分割线是否使用虚线。
15）：
vDivLineDashLen竖直分割线每一小截虚线的长度。
16）：
vDivLineDashGap竖直分割线之间的间隔。
17）:
showAlternateVGridColor竖直分割线之间的颜色是否交替。
18）：
alternateVGridColor竖直分割线之间的颜色。
19）：
alternateVGridAlpha竖直分割线之间颜色的透明度。
8、水平面（ZeroPlane）
相关属性参数：
----2D
1）：
zeroPlaneColor水平面的颜色。
2）：
zeroPlaneThickness水平面的厚度。
3）：
zeroPlaneAlpha水平面的透明度。
----3D
4）：
zeroPlaneColor水平面的颜色。
5）：
zeroPlaneAlpha水平面的透明度。
6）：
zeroPlaneShowBorder水平面边框是否显示。
7）：
zeroPlaneBorderColor水平面的边框颜色
zeroPlaneAlpha=’0’zeroPlaneColor='000000'zeroPlaneBorderColor='0000FF'
9、趋势线和区域（Trendlines&Zones）
趋势线趋势区域
相关属性参数：
1）：
startValue趋势线、趋势区域的起始值。
2）：
endValue趋势区域的结束值。
配合isTrendZone=’1’时使用。
此时是趋势区域。
3）：
color趋势线、趋势区域的颜色。
4）：
isTrendZone是否是趋势区域。
5）：
Displayvalue趋势线、趋势区域名称。
6）：
toolText趋势线、趋势区域鼠标悬停提示信息。
7）：
thickness趋势线线的宽度。
8）：
alpha趋势线、趋势区域的透明度。
例图如下：
calculatedlastyear'/>
displayvalue='Target'/>
10、锚点（Anchors）
anchorRadius='8'anchorSides='4'
相关属性参数：
1）：
anchorSides锚点边的条数。
默认为圆形。
2）：
anchorRadius锚点半径，单位为像素。
3）：
anchorBorderColor锚点边框颜色。
4）：
anchorBorderThickness锚点边框厚度。
5）：
anchorBgColor锚点背景色。
6）：
anchorAlpha锚点透明度。
7）：
anchorBgAlpha锚点背景透明度。
8）：
drawAnchors是否绘制锚点。
11、提示信息（ToolTip）
即鼠标悬停在锚点或者柱子上的提示信息。
相关属性参数：
1）：
showToolTip是否显示ToolTip。
2）：
showToolTipShadow是否显示ToolTip阴影。
3）：
toolTipBorderColorToolTip边框颜色。
4）：
toolTipBgColorToolTip背景颜色说明：
如果需要在tooltip中需要换行则使用{br}。
tooltext为数据的属性。
tooltext='JohnMiller{br}Score:
420{br}Rank:
2'
12、内外边距（PaddingMargins）
相关属性参数：
1）：
chartLeftMargin说明见下图。
2）：
chartRightMargin说明见下图。
3）：
chartTopMargin说明见下图。
4）：
chartBottomMargin说明见下图。
5）：
captionPadding说明见下图。
6）：
xAxisNamePadding说明见下图。
7）：
yAxisNamePadding说明见下图。
8）：
yAxisValuesPadding说明见下图。
9）：
labelPadding说明见下图。
10）：
valuePadding说明见下图。
11）：
canvasPadding说明见下图。
13、竖直分隔线（VerticalSeparatorLines）
在数据集中使用：
…
相关属性参数：
1）：
linePosition线的位置，默认在前后两个值的中间，设为1则显示在后面一个值的位置，设置为0则显示在前面一个值的位置。
默认位置linePosition=’0’linePosition=’1’
2）：
label线的标签。
label='2009'
3）：
labelPosition标签的位置。
labelPosition=’0’labelPosition=’0.7’labelPosition=’1’
4）：
showLabelBorder标签的边框是否显示。
等同于在参数里设置showVLineLabelBorder
showLabelBorder='0'
5）：
labelHAlign标签水平对齐方式。
（left,centerorright）
6）：
labelVAlign标签垂直对齐方式。
（top,middleorbottom）7）：
color线的颜色。
8）：
thickness线的宽度。
9）：
alpha线的透明度。
10）：
dashed是否使用虚线。
11）：
dashLen虚线每一截的长度。
12）：
dashGap两截虚线间的间隔。
labelPosition='0.7'dashed='1'dashGap='5'thickness='4'
14、智能标签和线（SmartLabels&Lines）
相关属性参数：
1）：
enableSmartLabels是否启用智能标签。
2）：
smartLineColor智能标签的线的颜色。
3）：
smartLineThickness智能标签的线的宽度。
4）：
smartLineAlpha智能标签的线的透明度。
5）：
isSmartLineSlanted智能标签的线是否倾斜，0：
直角，1：
倾斜。
isSmartLineSlanted='1'isSmartLineSlanted='0'
6）：
labelDistance标签到饼图的距离。
7）：
smartLabelClearance标签到图表的净距离。
测试结果不明显，原文如下，请参考。
AttributeName
Range
Description
labelDistance
InPixels
Thisattributehelpstosetthedistanceofthelabel/valuetext
boxesfromthepie/doughnutedge.
smartLabelClearance
InPixels
Clearanc
升级会员 