FusionChart参数大全图文解释.docx
- 文档编号:8155759
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:88
- 大小:3.65MB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FusionChart 参数大全图文解释 参数 大全 图文 解释