属性导出FusionCharts图表控件中文版使用手册
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘。目前又不当COO,还是得用心记代码哦!
FusionCharts图表控件中文版应用手册
目录
媒介、先谈谈我对fusionCharts的看法:... 3
一、形成fusionCharts的三要素:swf、data.xml、承载图表的载体... 3
二、对于我们还未应用的功能:图表转换成图片或者pdf导出、热点链接... 3
三、重点... 3
fusionCharts的基本知识部分:... 4
一 、SWF 动画文件... 4
二、XML数据文件... 4
三、HTML(当然也可以应用JSP)嵌入charts文件... 5
四、结合javascript 的应用:... 5
五、热点链接:link=’ ’ 5
六、图表数据导出... 6
七、图表导出为pdf或者图片(JPEG和PNG)形式... 6
八、中文编码解决方法:... 7
附注fusionCharts详细属性:... 7
1、边框及整个背景的属性:... 7
2、图表背景属性:... 8
3、外部引入LOGO: 8
4、图表名称和轴属性:... 9
5、data plot属性... 9
6、数据横纵轴属性... 9
7、图表上的数据显示... 10
8、图表调色板... 10
9、横轴坐标最大值、最小值属性... 10
10、图表内部的div线相干属性... 10
11、图表内部垂直div线的相干属性... 10
12、Zero plan相干属性... 11
13、Anchors相干属性(针对线图)... 11
14、tool-tip 属性... 11
15、padding属性... 11
16、数据格式相干属性... 12
17、legend相干属性... 12
18、3D图表属性... 12
19、自定义菜单属性... 13
20、趋势线:... 13
21、Styles属性:(eg)定义自定义效果属性,然后在一个对象上停止应用。... 13
按照编程xml结构结构分:(只罗列出了几种重要属性,重要用于xmlBuiler)... 16
媒介
Ø 先谈谈我对fusionCharts的看法:
一、形成fusionCharts的三要素:swf、data.xml、承载图表的载体
1、Swf:
按照你所设计的图表类型加载响应的.swf文件到你的工程即可(eg:若你想生成一张二维柱状图,那么在你的工程里就必须包含Column2D.swf文件)
2、Data.xml:
方法一:直接用data.jsp文件替代data.xml文件,写法格式同xml。图表所需的属性直接在里头写逝世就行,只是所需的横纵坐标的数据调用后台的方法从数据库里头取得。这样就可以省去xmlBuilder这部分代码。
方法二:从后台取数据,然后调用响应的xmlBuiler方法生成所需的xml。项目中已有一些XmlBuilder的方法可供调用。
3、承载图表的载体:
HTML、JSP等都可以。调用fusionCharts开辟方提供的fusioncharts.js里头写的fusionchart方法设置相干的参数直接生产响应的图表,发生一个fusioncharts图表的div节点。但是现在fusionCharts图表还不能直接嵌入到ext框架里头。只能通过iframe嵌入。这样每次刷新的时候都市从新载入。
二、对于我们还未应用的功能:图表转换成图片或者pdf导出、热点链接
1、图表转换成图片或者PDF导出:
fusionCharts开辟方提供了两种方法实现,一种的客户端导出,一种是服务器端导出。提议应用客户端导出,应用开辟方提供的服务器端导出的jar包时在IE上会抛出异常,在火狐上图表一般能显示,但在控制器也会抛出异常。开辟方写的方法,有一些内部机制,没有完整懂得。用服务器端的方法,可以正常应用。
2、热点链接:
重要应该是数据传递问题。一方面可以直接从data.xml文件里头的link属性设置你要传过来的参数,然后在你要连接的页面用get方法去获得。另一方面可以直接调用后台的方法把xml文件里头的数据以js的形式直接导入到你要连接的页面。
三、重点
1、FusionCharts的三要素
2、xml各属性的应用
Ø fusionCharts的基本知识部分:
一 、SWF 动画文件
- SWF文件在目录FusionCharts_Site\Charts下
- 包含:
1) 单一系列图表(9种):(数据格式结构可共用,即单一系列的任何一种图表都可以用其他单一系列的图表取代)二维柱状图、三维柱状图、二维饼图、三维饼图、二维线图、二维条形图、二维块图、二维圆环图、三维圆环图。
2) 多序列图(6种):(重要用于比较,数据格式结构可共用)二维多序列柱状图、三维多序列柱状图、二维多序列线图、二维多序列块图、二维多序列条形图、三维多序列条形图。
3) 堆栈图(6种):二维堆栈柱状图、三维堆栈柱状图、二维堆栈块图、二维堆栈条形图、三维堆栈条形图、二维堆栈多序列柱状图(除最后一个图,其他的图数据可共享)
4) 结合系列(7种):(单一系列的图形可以结合应用,在一张图表中显示)
5) 点分布图(2种):(重要用来描述事件发生的分布情况,数据格式结构可共用)点状图、气泡状图。
6) 带滚动条系列(6种):多序列图(包含二维柱状图、二维线图、二维块图)、二维堆状柱状图、二维结合图、二维结合双Y轴图。
7) Grid形式(1种):SSGrid.swf用法同上,可以结合上面的图形,一同应用。注意:grid的形式只支撑单一系列图表的数据。
二、XML数据文件
- XML文件以 <chart>开头,以</chart>结束;或者以<graph>开头,以</graph>结束
- 属性:(详细见附注)XML标签属性有以下四种数据类型:布尔型、数字型、字符型、十六进制颜色代码(只支撑十六进制的颜色表现,且去掉前面的#号)
- 注意点:
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 的应用:
- 前提:置FusionCharts中的registerwithjs为1
- 事件:
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格式错误
- 方法
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=’ ’
四种链接方法:
- 链接到同一个窗口:link='指定页面%3F参数'
- 链接到新的窗口:link='n-指定页面%3F参数'
- 链接到一个指定的frame:link='F-FrameName-指定页面%3F参数'(注参数一般不能超过两个,当超过两个则必须追加为一个字符串用逗号分开)
- 链接到一个弹出框:link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
- 整个图表链接:clickURL='指定路径'
- 链接到Js :link="j-function()"
- Click 事件处理:link='S-parameter'(此方法是整个图表的链接情况)
- 应用context menu:设置属性showExportDataMenuItem='1',并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了,然后打开记事本之类的东东就可以把数据粘贴到上面去了。
- 应用JavaScript Menu:首先置registerWithJS为1,即var chart1 = new FusionCharts("../../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", "../../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轴名称是不是旋转的显示 |
|
rotateNames |
X轴名称是不是旋转的显示 |
slantLabels=’1’时,斜45度,否则斜90度竖排 |
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轴标签名称 |
默认显示 |
numberPrefix |
Y轴数据加上前缀 |
如numberPrefix = ‘a’ |
numberSuffix |
Y轴数据加上后缀 |
如numberPrefix = ‘b’ |
formatNumberScale |
是不是格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M |
formatNumberScale=’0’即可去除掉这个’k’ |
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>
dashed |
是不是虚线显示 |
默认实线显示 |
dashLen |
设置虚线长度 |
|
dashGap |
设置虚线间隙宽度 |
|
startValue |
起始值 |
单个时一条横线,有结束值时,两点连线 |
endValue |
结束值 |
|
displayvalue |
线标示 |
|
valueOnRight |
设置displayvalue显示右边 |
valueOnRight ='1' |
color |
设置线颜色 |
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 |
文章结束给大家分享下程序员的一些笑话语录: 大家喝的是啤酒,这时你入座了。
你给自己倒了杯可乐,这叫低配置。
你给自已倒了杯啤酒,这叫标准配置。
你给自己倒了杯茶水,这茶的颜色还跟啤酒一样,这叫木马。
你给自己倒了杯可乐,还滴了几滴醋,不仅颜色跟啤酒一样,而且不冒热气还有泡泡,这叫超级木马。
你的同事给你倒了杯白酒,这叫推荐配置。
菜过三巡,你就不跟他们客气了。
你向对面的人敬酒,这叫p2p。
你向对面的人敬酒,他回敬你,你又再敬他……,这叫tcp。
你向一桌人挨个敬酒,这叫令牌环。
你说只要是兄弟就干了这杯,这叫广播。
有一个人过来向这桌敬酒,你说不行你先过了我这关,这叫防火墙。
你的小弟们过来敬你酒,这叫一对多。
你是boss,所有人过来敬你酒,这叫服务器。
酒是一样的,可是喝酒的人是不同的。
你越喝脸越红,这叫频繁分配释放资源。
你越喝脸越白,这叫资源不释放。
你已经醉了,却说我还能喝,叫做资源额度不足。
你明明能喝,却说我已经醉了,叫做资源保留。
喝酒喝到最后的结果都一样
你突然跑向厕所,这叫捕获异常。
你在厕所吐了,反而觉得状态不错,这叫清空内存。
你在台面上吐了,觉得很惭愧,这叫程序异常。
你在boss面前吐了,觉得很害怕,这叫系统崩溃。
你吐到了boss身上,只能索性晕倒了,这叫硬件休克。
属性导出FusionCharts图表控件中文版使用手册相关推荐
- 支持XML和JSON数据的图表控件FusionCharts XT
FusionCharts XT是一款功能强大的图表控件,同时支持HTML5和Flash,可以用于PCs, Macs, iPads, iPhones ,支持XML和JSON数据,可以帮您为您的Web应用 ...
- fusioncharts mysql_支持XML和JSON数据的图表控件FusionCharts XT
FusionCharts XT是一款功能强大的图表控件,同时支持HTML5和Flash,可以用于PCs, Macs, iPads, iPhones ,支持XML和JSON数据,可以帮您为您的Web应用 ...
- 微软图表控件MsChart
转自:http://tech.ddvip.com/2008-11/122640479791375.html 昨天在网上看到了微软发布了.NET 3.5框架下的图表控件,第一时间抓下来看了一下,发觉功能 ...
- OxyPlot.Wpf 图表控件使用备忘
OxyPlot.Wpf 图表控件使用备忘 目录 OxyPlot.Wpf 图表控件使用备忘 一.OxyPlot.Wpf 控件信息 二.基本概念 (一) PlotView 和 Plot (二) PlotM ...
- 芬兰高性能图表控件-免费试用并提供技术支持
图表控件对于很多技术研发人员.工程设计师来说肯定不陌生,但市面上已有的图表控件产品大多功能单一.性能也不稳定,很难满足不同人群在不同场合的使用需求.为此,专注于开发高性能和最先进的数据可视化工具公司A ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...
- 道路测量xy坐标表示什么_.NET图表控件LightningChart.NET案例研究:智能测量解决方案...
LightningChart.NET原名LightningChart Ultimate SDK. LightningChart.NET完全由GPU加速,并且性能经过优化,可用于实时显示海量数据-超过1 ...
- 跨平台图表控件TeeChart使用教程:导入XML数据
2019独角兽企业重金招聘Python工程师标准>>> TeeChart的最新版中包含了一个自动加载XML数据的新组件.这个组件的名字叫做TTeeXMLSource,用户可以在Tee ...
- 微软图表控件MsChart使用说明[转]
微软图表控件MsChart使用说明 建立一个.NET3.5的Web项目,像使用普通控件一样拖放到要使用的Web界面即可.初步研究了一下,整个图形控件主要由以下几个部份组成: 1.Annotations ...
最新文章
- 【自然框架】稳定版的Demo——看点二:权限,权限过滤与验证。
- CH340E USB转串口 IC测试电路
- linux前10ip,检查网口流量与前10名流量大IP
- battlesvr结构
- 适配器模式coding
- c语言实参和形参占用存储单元_必须知道的C语言知识细节:函数形参和实参的区别...
- jQuery中的height()、innerheight()、outerheight()的区别总结
- C# ActionT和 FuncT委托
- python实例方法、类方法@classmethod、静态方法@staticmethod和属性方法@property区别
- ES6 ArrayBuffer 概述
- vue element menu侧边导航栏
- Use AVAudioPlayer in OperationQueue
- Pytorch实现基于卷积神经网络的面部表情识别(详细步骤)
- 基于js管理大文件上传以及断点续传
- 互信息和左右熵的新词发现(笔记)
- 无线蓝牙耳机手机端app开发_汪峰耗时1500天造了一款耳机,秒杀苹果AirPods!
- DC入门教程(二)——综合的整体流程
- 带孔的打印纸怎么设置_oki打印机打印带孔纸如何缩小纸张间距
- 为什么PHP项目运行报错502,php为什么会出现502错误
- 基于51单片机的智能晾衣架
热门文章
- python字符串提取数字并求和_python实现将字符串中的数字提取出来然后求和
- Debian 10安装Xrdp远程桌面
- nacos简易实现负载均衡
- 后台管理系统权限管理详解
- tag标签是什么?对seo有什么用?
- 视频会议业务接力增长,“云+端”战略布局未来
- c语言共用体类型变量在程序执行期间,2003年10月甘肃省高等教育自学考试C语言程序设计试卷...
- python模块捆绑器组件_让我们学习模块捆绑器如何工作,然后自己编写
- 网站mysql防止sql注入攻击 3种方法总结
- MapOnline在线地图插件V1.2上线