FusionCharts 参数大全-有图有真相

《FusionCharts 参数大全-有图有真相》由会员分享，可在线阅读，更多相关《FusionCharts 参数大全-有图有真相（71页珍藏版）》请在金锄头文库上搜索。

1、 说明： 1、颜色值使用 16 进制表示，不需要#前缀， 比如红色：FF0000 2、透明度，有效范围 0100 3、下面的例图是用 2D 柱状图 有需要的时候会引入其他类型的图。 4、布尔类型的值 都用 1 和 0 表示。 1、背景（Background） bgColor=FF0000 bgColor=00FF00 bgColor=FF0000,00FF00 相关属性参数： 1） ：bgColor 设置背景颜色。 （多个颜色则显示为渐变效果） 举例说明（最希望你懂的） ： A: bgColor=FF0000 使用红色背景。 B: bgColor=FF0000,00FF00 使用 红色到绿色的

2、渐变 作为背景。 2） ：bgAlpha 背景透明度，值的个数和颜色值一致。 3） ：bgRatio 各个背景色的比例，值的个数和颜色值一致，总和为 100（颜色渐变时使用该属性） 4） ：bgAngle 背景渐变的方向，0360 ： （颜色渐变时使用该属性） 0 表示从左向右渐变 45 表示从左上角到右下角渐变 90 表示从上向下渐变 180 表示从右向左渐变 360 和 0 一样 表示从左向右渐变 其他角度类推。见下图个角度效果(下图颜色设置为 bgColor=FF0000,00FF00,0000FF) 0 45 90 180 5） ：bgSWF 使用背景图片，可以是图片或者 swf 的

3、flash， 图片必须和图表在同一域名下。 6） ：bgSWFAlpha 背景图片的透明度。 （0 背景图不可见， 100 背景图最清晰） 2、边框（Border） showBorder=1 showBorder=0 相关属性参数： 1） ：showBorder 设置是否显示边框 1：显示 0：不显示 默认值：2D 类图表显示边框， 3D 类图表不显示。 2） ：borderColor 边框颜色。 3） ：borderThickness 边框宽度，单位为像素。 4） ：borderAlpha 边框的透明度。 3、画布（Canvas） canvasBorderColor=0000FF canva

4、sBorderColor=FF0000 canvasbgColor=000000相关属性参数： 1） ：canvasbgColor 画布背景色。 （多个颜色用逗号隔开，表示渐变） 2） ：canvasbgAlpha 画布背景透明度。 3） ：canvasBgRatio 画布背景颜色的比例，总和 100。 （颜色的比例， 渐变时使用） 4） ：canvasBgAngle 画布背景渐变角度，参见 1.4。 5） ：canvasBorderColor 画布边框颜色。 6） ：canvasBorderThickness 画布边框的宽度，单位为像素。 7） ：canvasBorderAlpha 画布边框

5、的透明度。 - 3D 画布属性： 8） ：showCanvasBg 是否显示画布背景。 9） ：showCanvasBase 是否显示画布基座（右下图银灰色部分） 。 showCanvasBase=0 showCanvasBase=1 10） ：canvasBaseDepth 画布基座高度，单位像素。 canvasBaseDepth=40 11） ：canvasBaseDepth 画布背景的厚度，单位像素。 canvasBgDepth=10 4、标题、坐标轴、字体（Titles） canvasBorderColor=0000FF canvasBorderColor=FF0000 canvasb

6、gColor=000000相关属性参数： -标题、坐标轴标题、坐标轴： 1） ：caption 主标题。 2） ：subCaption 子标题。 3） ：xAxisName X 轴名称。 4） ：yAxisName Y 轴名称。 5） ：yAxisMaxValue Y 轴最大值 6） ：yAxisMinValue Y 轴最小值 7） ：setAdaptiveYMin 自动调节 Y 轴最小值 setAdaptiveYMin=1 8） ：rotateYAxisName Y 轴名称水平放置（默认 Y 轴名称为垂直放置） 。 9） ：yAxisNameWidth Y 轴名称宽度。 10） ：showY

7、AxisValues 是否显示 Y 轴值。即上图的 $0 $24 $48 11） ：showLabels 是否显示 X 轴值。 即上图的 Jan Feb Mar Apr -字体字体： 12） ：outCnvbaseFont 画布外字体，对画布外的所有元素起作用。 13） ：outCnvbaseFontSize 画布外字体大小。 14） ：outCnvbaseFontColor 画布外字体颜色。 outCnvbaseFontColor=FF0000 15） ：baseFont 图表上所有文本的字体。 16） ：baseFontSize 图表上所有文本的字体大小。 17） ：baseFontCol

8、or 图表上所有文本的字体颜色。 baseFontColor=0000FF 5、数据区域（Data Plot） 相关属性参数： 1） ：plotGradientColor 渐变色，设置成 则不渐变。 2） ：plotFillRatio 渐变色比例。 3） ：plotFillAlpha 渐变色透明度。 4） ：plotFillAngle 渐变角度 参见 1.4。 5） ：showPlotBorder 是否显示柱子的边框。 （下图 showPlotBorder=0） 6） ：plotBorderDashe 柱子的边框是否用虚线。 7） ：plotBorderDashLen 柱子的边框用虚线,虚线的

9、长度。 8） ：plotBorderDashGap 柱子的边框用虚线,虚线之间的间隔。 9） ：useRoundEdges 是否用圆角矩形和玻璃效果。 10） ：showValues 是否显示数据。 11） ：labelDisplay X 轴标签的显示方式控制 labelDisplay=WRAP labelDisplay=Rotate labelDisplay=Rotate slantLabels=1 labelStep=4 labelDisplay=Stagger labelDisplay=Stagger staggerLines=3 6、数据值（Data Values） 相关属性参数： 1

10、） ：rotateValues 是否垂直显示数值。 2） ：placeValuesInside 是否将数值显示在柱子里面。 rotateValues=1 placeValuesInside=1 7、水平/竖直分割线（Divisional Lines / Vertcal Division Lines） 相关属性参数： -水平水平 1） ：divLineColor 水平分割线的颜色。 2） ：divLineThickness 水平分割线的高度。 3） ：divLineAlpha 水平分割线的透明度。 4） ：divLineIsDashed 水平分割线是否使用虚线。 5)：divLineDashLe

11、n 水平分割线每一小截虚线的长度。 6） ：divLineDashGap 水平分割线之间的间隔。 7） ：showAlternateHGridColor 水平分割线之间的颜色是否交替。 8） ：adjustDiv 是否使用默认水平分割线，默认为使用。 即水平分割线是默认有的。 9） ：numDivLines 在 adjustDiv=0时使用， 水平分割线的条数。 -竖直竖直 10） ：numVDivLines 竖直分割线的条数。 11） ：vDivLineColor 竖直分割线的颜色。 12） ：vDivLineThickness 竖直分割线的高度。 13） ：vDivLineAlpha 竖直

12、分割线的透明度。 14） ：vDivLineIsDashed 竖直分割线是否使用虚线。 15)：vDivLineDashLen 竖直分割线每一小截虚线的长度。 16） ：vDivLineDashGap 竖直分割线之间的间隔。 17): showAlternateVGridColor 竖直分割线之间的颜色是否交替。 18） ：alternateVGridColor 竖直分割线之间的颜色。 19） ：alternateVGridAlpha 竖直分割线之间颜色的透明度。 8、水平面（Zero Plane） 相关属性参数： -2D 1） ：zeroPlaneColor 水平面的颜色。 2） ：zero

13、PlaneThickness 水平面的厚度。 3） ：zeroPlaneAlpha 水平面的透明度。 -3D 4） ：zeroPlaneColor 水平面的颜色。 5） ：zeroPlaneAlpha 水平面的透明度。 6） ：zeroPlaneShowBorder 水平面边框是否显示。 7） ：zeroPlaneBorderColor 水平面的边框颜色 zeroPlaneAlpha=0 zeroPlaneColor=000000 zeroPlaneBorderColor=0000FF 9、趋势线和区域（Trend lines & Zones） 趋势线 趋势区域 相关属性参数： 1） ：sta

14、rtValue 趋势线、趋势区域的起始值。 2） ：endValue 趋势区域的结束值。配合 isTrendZone=1时使用。此时是趋势区域。 3） ：color 趋势线、趋势区域的颜色。 4） ：isTrendZone 是否是趋势区域。 5） ：Displayvalue 趋势线、趋势区域名称。 6） ：toolText 趋势线、趋势区域鼠标悬停提示信息。 7） ：thickness 趋势线线的宽度。 8） ：alpha 趋势线、趋势区域的透明度。 例图如下： 10、锚点（Anchors） anchorRadius=8 anchorSides=4 相关属性参数： 1） ：anchorSide

15、s 锚点边的条数。默认为圆形。 2） ：anchorRadius 锚点半径，单位为像素。 3） ：anchorBorderColor 锚点边框颜色。 4） ：anchorBorderThickness 锚点边框厚度。 5） ：anchorBgColor 锚点背景色。 6） ：anchorAlpha 锚点透明度。 7） ：anchorBgAlpha 锚点背景透明度。 8） ：drawAnchors 是否绘制锚点。 11、提示信息（Tool Tip） 即鼠标悬停在锚点或者柱子上的提示信息。 相关属性参数： 1） ：showToolTip 是否显示 ToolTip。 2） ：showToolTipS

16、hadow 是否显示 ToolTip 阴影。 3） ：toolTipBorderColor ToolTip 边框颜色。 4） ：toolTipBgColor ToolTip 背景颜色 说明：如果需要在 tool tip 中需要换行 则 使用 br。 tooltext 为数据的属性。 tooltext=John MillerbrScore: 420brRank:2 12、内外边距（Padding Margins） 相关属性参数： 1） ：chartLeftMargin 说明见下图。 2） ：chartRightMargin 说明见下图。 3） ：chartTopMargin 说明见下图。 4）

17、：chartBottomMargin 说明见下图。 5） ：captionPadding 说明见下图。 6） ：xAxisNamePadding 说明见下图。 7） ：yAxisNamePadding 说明见下图。 8） ：yAxisValuesPadding 说明见下图。 9） ：labelPadding 说明见下图。 10） ：valuePadding 说明见下图。 11） ：canvasPadding 说明见下图。 13、竖直分隔线（Vertical Separator Lines） 在数据集中使用： 相关属性参数： 1） ：linePosition 线的位置，默认在前后两个值的中间，设

18、为 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, center or right

19、) labelHAlign=left labelHAlign=right 6） ：labelVAlign 标签垂直对齐方式。 （top, middle or bottom） 7） ：color 线的颜色。 8） ：thickness 线的宽度。 9） ：alpha 线的透明度。 10） ：dashed 是否使用虚线。 11） ：dashLen 虚线每一截的长度。 12） ：dashGap 两截虚线间的间隔。 labelPosition=0.7 dashed=1 dashGap=5 thickness=4 14、智能标签和线（Smart Labels & Lines） 相关属性参数： 1） ：e

20、nableSmartLabels 是否启用智能标签。 2)：smartLineColor 智能标签的线的颜色。 3） ：smartLineThickness 智能标签的线的宽度。 4） ：smartLineAlpha 智能标签的线的透明度。 5） ：isSmartLineSlanted 智能标签的线是否倾斜，0：直角， 1：倾斜。 isSmartLineSlanted=1 isSmartLineSlanted=0 6） ：labelDistance 标签到饼图的距离。 7） ：smartLabelClearance 标签到图表的净距离。 测试结果不明显，原文如下，请参考。 Attribute

21、Name Range Description labelDistance In Pixels This attribute helps to set the distance of the label/value text boxes from the pie/doughnut edge. smartLabelClearance In Pixels Clearance distance of a label (for sliced-in pies) from adjacent sliced out pies. 8） ：showPercentValues 是否显示各个饼块的百分比。 9） ：sk

22、ipOverlapLabels 是否隐藏被覆盖的标签。当数据较多的时候标签太多，有的标签会呗覆盖，如果设置为 1 则会隐藏比例最小的标签。 15、图例（Legend） 相关属性参数： 1） ：reverseLegend 是否将图例里的顺序倒置。 2） ：legendPosition 图例的位置：RIGHT（右侧）和 BOTTOM（底部） 。 legendPosition=RIGHT 3） ：showLegend 是否显示图例。 4） ：legendBgColor 图例背景色。 5） ：legendBgAlpha 图例背景透明度。 6） ：legendBorderColor 图例边框颜色。 7）

23、 ：legendBorderThickness 图例边框线的宽度。 8） ：legendBorderAlpha 图例边框透明度。 9） ：legendShadow 是否显示图例阴影。 10） ：legendScrollBgColor 图例滚动框的背景色。 11） ：legendScrollBarColor 图例滚动条的颜色。 12） ：legendScrollBtnColor 图例滚动按钮的颜色。 图例滚动条 16、数字格式化（Number Formatting） 数字没有格式化的图表。数字没有格式化的图表。 精确到两位小数。精确到两位小数。(见第一列的数据见第一列的数据) decimals=

24、2 相关属性参数： 1） ：decimals 设置保留小数的位数。 2） ：forceDecimals 精度不够的时候是否。 最后一列的末尾的最后一列的末尾的 0 丢失。丢失。 末尾添末尾添 0， forceDecimals=1 3） ：formatNumberScale 是否格式化精度。默认为格式化。 1000-1K 1000K-1M 1000M-1B 4） ：formatNumber 整数部分每 3 位是否用逗号分隔。 默认为分隔。 5） ：decimalSeparator 整数和小数部分分隔符号。 6） ：thousandSeparator 整数部分每 3 位分隔符号。 7） ：numb

25、erPrefix 数字前缀。 8） ：numberSuffix 数字后缀。 说明前缀和后缀如果要使用%等符号时 需要用 URL 编码值 % - %25 9） ：yAxisValueDecimals Y 轴数值的精度。 （此属性需要在 adjustDiv=0时使用。 ） adjustDiv=0 numDivLines=3 yAxisValueDecimals=2 17、数字进制（Number Scaling） numberScaleValue=1000,1000,1000 numberScaleUnit=K,M,B (默认进制和单位) 相关属性参数： 1） ：numberScaleValue 数

26、值进制的值。 2） ：numberScaleUnit 数值进制的单位。 3） ：defaultNumberScale 默认数值的单位。 举例说明： 时间换算： defaultNumberScale=s numberScaleValue=60,60,24,7 numberScaleUnit=min,hr,day,wk 存储单位换算： defaultNumberScale=bits numberScaleValue=8,1024,1024,1024,1024 numberScaleUnit=bytes,KB,MB,GB,TB 长度换算: defaultNumberScale=inches numb

27、erScaleValue=12,3,1760 numberScaleUnit=feet,yards,miles 18、3D 相关参数（3D Chart Attributes） (3D 效果比较复杂，没有仔细看，需要用的自己看原文) The 3D Combination chart is a true 3D chart, which offers features like viewing from a specific camera angle, definition of light source, use of dynamic lighting, rotation etc. In this

28、 section, we will explain how to set these options using XML attributes. The various elements of a 3D Combination chart are shown below: 3D Animation By default, the 3D chart is rendered with a default animation. If you wish not to show the initial plot animation, you can set animate3D attribute to

29、0. To globally set off all animation use animation=0. This would not only set off 3D animations, but also disable all animations applied using . The additional use of animate3D can override this value. Hence, a combination of animation=0 and animate3D=1 would disable all animations applied using but

30、, enable animation of the 3D canvas. Again, animation=1 and animate3D=0 would enable all animations applied using but disable animation of 3D canvas. This setting would also disable chart canvas rotation while using JavaScript API functions like view2D(), resetView(),and rotateView(). The view would

31、 be updated instantly without any rotation or animation. There is another attribute, exeTime, which influences the time that the chart takes to animate. It sets the time in seconds (can accept decimals) taken by the 3D elements of the chart to animate when the chart is rendered initially. This attri

32、bute also sets the time taken by the chart canvas to animate when the chart is transformed to any view (View3D, View 2D, Reset View) using context menu (right click menu). This is also applicable while using JavaScript APIs - view2D(), resetView(),and rotateView(). Specifying camera angles Since thi

33、s is a true 3D chart, it is rendered as a 3D model that is viewed from a specific camera angle. The camera can simply be defined as the eye of a real viewer. When you have set animate3D to 0, you can define the camera angle using two attributes - cameraAngX and cameraAngY. When you use animation, yo

34、u can also set up the starting camera view from which the camera view starts animating, and the final camera view to which the chart would finally be rotated. For this, you need to use startAngX, startAng, endAngX, and endAngY attributes. Angle values for both sets (cameraAngY, cameraAngY, and endAn

35、gX, endAngY) are same. Camera Angle definitions: (when animate3D=0) Attribute Range Description cameraAngX 0 to 360/0 to -360 cameraAngX attribute lets you specify the camera angle (for view around the chart vertically) from which the chart is viewed initially in no animation mode. If not specified,

36、 the default value is 30. cameraAngY 0 to 360/0 to -360 cameraAngY attribute lets you specify the camera angle (for view around the chart horizontally) from which the chart is viewed initially in no animation mode. If not specified, the default value is -45. Camera angle definitions: (when animate3D

37、=1) Attribute Range Description startAngX 0 to 360/0 to -360 This attribute lets you specify the view angle (for view around the chart vertically) at which rotation of the chart starts (when the chart is initialized). The rotation stops at endAngX. If not specified, the default values for both the a

38、ttributes are 30. endAngX 0 to 360/0 to -360 This attribute lets you specify the view angle (for view around the chart vertically) at which rotation of the chart ends (when the chart is initialized). The rotation starts at startAngX. If not specified, the default values for both the attributes are 3

39、0. startAngY 0 to 360/0 to -360 This attribute lets you specify the view angle (for view around the chart horizontally) from which rotation of the chart starts (when the chart is initialized). The rotation stops at endAngY. If not specified, the default values for both the attributes are -45. endAng

40、Y 0 to 360/0 to -360 This attribute lets you specify the view angle (for view around the chart horizontally) at which rotation of the chart ends (when the chart is initialized). The rotation starts at startAngY. If not specified, the default values for both the attributes are -45. cameraAngY/startAn

41、gY/endAngY The picture below shows a rotational motion (the curved arrows) horizontally around the chart. When the chart is viewed from the front, Y angle is 0. From this position, when the camera moves towards the right face of the chart, camera Y angle increases with positive values. When Y angle

42、is 90, the camera views the right face of the chart. When Y angle is set to 180, the camera views the back face of the chart. The camera returns to zero angle position when a complete rotation of 360 is made. From zero position again, when camera moves towards the left face of the chart, Y angle inc

43、reases with negative values. Y angle would be equal to -90 when the camera exactly faces the left face of the chart. Similarly, Y angle would be -180 when the camera comes in front of the charts back face, and -360 when camera returns to the zero position. cameraAngX/startAngX/endAngX The picture be

44、low shows a rotational motion (the curved arrows) vertically around the chart. When the chart is viewed from the front, X angle is 0. From this position, when the camera moves towards the right face of the chart, camera X angle increases with positive values. When X angle is 90, the camera views the

45、 right face of the chart. When X angle is set to 180, the camera views the back face of the chart. The camera returns to zero angle position when a complete rotation of 360 is made. From zero position again, when camera moves towards the left face of the chart, X angle increases with negative values

46、. X angle would be equal to -90 when the camera exactly faces the left face of the chart. Similarly, X angle would be -180 when the camera comes in front of the charts back face and -360 when camera returns to the zero position. Shown below are the charts with specified custom angles. For example, i

47、f you set endAngX = 10 and endAngY=60, the chart will look like the following image. Same view would be shown when animate3D=0 and cameraAngX = 10 and cameraAngY=60. Likewise, if you set endAngY=-160 and endAngX=190, the chart will look similar to the image shown below. Same view would be shown when

48、 animate3D=0 and cameraAngX = -160 and cameraAngY=190. Please note that the default value for cameraAngX/startAngX/endAngX is 30 and the default value for cameraAngY/starAngY/endAngY is -45. Applying dynamic shading The Combination 3D Chart has two lighting systems using which, the chart elements ar

49、e lighted up. The light source may be fixed outside the chart, or you might address it as Chart World. This causes only those sides of the chart to get the light, which face the light source. Thus, when the chart is manually rotated, dynamic shades are created on the chart surfaces. This system of l

50、ighting system is called Dynamic shading. Another type of lighting system is there where the light source is fixed with the chart. You may call it world lighting. In this case, the light source rotates with the rotation of the chart. Hence, the surface facing the light source gets lightened and cont

51、inues to be in the bright side despite any manual rotation of the chart being made, whereas the surface not facing the light keeps remaining in darkness with every chart rotation. By default, the chart is set in world mode. However, the dynamicShading attribute lets you decide whether to keep the ch

52、art in world mode or non-world mode. If you set dynamicShading to 1, the chart will be in dynamic shading/non-world mode. XML Example: Lets compare the following two charts: one with dynamicShading=0 and the other with dynamicShading=1. Initially, there is no difference between the two charts. The c

53、harts are rendered in the same way. Same surfaces of both the charts are facing the light source. (From a particular point of view, the two charts are looking same after being rendered, although the left one is in world mode and the right one is in non-world. Note that the reference viewpoint will b

54、e same in all the cases discussed below. ) dynamicShading=0 dynamicShading=1 Shown below are the compared sequence of the two charts, manually rotated by same angles. dynamicShading=0 dynamicShading=1 Notice, that for both the charts the light source is somewhere near the top right corner of the cha

55、rt center. In case of the chart with dynamicShading=1 (charts on the right hand side), the light source is fixed in that place. It keeps on lighting up the chart surfaces in front of it. On the other hand, the left chart, with dynamicShading=0, keeps the remaining in darkness when any rotation occur

56、s. Setting light source angles In the simulated 3D world of the chart, you can specify the light source w.r.t the chart world coordinate system. You can do this using the following attributes. Attribute Range Description lightAngX 0 to 360/ 0 to -360 Using this, you can specify the angular position

57、of the light source (for X-axis) w.r.t the chart world coordinate system. lightAngY 0 to 360/ 0 to -360 This attribute allows you to specify the angular position of the light source (for Y-axis) w.r.t the chart world coordinate system. The values of lightAngX and lightAngY are same as cameraAngX/sta

58、rtAngX/endAngX and cameraAngY/startAngY/endAngY, as discussed earlier in this section i.e., Specifying Camera Angles section. To get a clear picture, let us go through a visual tour and see how the light source can be placed using X and Y angles. The following three images shows how a chart will loo

59、k with different light angle definitions: XML Example: XML Example: XML Example: XML Example: Using bright2D option bright2D attribute provides maximum brightness to the chart while being rendered in 2D mode. This is applicable only when youve set dynamicShading to 1. However, once you set this attr

60、ibute to 1, it wont allow you to use lightAngX and lightAngY attributes. Rather, it automatically sets up the light sources to give the brightest view of the chart in 2D mode. XML Example: Controlling light intensity You can control the intensity of the light that falls on the chart elements. The in

61、tensity attribute will enable you to do so. The range of this attribute lies between 0 to 10. 10 would provide light with maximum intensity, and you will get the brightest view of the chart. If you set the value to 0, light will be provided with least intensity. However, the chart will never appear

62、in full darkness even you set intensity to 0. A faint light is always made available. By default, the value is set to 2.5. XML Example: If you set intensity=10, i.e., to the maximum, the chart rendered will look like: Setting the wall depth 3D chart has 3 walls namely, XY, YZ, and XZ. You can set th

63、e depth of the chart walls using the following set of attributes. Attribute Description YZWallDepth It determines the depth of the YZ wall of 3D chart. ZXWallDepth It determines the depth of the ZX wall of 3D chart. XYWallDepth It determines the depth of the XY wall of 3D chart. XML Example: If you

64、specify the values given in the above XML example, the chart will look like: If all the attributes are set to 0, the chart will look like: You can see above that each wall is looking like a thin plane. Maintaining a gap between two different dataplots In a 3D combination chart, more than one DATAPLO

65、T types exist due to different datasets. Therefore, to get a distinct view of all the plotted datasets you may want to specify a gap between them. The zGapPlot attribute will let you do so. XML Example: If you assign a value to zGapPlot, a gap between the plotted datasets will be created. For exampl

66、e, if you set zGapPlot=100, the chart will look like: On the other hand, if you assign 0 to zGapPlot, the chart will take the following shape, with no gap between the dataplots: 3D thickness of the DATAPLOT objects You can set the depth (3D thickness) of each DATAPLOT object using zDepth attribute.

67、XML Example: Shown below is a chart with each dataplots thickness value equals to 75. Setting the mode of the chart column In a Combination 3D chart, you can plot multiple number of datasets, which can be rendered as Column. These column sets can be arranged in the chart in 2 modes: clustered or man

68、hattan. The clustered attribute lets you choose any one of them. By default, the value of clustered is 0, i.e. the chart appears in non-clustered mode. To change the mode to clustered mode, you need to set clustered=1. XML Example: If clustered is set to 1, the chart columns will be in clustered mod

69、e. This image below shows a chart in clustered mode: On the other hand, if clustered is set to 0, the chart columns will appear in manhattan mode, as shown in the image below: Applying effect to divisional lines and trendlines You can apply emboss or bevel effect to both divisional lines and trendli

70、nes. The divLineEffect attribute lets you do this. You can specify one of the three values: EMBOSS, BEVEL or NONE. XML Example: or or Zero Plane settings The following attributes lets you configure the zero plane settings. Attribute Description zeroPlaneColor Color for the Zero Plane. Zero Plane is

71、the line/plane that appears at 0 y-position on canvas, when negative data is being shown on the chart. zeroPlaneAlpha Alpha of zero plane. (Value Range 0-100) zeroPlaneMesh Whether to draw a mesh or not. If set to 1, a mesh on the zero plane of the chart will be drawn. By default, a gray mesh is sho

72、wn as zero plane. If you set zeroPlaneMesh to 0, the chart will have a non-meshed plane as shown below: XML Example: You can set a color to zero plane using zeroPlaneColor attribute. For example, if you set zeroPlaneColor=330099, the chart looks: XML Example: You can change the alpha of zero plane u

73、sing zeroPlaneAlpha attribute. XML Example: Border around the dataplots You can set border around the dataplots. This improves the data interpretation quality of the chart. The showPlotBorder attribute lets you decide whether to draw a border or not. By default, dataplot borders are drawn. XML Examp

74、le: The difference between a chart with and without dataplot border is shown below. If showPlotBorder is set to 1, the chart will look similar to the one shown below: On the other hand, if showPlotBorder is set to 0, the chart will look similar to the one shown below: Rendering as a 2D chart You can

75、 render a combination 3D chart as a 2D chart initially. You need to use is2D attribute for this. XML Example: As shown below, if is2D is set to 1, a 2D chart will get rendered initially. Chart on top The chart area can overlap the extra chart elements (caption, sub-caption, and legend) at the time o

76、f scaling (zooming) or at 100% view. If you set chartOnTop attribute to 1 the chart area would be placed above these elements. On the other hand, if you set chartOnTop to 0, caption, sub-caption and legend would always appear on the top of the chart. XML Example: As shown below, the chart area overs

77、hadows the extra chart elements when you zoom in using the mouse scroller. This is possible only if you set chartOnTop to 1. On the other hand, if chartOnTop is set to 0, the chart will look similar to the one shown below: As shown above, the chart area now goes under the extra chart elements. Creat

78、ing label gap To improve charts visibility you may want to create a gap (vertical space) between the X-axis and X-axis labels. Similarly, you might need to specify gaps between Y-axis & Y-axis values. The following two attributes lets you do the same. Attribute Description xLabelGap Creates a vertic

79、al space between the X-Axis and X-Axis labels yLabelGap Creates a horizontal space between the Y-Axis and Y-Axis values XML Example: Now, for example, if you set xGapLabel=50, the X-Axis labels would maintain a gap of 50 from the X-Axis, as shown in the image below: Similarly, if you set yGapLabel=5

80、0, the chart will create a gap of 50 between the Y-Axis values and the Y-Axis. The gap would look like the figure shown below: 附件 （官方参数说明原文） 1) -数据集映射： 依次为： Single Series Data Multi-Series Data XY Plot ArrayCollection XMLList Model 2) -参数： element Attributes Attribute Name Type Range Description ani

81、mation Boolean 0/1 This attribute lets you set the configuration whether the chart should appear in an animated fashion. If you do not want to animate any part of the chart, set this as 0. palette Number 1-5 FusionCharts v3 introduces the concept of Color Palettes. Each chart has 5 pre-defined color

82、 palettes which you can choose from. Each palette renders the chart in a different color theme. Valid values are 1-5. paletteColors String List of hex color codes separated by comma While the palette attribute allows to select a palette theme that applies to chart background, canvas, font and tool-t

83、ips, it does not change the colors of data items (i.e., column, line, pie etc.). Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., . The chart will cycle through the list of specified colors and th

84、en render the data plot accordingly. To use the same set of colors throughout all your charts in a web application, you can store the list of palette colors in your application globally and then provide the same in each chart XML. showAboutMenuItem Boolean 0/1 Setting this to 1 shows up a custom con

85、text menu in the chart, which can be customized to show your text and can be linked to your URL. For e.g., you can set the context menu of the chart to include About your company name and then link to your company home page. By default, the chart shows About FusionCharts when right clicked. aboutMen

86、uItemLabel String The menu item label for the custom context menu item. aboutMenuItemLink String URL Link for the custom context menu item. You can specify the link in FusionCharts link format to be able to open the same in new window, pop-ups, frames or as JavaScript links. showLabels Boolean 0/1 I

87、t sets the configuration whether the x-axis labels will be displayed or not. labelDisplay String WRAP, STAGGER, ROTATE or NONE Using this attribute, you can control how your data labels (x-axis labels) would appear on the chart. There are 4 options: WRAP, STAGGER, ROTATE or NONE. WRAP wraps the labe

88、l text if its longer than the allotted area. ROTATE rotates the label in vertical or slanted position. STAGGER divides the labels into multiple lines. rotateLabels Boolean 0/1 This attribute lets you set whether the data labels would show up as rotated labels on the chart. slantLabels Boolean 0/1 If

89、 youve opted to show rotated labels on chart, this attribute lets you set the configuration whether the labels would show as slanted labels or fully vertical ones. labelStep Number 1 or above By default, all the labels are displayed on the chart. However, if youve a set of streaming data (like name

90、of months or days of week), you can opt to hide every n-th label for better clarity. This attributes just lets you do so. It allows to skip every n(th) X-axis label. staggerLines Number 2 or above If youve opted for STAGGER mode as labelDisplay, using this attribute you can control how many lines to

91、 stagger the label to. By default, all labels are displayed in a single line. showValues Boolean 0/1 Sets the configuration whether data values would be displayed along with the data plot on chart. rotateValues Boolean 0/1 If youve opted to show data values, you can rotate them using this attribute.

92、 placeValuesInside Boolean 0/1 If youve opted to show data values, you can show them inside the columns using this attribute. By default, the data values show outside the column. showYAxisValues Boolean 0/1 FusionCharts y-axis is divided into vertical sections using div (divisional) lines. Each div

93、line assumes a value based on its position. Using this attribute you can set whether to show those div line (y-axis) values or not. showLimits Boolean 0/1 Whether to show chart limit values? showYAxisValues is the single new attribute in v3 which over-rides this value. showDivLineValues Boolean 0/1

94、Whether to show div line values? showYAxisValues is the single new attribute in v3 which over-rides this value. yAxisValuesStep Number 1 or above By default, all div lines show their values. However, you can opt to skip every x(th) div line value using this attribute. showShadow Boolean 0/1 Whether

95、to show column shadows? adjustDiv Boolean 0/1 FusionCharts automatically tries to adjust divisional lines and limit values based on the data provided. However, if you want to set your explicit lower and upper limit values and number of divisional lines, first set this attribute to false. That would

96、disable automatic adjustment of divisional lines. rotateYAxisName Boolean 0/1 If you do not wish to rotate y-axis name, set this as 0. It specifically comes to use when youve special characters (UTF8) in your y-axis name that do not show up in rotated mode. yAxisNameWidth Number (In Pixels) If you o

97、pt to not rotate y-axis name, you can choose a maximum width that will be applied to y-axis name. clickURL String The entire chart can now act as a hotspot. Use this URL to define the hotspot link for the chart. The link can be specified in FusionCharts Link Format. maxColWidth Number In Pixels Maxi

98、mum allowed column width use3DLighting Boolean 0/1 Whether to use advanced gradients and shadow effects to create better looking 3D charts? defaultAnimation Boolean 0/1 By default, each chart animates some of its elements. If you wish to switch off the default animation patterns, you can set this at

99、tribute to 0. It can be particularly useful when you want to define your own animation patterns using STYLE feature. yAxisMinValue Number This attribute helps you explicitly set the lower limit of the chart. If you dont specify this value, it is automatically calculated by FusionCharts based on the

100、data provided by you. yAxisMaxValue Number This attribute helps you explicitly set the upper limit of the chart. If you dont specify this value, it is automatically calculated by FusionCharts based on the data provided by you. setAdaptiveYMin Boolean 0/1 This attribute lets you set whether the y-axi

101、s lower limit would be 0 (in case of all positive values on chart) or should the y-axis lower limit adapt itself to a different figure based on values provided to the chart. Chart Titles and Axis Names Attribute Name Type Description caption String Caption of the chart. subCaption String Sub-caption

102、 of the chart. xAxisName String X-Axis Title of the Chart. yAxisName String Y-Axis Title of the chart. Chart Cosmetics Attribute Name Type Range Description bgColor Color This attribute sets the background color for the chart. You can set any hex color code as the value of this attribute. To specify

103、 a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: FF5904,FFFFFF. Remember to remove # and any spaces in between. See the gradient specification page for more details. bgAlpha Number 0-100 Sets the alpha (transparency) for the background

104、. If youve opted for gradient background, you need to set a list of alpha(s) separated by comma. See the gradient specification page for more details. bgRatio Number 0-100 If youve opted for a gradient background, this attribute lets you set the ratio of each color constituent. See the gradient spec

105、ification page for more details. bgAngle Number 0-360 Angle of the background color, in case of a gradient. See the gradient specification page for more details. bgSWF String To place any Flash movie as background of the chart, enter the (path and) name of the background SWF. It should be in the sam

106、e domain as the chart. bgSWFAlpha Number 0-100 Helps you specify alpha for the loaded background SWF. canvasBgColor Color Sets Canvas background color. canvasBgAlpha Number Sets alpha for Canvas Background. canvasBaseColor Color Helps you specify the color for canvas base. showCanvasBg Boolean Wheth

107、er to show canvas background? showCanvasBase Boolean Whether to show canvas base? canvasBaseDepth Number In Pixels Height of canvas base (in pixels) canvasBgDepth Number In Pixels Depth of Canvas Background showBorder Boolean 0/1 Whether to show a border around the chart or not? borderColor Color Bo

108、rder color of the chart. borderThickness Number In Pixels Border thickness of the chart. borderAlpha Number 0-100 Border alpha of the chart. canvasBorderColor Color Lets you specify canvas border color. canvasBorderThickness Number 0-5 Lets you specify canvas border thickness. canvasBorderAlpha Numb

109、er 0-100 Lets you control transparency of canvas border. showVLineLabelBorder Boolean 0/1 If youve opted to show a label for any of your vLines in the chart, you can collectively configure whether to show border for all such labels using this attribute. If you want to show label border for just a pa

110、rticular vLine, you can over-ride this value by specifying border configuration for that specific vLine. logoURL String URL You can load an external logo (JPEG/PNG/SWF) on the chart once it has rendered. This attribute lets you specify the URL of the same. Owing to Flash Player security settings, yo

111、u can only specify logo that are on the sub-domain as the SWF file of the chart. logoPosition String TL, TR, BL, BR, CC Where to position the logo on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen logoAlpha Number 0-100 Once the logo has loaded on th

112、e chart, you can configure its opacity using this atribute. logoScale Number 0-300 You can also change the scale of externally loaded logo at run-time by specifying a value for this parameter. logoLink String URL If you want to link the logo to an external URL, specify the link in this attribute. Th

113、e link can be in FusionCharts link format, allowing you to link to new windows, pop-ups, frames etc. Data Plot Cosmetics Attribute Name Type Range Description showPlotBorder Boolean 0/1 Whether the column, area, pie etc. border would show up. plotBorderColor Color Color for column, area, pie border

114、plotBorderAlpha Number 0-100 Alpha for column, area, pie border plotFillAlpha Number 0-100 If youve opted to fill the plot (column, area etc.) as gradient, this attribute lets you set the fill alpha for gradient. overlapColumns Boolean Whether to overlap columns over each other to give a richer 3D l

115、ook? If there are too many columns on the chart, it will automatically overlap. Divisional Lines & Grids Attribute Name Type Range Description numDivLines Number Numeric value 0 Number of horizontal axis division lines that you want on the chart. divLineColor Color Color for divisional lines divLine

116、Thickness Number 1-5 Thickness of divisional lines divLineAlpha Number 0-100 Alpha of divisional lines. divLineIsDashed Boolean 0/1 Whether the divisional lines should display as dash? divLineDashLen Number In Pixels If the divisional lines are to be displayed as dash, this attribute lets you contro

117、l the length of each dash. divLineDashGap Number In Pixels If the divisional lines are to be displayed as dash, this attribute lets you control the length of gaps between the dash. zeroPlaneColor Color Color for the Zero Plane. Zero Plane is the line/plane that appears at 0 y-position on canvas, whe

118、n negative data is being shown on the chart. zeroPlaneAlpha Number 0-100 Alpha of zero plane. zeroPlaneShowBorder Boolean Whether to show border of zero plane? zeroPlaneBorderColor Color Sets the border color of zero plane. Number Formatting Attribute Name Type Range Description formatNumber Boolean

119、 0/1 This configuration determines whether the numbers displayed on the chart will be formatted using commas, e.g., 40,000 if formatNumber=1 and 40000 if formatNumber=0 formatNumberScale Boolean 0/1 Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding

120、 it - e.g., if formatNumberScale is set to 1, 1043 would become 1.04K (with decimals set to 2 places). Same with numbers in millions - a M will added at the end. For more details, please see Advanced Number Formatting section. defaultNumberScale String The default unit of the numbers that youre prov

121、iding to the chart. For more details, please see Advanced Number Formatting section. numberScaleUnit String Unit of each block of the scale. For more details, please see Advanced Number Formatting section. numberScaleValue String Range of the various blocks that constitute the scale. For more detail

122、s, please see Advanced Number Formatting section. numberPrefix String Character Using this attribute, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this attribute to $ to show like $40000, $50000. For more d

123、etails, please see Advanced Number Formatting section. numberSuffix String Character Using this attribute, you could add suffix to all the numbers visible on the graph. For example, to represent all figure quantified as per annum on the chart, you could specify this attribute to /a to show like 4000

124、0/a, 50000/a. For more details, please see Advanced Number Formatting section. decimalSeparator String Character This option helps you specify the character to be used as the decimal separator in a number. thousandSeparator String Character This option helps you specify the character to be used as t

125、he thousands separator in a number. inDecimalSeparator String Character In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionCharts accepts the input decimal and thousa

126、nd separator from user, so that it can covert it accordingly into the required format. This attribute lets you input the decimal separator. For more details, please see Advanced Number Formatting section. inThousandSeparator String Character In some countries, commas are used as decimal separators a

127、nd dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionCharts accepts the input decimal and thousand separator from user, so that it can covert it accordingly into the required format. This attribute lets you input the thousand

128、separator. For more details, please see Advanced Number Formatting section. decimals Number 0-10 Number of decimal places to which all numbers on the chart would be rounded to. forceDecimals Boolean 0-1 Whether to add 0 padding at the end of decimal numbers? For example, if you set decimals as 2 and

129、 a number is 23.4. If forceDecimals is set to 1, FusionCharts will convert the number to 23.40 (note the extra 0 at the end) yAxisValueDecimals Number 0-10 If youve opted to not adjust div lines, you can specify the div line values decimal precision using this attribute. Font Properties Attribute Na

130、me Type Range Description baseFont String Font Name This attribute lets you set the font face (family) of all the text (data labels, values etc.) on chart. If you specify outCnvBaseFont attribute also, then this attribute controls only the font face of text within the chart canvas bounds. baseFontSi

131、ze Number 0-72 This attribute sets the base font size of the chart i.e., all the values and the names in the chart which lie on the canvas will be displayed using the font size provided here. baseFontColor Color This attribute sets the base font color of the chart i.e., all the values and the names

132、in the chart which lie on the canvas will be displayed using the font color provided here. outCnvBaseFont String Font Name This attribute sets the base font family of the chart font which lies outside the canvas i.e., all the values and the names in the chart which lie outside the canvas will be dis

133、played using the font name provided here. outCnvBaseFontSize Number 0-72 This attribute sets the base font size of the chart i.e., all the values and the names in the chart which lie outside the canvas will be displayed using the font size provided here. outCnvBaseFontColor Color This attribute sets

134、 the base font color of the chart i.e., all the values and the names in the chart which lie outside the canvas will be displayed using the font color provided here. Tool-tip Attribute Name Type Range Description showToolTip Boolean 0/1 Whether to show tool tip on chart? toolTipBgColor Color Backgrou

135、nd Color for tool tip. toolTipBorderColor Color Border Color for tool tip. toolTipSepChar String The character specified as the value of this attribute separates the name and value displayed in tool tip. showToolTipShadow Boolean 0/1 Whether to show shadow for tool-tips on the chart. Chart Padding &

136、 Margins Attribute Name Type Range Description captionPadding Number In Pixels This attribute lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither capti

137、on, nor sub-caption is defined, this padding does not come into play. xAxisNamePadding Number In Pixels Using this, you can set the distance between the top end of x-axis title and the bottom end of data labels (or canvas, if data labels are not to be shown). yAxisNamePadding Number In Pixels Using

138、this, you can set the distance between the right end of y-axis title and the start of y-axis values (or canvas, if the y-axis values are not to be shown). yAxisValuesPadding Number In Pixels This attribute helps you set the horizontal space between the canvas left edge and the y-axis values or trend

139、 line values (on left/right side). This is particularly useful, when you want more space between your canvas and y-axis values. labelPadding Number In Pixels This attribute sets the vertical space between the labels and canvas bottom edge. If you want more space between the canvas and the x-axis lab

140、els, you can use this attribute to control it. valuePadding Number In Pixels It sets the vertical space between the end of columns and start of value textboxes. This basically helps you control the space you want between your columns/anchors and the value textboxes. plotSpacePercent Number 0-80 (In

141、Percent) On a column chart, there is spacing defined between two columns. By default, the spacing is set to 20% of canvas width. If you intend to increase or decrease the spacing between columns, you can do so using this attribute. For example, if you wanted all columns to stick to each other withou

142、t any space in between, you can set plotSpacePercent to 0. Similarly, if you want very thin columns, you can set plotSpacePercent to its max value of 80. chartLeftMargin Number In Pixels Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space. cha

143、rtRightMargin Number In Pixels Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space. chartTopMargin Number In Pixels Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space. chartBottomMargin Numb

144、er In Pixels Amount of empty space that you want to put on the bottom of your chart. Nothing is rendered in this space. canvasPadding Number In Pixels Allows you to set empty space on the left and right side of columns on the chart canvas element Attribute Name Type Range Description label String Th

145、is attribute determines the label for the data item. The label appears on the x-axis of chart. value Number Numerical value for the data item. This value would be plotted on the chart. displayValue String If instead of the numerical value of this data, you wish to display a custom string value, you

146、can specify the same here. Examples are annotation for a data item etc. color Color Hex Code If you want to define your own colors for the data items on chart, use this attribute to specify color for the data item. This attribute accepts hex color codes without #. link String You can define links fo

147、r individual data items. That enables the end user to click on data items (columns, lines, bars etc.) and drill down to other pages. To define the link for data items, use the link attribute. You can define links that open in same window, new window, pop-up window or frames. Please see Advanced Char

148、ting Drill Down Charts for more information. Also, youll need to URL Encode all the special characters (like ? and &) present in the link. toolText String By default, FusionCharts shows the data item name and value as tool tip text for that data item. But, if you want to display more information for

149、 the data item as tool tip, you can use this attribute to specify the same. showLabel Boolean 0/1 You can individually opt to show/hide labels of individual data items using this attribute. showValue Boolean 0/1 You can individually opt to show/hide values of individual data items using this attribu

150、te. alpha Number 0-100 This attribute determines the transparency of a data item. The range for this attribute is 0 to 100. 0 means complete transparency (the data item won 抰 be shown on the graph) and 100 means opaque. Vertical data separator lines Attribute Name Type Range Description color Color

151、Hex Color This attribute defines the color of vertical separator line. thickness Number In Pixels Thickness in pixels of the vertical separator line. alpha Number 0-100 Alpha of the vertical separator line. dashed Boolean 0/1 Whether the vertical separator line should appear as dashed? dashLen Numbe

152、r In Pixels If the vertical separator line is to appear as dashed, this attribute defines the length of dash. dashGap Number In Pixels If the vertical separator line is to appear as dashed, this attribute defines the length of dash gap. Trend-lines Attribute Name Type Range Description startValue Nu

153、mber Numeric Value The starting value for the trendline. Say, if you want to plot a slanted trendline from value 102 to 109, the startValue would be 102. endValue Number Numeric Value The ending y-axis value for the trendline. Say, if you want to plot a slanted trendline from value 102 to 109, the e

154、ndValue would be 109. If you do not specify a value for endValue, it would automatically assume the same value as startValue. displayValue String If you want to display a string caption for the trend line by its side, you can use this attribute. Example: displayValue=Last Month High. When you dont s

155、upply this attribute, it automatically takes the value of startValue. color String Hex Code Color of the trend line and its associated text. isTrendZone Boolean 0/1 Whether the trend would display a line, or a zone (filled colored rectangle). thickness Number In Pixels If youve opted to show the tre

156、nd as a line, this attribute lets you define the thickness of trend line. alpha Number 0-100 Alpha of the trend line. dashed Boolean 0/1 If youve opted to show the trend as a line, this attribute lets you define whether the trend line would appear as dashed? dashLen Number In Pixels If youve opted t

157、o show trend line as dash, this attribute lets you control the length of each dash. dashGap Number In Pixels If youve opted to show trend line as dash, this attribute lets you control the length of each dash gap. valueOnRight Boolean 0/1 Whether to show the trend line value on left side or right side of chart? This is particularly useful when the trend line display values on the chart are colliding with divisional lines values on the chart. toolText String Custom tool-text for this trendline/zone.