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嵌入。这样每次刷新的时候都会从新载入。
导出、热点链接
1、图表转换成图片或者PDF导出:
fusionCharts开发方提供了两种方法实现,一种的客户端导出,一种是服务器端导出。建议使用客户端导出,使用开发方提供的服务器端导出的jar包时在IE上会抛出异常,在火狐上图表一般能显示,但在控制器也会抛出异常。开发方写的方法,有一些内部机制,没有完全理解。用服务器端的方法,可以正常使用。
2、热点链接:
主要应该是数据传递问题。一方面可以直接从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("../../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轴名称是否旋转的显示 |
|
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 |
文章原作者:https://blog.csdn.net/airingyuan/article/details/7549873
FusionCharts图表控件中文版使用手册的更多相关文章
- Flash图表控件FusionCharts如何高亮显示数据
使用Flash图表控件FusionCharts时,通过改变alpha值是高亮显示数据的最简单方式. XML代码如下: <chart> <set label='John' value= ...
- Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...
- 问题:MSChart.exe;结果:微软图表控件MsChart使用方法及各种插件下载地址
微软图表控件MsChart使用方法及各种插件下载地址 (2012-08-10 17:32:33) 转载▼ 标签: 图表 控件 下载地址 kernel32 微软 it 分类: C# 昨天在网上看到了微软 ...
- ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
- 比achartengine更加强大的Android图表控件。
比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- HighchartsNET快速图表控件-开源
前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...
- HighChats图表控件显示精度小数点的方法
相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{ fo ...
- 图表控件FlowChart.NET详细介绍及免费下载地址
FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中.能够帮助你创建工作流程图.对象层次和关系图.网络拓扑 ...
随机推荐
- python- python内置模块 面向对象
1.configparser模块 configparser用于处理特定格式的文件,其本质上是利用open来操作文件 # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2 ...
- Oracle学习笔记_05_ 一个创建表空间、创建用户、授权的完整过程
一.完整命令 su - oracle sqlplus /nolog conn /as sysdba create tablespace scaninvoice logging datafile '/u ...
- struts2 validate手动验证
我们前面学习struts2知道,struts2通过拦截器实现了一些验证操作. 比如,如果是不能转换的类型在action中接受的话会跳转到错误页面,错误信息中会包含对应的错误信息,例如: 首先我们了解一 ...
- C++中的宏和const
在C语言中使用const来定义一个变量,可以通过变量类型的指针形式来进行修改,而C++中增强了这种表现形式,使得即使通过类型变量指针也不能对变量进行修改. 在C++中const和宏是有区别的. con ...
- CF785CAnton and Permutation(分块 动态逆序对)
Anton likes permutations, especially he likes to permute their elements. Note that a permutation of ...
- ACM学习历程——HDU3333 Turing Tree(线段树 && 离线操作)
Problem Description After inventing Turing Tree, 3xian always felt boring when solving problems abou ...
- Java中的IO流(1)
字节流: //一个字节一个字节的读写 FileInputStream in=new FileInputStream("源文件"); FileOutputStream out=new ...
- deleteMany is not a function
问题: 同事使用了deleteMany方法用于删除数据,但是全公司只有我一个人报错deleteMany is not a function. 很自然,输出了model.deleteMany,得到的结果 ...
- php中替换中文引号不成功的原因
中文引号替换成英文引号,突然发现总是不成功. 后来查找资料得知,需要写成这种风格的. 正确代码如下: 中文单引号: str_replace('‘',''',$str);str_replace('’ ...
- NFS原理详解
NFS原理详解 摘自:http://atong.blog.51cto.com/2393905/1343950 2013-12-23 12:17:31 标签:linux NFS nfs原理详解 nfs搭 ...