【转】FusionCharts图表控件中文版使用手册
看法：
三要素：swf、data.xml、承载图表的载体
按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件)
方法一：直接用data.jsp文件替代data.xml文件，写法格式同xml。图表所需的属性直接在里面写死就行，只是所需的横纵坐标的数据调用后台的方法从数据库里面取得。这样就可以省去xmlBuilder这部分代码。
方法二：从后台取数据，然后调用相应的xmlBuiler方法生成所需的xml。项目中已有一些XmlBuilder的方法可供调用。
HTML、JSP等都可以。调用fusionCharts开发方提供的fusioncharts.js里面写的fusionchart方法设置相关的参数直接生产相应的图表，产生一个fusioncharts图表的div节点。但是现在fusionCharts图表还不能直接嵌入到ext框架里面。只能通过iframe嵌入。这样每次刷新的时候都会从新载入。
导出、热点链接
fusionCharts开发方提供了两种方法实现，一种的客户端导出，一种是服务器端导出。建议使用客户端导出，使用开发方提供的服务器端导出的jar包时在IE上会抛出异常，在火狐上图表一般能显示，但在控制器也会抛出异常。开发方写的方法，有一些内部机制，没有完全理解。用服务器端的方法，可以正常使用。
主要应该是数据传递问题。一方面可以直接从data.xml文件里面的link属性设置你要传过来的参数，然后在你要连接的页面用get方法去获取。另一方面可以直接调用后台的方法把xml文件里面的数据以js的形式直接导入到你要连接的页面。
三、重点
1、FusionCharts的三要素
2、xml各属性的应用
fusionCharts的基本知识部分：
一、SWF动画文件
1. SWF文件在目录FusionCharts_Site\Charts下
2. 包括：
1) 单一系列图表（9种）：（数据格式结构可共用，即单一系列的任何一种图表都可以用其他单一系列的图表代替）二维柱状图、三维柱状图、二维饼图、三维饼图、二维线图、二维条形图、二维块图、二维圆环图、三维圆环图。
2) 多序列图（6种）：（主要用于比较，数据格式结构可共用）二维多序列柱状图、三维多序列柱状图、二维多序列线图、二维多序列块图、二维多序列条形图、三维多序列条形图。
3) 堆栈图（6种）：二维堆栈柱状图、三维堆栈柱状图、二维堆栈块图、二维堆栈条形图、三维堆栈条形图、二维堆栈多序列柱状图（除最后一个图，其他的图数据可共享）
4) 联合系列（7种）：（单一系列的图形可以联合使用，在一张图表中显示）
5) 点分布图（2种）：（主要用来描述事件发生的分布情况，数据格式结构可共用）点状图、气泡状图。
6) 带滚动条系列（6种）：多序列图（包括二维柱状图、二维线图、二维块图）、二维堆状柱状图、二维联合图、二维联合双Y轴图。
7) Grid形式（1种）：SSGrid.swf用法同上，可以结合上面的图形，一起使用。注意：grid的形式只支持单一系列图表的数据。
二、XML数据文件
1. XML文件以 <chart>开头，以</chart>结束；或者以<graph>开头，以</graph>结束
2. 属性：（详细见附注）XML标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号）
3. 注意点：
1) 当数字前缀numberPrefix为€、£、₣、¥、¢、%使用dataURL时可直接使用，但是当使用dataXML时需进行相应的编码即%E2%82%AC、%A3、%E2%82%A3、%A5、%A2、%25。
2) 当标题caption含有&在dataXML中要被编码为%26。
3) Fusioncharts不支持<、>号，需编码成<、>
4) 当需要显示“’”时（eg: John’s）使用dataURL时需被编译成'使用dataXML时需被编译成%26apos;
5) 当数据不连续时可以使用connectNullData属性设置是否让其连续显示（不连续点的直接用直线相连，也可以再不连续点的前一属性中设置dashed='1'可以用虚线链接不连续点）
三、HTML（当然也可以使用JSP）嵌入charts文件
1、不使用JS情况：（不推荐使用）
使用<object>和<embed>嵌入swf文件，并设置&dataUrl=data.xml的路径
2、使用JS情况：（推荐使用这种方法嵌入Charts文件）
1) 必须包含fusioncharts.js文件
2) new FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)创建一个fusioncharts对象
3) 用这个对象的setDataURL方法包含data.xml文件或者用这个对象的setDataXML方法包含数据源的xml字符串
四、结合javascript的应用：
1. 前提：置FusionCharts中的registerwithjs为1
2. 事件：
1) FC_Loaded(DOMId)：描述当SWF文件在客户端已经完成下载
2) FC_Rendered(DOMId)：
3) FC_DataRendered(DOMId)：描述当图表数据已经下载到dataxml或者dataURL
4) FC_DataLoadError(DOMId)：描述当从特定的URL下载数据发生错误
5) FC_NoDataToDisplay(DOMId)：描述当下载的xml文件里没有可显示的数据
6) FC_DataXMLInvalid(DOMId)：描述xml格式错误
3. 方法
1) setDataXML(strDataXML:string):改变图表的数据
2) setDataURL(strDataURL:string)：同上
3) print()：打印图表
4) getXML()：返回图表的xml数据
5) getChartAttribute(attrNamr:string)：返回xml <chart>标记的属性
6) hasRendered()：布尔型，标志图表是否已经呈现成功
7) getDataAsCSV()：返回图表的数据位CSV字符型
8) 关于3D图表方面的方法在后面的属性里面有讲
五、热点链接：link=’ ’
四种链接方式：
1. 链接到同一个窗口：link='指定页面%3F参数'
2. 链接到新的窗口：link='n-指定页面%3F参数'
3. 链接到一个指定的frame：link='F-FrameName-指定页面%3F参数'（注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）
4. 链接到一个弹出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
5. 整个图表链接：clickURL='指定路径'
6. 链接到Js ：link="j-function()"
7. Click 事件处理：link='S-parameter'（此方法是整个图表的链接情况）
六、图表数据导出
1. 使用context menu：设置属性showExportDataMenuItem='1'，并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。
2. 使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new FusionCharts("http://www.cnblogs.com/FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然后根据charts节点id获得一个对象，使用var chartObj = getChartFromId("chart1Id")方法。最后从这个对象取出图表里的数据，使用chartObj.getDataAsCSV( ),然后就可以进行你需要的处理了
七、图表导出为pdf或者图片（JPEG和PNG）形式
1、服务器端图表导出
1) 把jar包Builderpath到web app libraries下面
2) 把classes文件发布到web-info下面
3) 在data.xml文件里加入exportEnabled='1'(允许导出)、exportHandler='JSP/FCExporter.jsp'(即处理导出的路径，注意：默认是在跟data.xml在同一个跟目录下面)、还可以设置exportAction（选择导出的图片会到客户端作为下载还是直接保存到服务器）、exportAtClient（选择是选择客户端导出还是选择服务器端导出）等属性
4) 把FCExporter.jsp、FCExporterError.jsp放在web工程下面（注意：FCExporter.jsp里WEB_ROOT_PATH的路径，默认情况是Resources文件直接放在web工程下的，若将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径
5) 处理流程：data.xml中指明exportHandler路径。触发导出时转向exportHandler所指向的路径FCExporter.jsp，在FCExporter.jsp中调用FusionChartsExportHelper.class中的HttpServletRequest类将data.xml中的数据以流的形式传进来，将charts的宽度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向resource下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）
2、客户端图表导出
1) 包含FusionChartsExportComponent.js文件
2) 包含FCExporter.swf文件
3) 设置xml文件里的一下属性：exportEnabled='1'（允许导出） exportAtClient='1'（客户端导出方式）exportHandler='fcExporter1'（处理导出）
4) Html文件里加入
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
Var myExportComponent = new FusionChartsExportObject("fcExporter1", "http://www.cnblogs.com/FusionCharts/FCExporter.swf");
myExportComponent.Render("fcexpDiv");
</script>
3、批图表导出处理：
1) 前提：要批导出的数据共用一个xml文件，即共用数据。
2) 与单个导出的不同之处：
Ø myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
Ø 用sourceCharts方法包含需导出的所以图表DOMid
Ø 设置导出图片相关的属性：componentAttributes。
八、中文编码解决方法：
提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。
1、动态产生的XML文档，即使用dataURL方法加载的数据，编码须是GBK或者gb2312。做法：只需在包含数据源的jsp页面加入<%@ page language="java" contentType="text/xml; charset=GBK"%>
2、提供字符串数据源（即使用dataXML方法加载的数据）的页面必须硬编码才行，可以是GBK或UTF-8。做法：只需在包含xml的jsp页面加入<%@ page language="java" contentType="text/html; charset=UTF-8"%>
附注fusionCharts详细属性：
按照模块分类：
1、边框及整个背景的属性：
|
属性名称 |
属性说明 |
示例或说明 |
|
bgColor |
背景颜色 |
bgColor='999999,FFFFF渐变 bgColor=’999999’单色 |
|
bgAlpha |
背景透明度 |
设置范围在1-100 |
|
showBorder |
图表外是否显示边框 |
默认二维图表显示，三维不显示 |
|
borderColor |
边框颜色 |
十六进制表示去掉前面的#号 |
|
borderThickness |
边框线的粗细 |
像素表示 |
|
borderAlpha |
边框透明度 |
|
|
bgSWF |
背景图片或动画 |
保证此图片和SWF文件在同一个文件夹 |
|
bgSWFAlpha |
设置背景图片的透明度 |
2、图表背景属性：
|
属性名称 |
属性说明 |
示例或说明 |
|
canvasbgColor |
图表背景颜色 |
可设置单色也可以使用梯度设置渐变色 |
|
canvasbgAlpha |
图表背景透明度 |
|
|
canvasBorderColor |
图表背景边框颜色 |
|
|
canvasBorderThickness |
图表背景边框线粗细 |
|
|
canvasBorderAlpha |
图表背景边框透明度 |
3、外部引入LOGO:
|
属性名称 |
属性说明 |
示例或说明 |
|
logoURL |
LOGO引入的地址 |
logoURL='logo_fc.gif' |
|
logoPosition |
LOGO在图表中的位置 |
TL – 左上TR –右上BL – 左下BR –右下CC – 中间 |
|
logoAlpha |
LOGO的透明度 |
|
|
logoScale |
LOGO比例 |
4、图表名称和轴属性：
|
属性名称 |
属性说明 |
示例或说明 |
|
caption |
标题 |
|
|
subcaption |
子标题 |
|
|
xAxisName |
X轴名称 |
|
|
yAxisName |
Y轴名称 |
|
|
rotateYAxisName |
Y轴名称是否旋转的显示 |
|
|
outCnvbaseFont |
Canvas外面的字体 |
即标题、子标题、X/Y轴名称字体 |
|
outCnvbaseFontSize |
Canvas外面的字体大小 |
范围在0-72 |
|
outCnvbaseFontColor |
Canvas外面的字体颜色 |
|
|
baseFont |
Canvas里面的字体 |
|
|
baseFontSize |
Canvas里面的字体大小 |
|
|
baseFontColor |
Canvas里面的字体颜色 |
5、data plot属性
|
plotGradientColor |
取消梯度颜色 |
plotGradientColor='' |
|
指明渐变是明度还是灰度（默认为明度，即加白色渐变） |
plotGradientColor='333333' |
|
|
showPlotBorder |
是否显示数据块的边框 |
柱状图是否显示外框 |
|
plotBorderDashed |
数据块的边框是否虚线显示 |
|
|
useRoundEdges |
对于柱状图是否使用圆角 |
并且加入了glass效果 |
|
plotFillAngle |
使用梯度颜色时，选择梯度角度 |
|
|
plotFillAlpha |
使用梯度颜色时，选择透明度 |
6、数据横纵轴属性
|
showLabels |
是否显示X轴标签名称 |
默认显示 |
|
showYAxisValues |
是否显示Y轴标签名称 |
默认显示 |
|
labelDisplay |
标签显示格式 |
WRAP（重叠）ROTATE（旋转）Stagger（交错） |
|
slantLabels |
标签旋转显示时的倾斜角度 |
|
|
staggerLines |
标签交错显示时的交错行数 |
|
|
labelStep |
横轴标签隔几个显示 |
|
|
yAxisValuesStep |
纵轴标签隔几个显示 |
7、图表上的数据显示
|
showValues |
是否显示图表上的数据 |
默认显示 |
|
displayValue |
自定义图表上显示的内容 |
|
|
rotateValues |
是否旋转90度显示图表上的数据 |
|
|
placeValuesInside |
是否在图表内部显示数据 |
8、图表调色板
|
palette |
图表块框框的渐变程度 |
1-5可供选择 |
|
paletteColors |
图表块里面的渐变颜色 |
paletteColors='FF5904,0372AB,FF0000' |
9、横轴坐标最大值、最小值属性
|
yAxisMinValue |
Y轴坐标的最小值 |
|
|
yAxisMaxValue |
Y轴坐标的最大值 |
|
|
xAxisMinValue |
X轴坐标的最小值 |
|
|
xAxisMaxValue |
X轴坐标的最大值 |
10、图表内部的div线相关属性
|
divLineColor |
设置div的颜色 |
|
|
divLineThickness |
设置div的线条粗细 |
1-5 |
|
divLineAlpha |
设置div的线条透明度 |
1-100 |
|
divLineIsDashed |
设置div是否虚线显示 |
|
|
showAlternateHGridColor |
设置div块是否高亮显示 |
11、图表内部垂直div线的相关属性
|
vDivLineColor |
设置垂直div的颜色 |
|
|
vDivLineThickness |
设置垂直div的线条粗细 |
|
|
vDivLineAlpha |
设置垂直div的线条透明度 |
|
|
vDivLineIsDashed |
设置垂直div是否虚线显示 |
|
|
showAlternateVGridColor |
设置垂直div块是否高亮显示 |
alternateVGridAlpha (透明度) |
|
alternateVGridColor (颜色) |
12、Zero plan相关属性
|
zeroPlaneColor |
设置零线（面）的颜色 |
|
|
zeroPlaneThickness |
设置零线（面）的粗细 |
|
|
zeroPlaneAlpha |
设置零线（面）的透明度 |
|
|
zeroPlaneShowBorder |
是否显示零面的外框 |
只针对3D图表 |
|
zeroPlaneBorderColor |
设置零面外框的颜色 |
只针对3D图表 |
13、Anchors相关属性（针对线图）
|
drawAnchors |
是否显示线图的Anchors |
默认显示 |
|
anchorSides |
设置Anchors是几边形 |
3-20 |
|
anchorRadius |
设置Anchors的大小 |
|
|
anchorBorderColor |
设置Anchors外框颜色 |
|
|
anchorBorderThickness |
设置Anchors外框线条粗细 |
|
|
anchorBgColor |
设置Anchors里面的颜色 |
|
|
anchorAlpha |
设置Anchors整体的透明度 |
1-100 |
|
anchorBgAlpha |
设置Anchors所处背景的透明度 |
1-100 |
14、tool-tip属性
|
showToolTip |
鼠标放上去是否显示提示 |
Set属性里可自定义设置toolText |
|
toolText |
自定义提示框显示的内容 |
|
|
toolTipBorderColor |
提示框边框的颜色 |
|
|
toolTipBgColor |
提示框背景颜色 |
15、padding属性
|
chartLeftMargin |
纵轴标题离外边框的距离 |
|
|
chartRightMargin |
Canvas右边线离外边框的距离 |
|
|
chartTopMargin |
标题离外边框的距离 |
|
|
chartBottomMargin |
横轴标题离外边框的距离 |
|
|
captionPadding |
Canvas上边线离图表标题的距离 |
|
|
xAxisNamePadding |
横坐标离横轴标题的距离 |
|
|
yAxisNamePadding |
纵坐标离纵轴标题的距离 |
|
|
yAxisValuesPadding |
Canvas左边线离纵坐标标签的距离 |
|
|
labelPadding |
Canvas下边线横坐标标签的距离 |
|
|
valuePadding |
图表上面的数据里图表的距离 |
|
|
canvasPadding |
Canvas左边线离第一个Anchor的距离 |
只限于线图和块图 |
16、数据格式相关属性
|
decimals |
设置小数点后面保留的位数 |
|
|
forceDecimals |
是否强制保留小数点后面的decimals设置的位数 |
|
|
formatNumberScale |
是否按默认的数据格式显示 |
|
|
decimalSeparator |
小数点的分隔表示方式 |
默认‘.’ |
|
thousandSeparator |
千分位的分隔表示方式 |
默认‘,’ |
|
numberScaleValue |
两个联合一起使用，定义数据标度 |
numberScaleValue='1000,1000,1000' |
|
numberScaleUnit |
numberScaleUnit='K,M,B' |
|
|
numberPrefix |
数字显示的前缀 |
numberPrefix='$' |
|
numberSuffix |
数字显示的后缀 |
17、legend相关属性
|
showLegend |
是否显示图例说明 |
默认显示 |
|
legendPosition |
设置图例说明的位置 |
|
|
legendBgColor |
设置图例说明的背景颜色 |
|
|
legendBgAlpha |
设置图例说明的背景透明度 |
|
|
legendBorderColor |
设置图例说明的边框颜色 |
|
|
legendBorderThickness |
设置图例说明的边框粗细 |
|
|
legendBorderAlpha |
设置图例说明的边框透明度 |
|
|
legendShadow |
是否显示为图例说明显示阴影 |
|
|
legendScrollBgColor |
设置图例说明滚动条的背景颜色 |
当图例说明中有很多事件时 |
|
legendScrollBarColor |
设置图例说明滚动条的颜色 |
当图例说明中有很多事件时 |
|
egendScrollBtnColor |
设置图例说明滚动条的按钮的颜色 |
当图例说明中有很多事件时 |
18、3D图表属性
|
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 |
图表是否嵌入显示 |
默认前后重叠显示 |
19、自定义菜单属性
|
showAboutMenuItem |
是否显示自定义菜单 |
默认显示 |
|
aboutMenuItemLabel |
设置自定义菜单的名称 |
aboutMenuItemLabel ='About My Company' |
|
aboutMenuItemLink |
设置自定义菜单的链接 |
aboutMenuItemLink='n-http://www.youshang.com |
20、趋势线：
<trendLines>
<line startValue='430000' endValue='450000' color='009933' displayvalue='Target' dashed='1' dashLen='2' dashGap='2' valueOnRight ='1' />
</trendLines>
21、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。
1、定义一个styles。<definition></ definition>部分定义。基本属性有name（给type所定义的style取的名字）、type（FusionCharts只支持下面六种styles: Font（字体）、Animation（动画）、Shadow（阴影）、Glow（轮廓线）、Blur（模糊化）、Bevel（产生透视，增强立体感））。
2、作用于一个对象。< application></ application>定义。
3、对应关系
|
作用对象 |
对象说明 |
可以应用的style属性 |
Animation Parameters Supported |
|
BACKGROUND |
图表所处的整个背景 |
Animation Shadow Glow Bevel Blur |
_alpha _x _y _xScale _yScale |
|
CANVAS |
单指图表填充的位置 |
Animation Shadow Glow Bevel Blur |
_alpha _x _y _xScale _yScale |
|
CAPTION |
图表的标题 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
DATALABELS |
图表X轴标签名称 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
DATAPLOT |
组成图表的数据块 |
Animation Shadow Glow Bevel Blur |
_alpha _x _y _xScale _yScale |
|
DATAVALUES |
图表的数据 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
DIVLINES |
图表背景水平或者垂直的div线 |
Animation Shadow Glow Bevel Blur |
_alpha _y _yScale |
|
HGRID |
连续的div线之间的颜色块 |
Animation Shadow Glow Bevel Blur |
_alpha _y _xScale _yScale |
|
SUBCAPTION |
图表的二级标题 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
TOOLTIP |
当鼠标点在图标上时出现的提示框 |
Font |
|
|
TRENDLINES |
趋势线 |
Animation Shadow Glow Bevel Blur |
_alpha _y _xScale _yScale |
|
TRENDVALUES |
趋势线的值 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
VLINES |
垂直分隔线 |
Animation Shadow Glow Bevel Blur |
_alpha _x _y _yScale |
|
XAXISNAME |
X轴的名称 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
YAXISNAME |
Y轴名称 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y |
|
YAXISVALUES |
Y轴数据标度 |
Animation Font Shadow Glow Bevel Blur |
_alpha _x _y _rotation |
<styles>
<definition>
<style name='Anim1' type='animation' param='_xScale' start='0' duration='1' />
<style name='Anim2' type='animation' param='_alpha' start='0' duration='1' />
</definition>
<application>
<apply toObject='TRENDLINES' styles='Anim1, Anim2' />
</application>
</styles>
按照编程xml构造结构分：（只列举出了几种主要属性，主要用于xmlBuiler）
头部属性：
|
属性名称 |
属性说明 |
示例或者说明 |
|
Caption |
图表标题 |
还有一个子标题的属性subcaption |
|
DecimPecision |
自定义小数点的格式 |
默认为‘.’ |
|
thousandSeparator |
自定义千位的格式 |
默认为‘,’ |
|
baseFont |
Canvas里面的字体 |
|
|
baseFontSize |
Canvas里面的字体大小 |
|
|
xAxisName |
X轴名称 |
|
|
yAxisName |
Y轴名称 |
|
|
chartTopMargin |
见上面的距离相关属性的截图 |
设置图表上边距 |
|
chartBottomMargin |
见上面的距离相关属性的截图 |
设置图表下边距 |
|
chartLeftMargin |
见上面的距离相关属性的截图 |
设置图表左边距 |
|
chartRightMargin |
见上面的距离相关属性的截图 |
设置图表右边距 |
|
canvasBgColor |
设置canvas的背景色 |
既可以是单色也可以设置渐变色 |
|
canvasBgAlpha |
设置canvas的透明度 |
|
|
canvasBaseColor |
设置canvas基部的颜色 |
|
|
divLineColor |
设置水平分隔线的颜色 |
|
|
bgColor |
Background的背景颜色 |
|
|
showValues |
是否显示图表表示的数据 |
|
|
showBorder |
是否显示图表外的边框 |
默认二维图表显示，三维不显示 |
|
formatNumber |
千位是否需要逗号隔开 |
默认自动使用逗号分开 |
|
formatNumberScale |
数据是否自动转换为k/m格式 |
默认自动转换 |
Body属性：<set里面设置的属性
|
属性名称 |
属性说明 |
示例或者说明 |
|
Label |
设置在图表中横轴标示的名字 |
Name也可以 |
|
value |
设置在图表中各个名字想对应的值 |
|
|
color |
设置在图表中相对应的柱行图的颜色 |
|
|
toolText |
设置鼠标旋停在相对应的柱行图上出现的文本内容 |
hoverText也具有此功能 |
|
link |
设置该柱行图的链接地址 |
|
|
alpha |
设置在图表中相对应的柱行图的透明度 |
|
|
showName |
设置在是否显示图表中相对应的柱行图的name |
