FusionCharts参数说明
- 格式:docx
- 大小:15.07 KB
- 文档页数:4
边框和背景是否显示边框,1显示,0不显示。
2D showBorder图默认显示,3D图默认不显示。
borderColor 边框颜色,填写形式#000000 borderThickness 边框厚度borderAlpha 边框透明度,0-100bgColor 背景颜色bgAlpha 背景透明度背景颜色比例,加起来为100,格式bgRatio60,40bgImage 引用外部图片作为背景bgImageAlpha 背景图片透明度bgImageVAlign 背景图片垂直位置top middle bottom bgImageHAlign 背景图片竖直位置top middle bottombgImageScale 背景图片缩放0-300背景图片显示模式stretch, tile, fit, fill, bgImageDisplayModecenter and none.画布canvasBgColor 画布背景颜色,格式#000000 canvasBgAlpha 画布背景透明度,0-100显示画布边框,1显示,0不显示,默showCanvasBorder认显示canvasBorderColor 画布边框颜色canvasBorderThickness 画布边框厚度0-5 canvasBorderAlpha 画布边框透明度canvasBgColor 画布背景颜色,canvasBgAlpha 画布背景透明度,canvasBgRatio 画布背景比例, canvasBgAngle 画布背景角度0-360, canvasBaseColor 3D画布基座背景,针对3D图showCanvasBg 显示画布背景showCanvasBase 显示画布基座canvasBaseDepth 画布基座深度canvasBgDepth 画布背景深度标题和坐标轴caption 标题subCaption 子标题captionFont 标题字体captionFontColor 标题字体颜色captionFontSize 标题字体大小0-72captionFontBold 标题字体权重1加粗,0正常subCaptionFont 子标题字体subCaptionFontColor 子标题字体颜色subCaptionFontSize 子标题字体大小0-72subCaptionFontBold 子标题字体权重1加粗,0正常captionAlignment 标题位置left, center (default), right.captionOnTop 标题在顶部,1在,0不在标题与画布排列1画布区域,0图表区alignCaptionWithCanvas域captionHorizontalPadding 标题水平间距xAxisName X轴名yAxisName Y轴名xAxisNameFont /yAxisNameFont X/Y轴字体xAxisNameFontColorX/Y轴名字体颜色/yAxisNameFontColorxAxisNameFontSizeX/Y轴名字体大小/yAxisNameFontSizexAxisNameFontBold/yAxisNameFontX/Y轴名字体加粗1加粗。
在FCF里,一些特殊的编码都需要经过编码。
如:“€”欧元符号———需要用“%80”替换“£”英镑符号———需要用“%A3”替换“¥”人名币符号——需要用“%A5”替换“¢”分符号————需要用“%A2”替换“%”百分号————需要用“%25”替换“&”连字符————需要用“&”替换“>”大于号————需要用“>”替换“'”单引号————需要用“'”替换如果要显示双引号,直接使用就可以了,前提是属性值是用单引号括起来的。
如果属性值是用双引号括起来的,要显示单引号,也可以直接使用,而不必用“'”来替换它。
五、属性参数大全FusionCharts的XML标签属性有以下四种数据类型:* Boolean - 布尔类型,只能为1或者0。
例如:<graph showNames=’1’>* Number - 数字类型,只能为数字。
例如:<graph yAxisMaxValue=’200’>* String - 字符串类型,只能为字符串。
例如:<graph caption=’My Chart’ >* HexColorCode - 六进制颜色代码,前边没有‘#’。
例如:<graph bgColor=’FFFFDD’>1. 功能特性animation …………………………[bool]是否动画显示数据,默认为1(True)palette …………………………… [number]使用默认的调色板(1-5)showNames ………………………[bool]是否显示横向坐标轴(x轴)标签名称showLables ………………………[bool]是否显示标签,默认为1(True)显示(set中有lable属性时) rotateNames ………………………[bool]是否旋转显示标签(name),默认为0(False):横向显示rotateLabels ………………………[bool]设置x轴上的lable显示方式,默认为0横向显示showValues ………………………[bool]是否在图表显示对应的数据值,默认为1(True) yAxisMinValue ………………… [number]指定纵轴(y轴)最小值,数字yAxisMaxValue ………………… [number] 指定纵轴(y轴)最小值,数字showLimits ………………………[bool]是否显示图表限值(y轴最大、最小值),默认为1(True) labelDisplay ………………………[string ]标签的呈现方式[“WRAP”,”STAGGER”,”ROTA TE”, “NONE”](超长屏蔽、折行、倾斜、不显示)staggerLines …………………… [number]多少个字符后折行(labelDisplay=’stagger’)rotateValues ………………………[bool]是否滚动显示值(showValues=’1’)showY AxisValues …………………[bool]是否显示y轴数据yAxisValuesStep ………………… [number]y轴标记的显示间隔adjustDiv …………………………[bool]自动调整divlinesclickURL …………………………[string]图表的焦点链接地址defaultAnimation …………………[bool]是否开启默认动画connectNullData …………………[bool]是否呈现空值(?)slantLabels ……………………… [bool]showDivLineValues ………………[bool]rotateYAxisName …………………[bool]yAxisNameWidth ……………… [number] (In Pixels)labelStep ……………………… [number] (1 or above)setAdaptiveYMin<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> 2. 图表标题和轴名称caption ………………………… [string]图表主标题subCaption ………………………[string] 图表副标题xAxisName …………………… [string]横向坐标轴(x轴)名称yAxisName ……………………[string] 纵向坐标轴(y轴)名称<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> 3. 图表和画布的样式bgColor ……………………[color]图表背景色,可以使用逗号分割多个颜色值 6位16进制颜色值 bgRatio ………………………[number]多个颜色值所占的比率,[0-100] bgAngle ………………………[number]角度,[0-360]bgSWF ……………………… [string] 设置一个外部的Flash 为flash的背景(须在同一个域下) bgSWFAlpha …………………[number] 背景flash透明度,[0-100] bgAlpha……………………… [number]设置图表背景透明度,[0-100] shadowAlpha …………………[number]投影透明度,[0-100] showLegend ………………… [bool]是否显示系列名,默认为1(True) canvasBgColor …………………[color]画布背景色,6位16进制颜色值canvasBgAlpha …………………[number]画布透明度,[0-100] 0为不透明 canvasBorderColor …………… [color]画布边框颜色,6位16进制颜色值 canvasBorderThickness …………[number]画布边框厚度,[0-100]canvasBaseColor ……………… [color]设置图表基部的颜色,6位16进制颜色值 canvasBaseDepth ……………… [number]设置图表基部的高度 canvasBgDepth …………………[number]设置图表背景的深度 showCanvasBg …………………[bool]设置是否显示图表背景 showBorder …………………… [bool]画布透明度,默认为1显示 showCanvasBase ………………[bool]设置是否显示图表基部 pieFillAlpha ……………………[number]各色块填充颜色的深度pieSliceDepth …………………[bool]设置各个色块间隔线的宽度(不能与pieBorderAlpha同用) useRoundEdges ……………… [bool]设置图表图形边角是否是为圆角,默认为0不是 chartLeftMargin ……………… [number]设置图表左边距,像素chartRightMargin ………………[number]设置图表右边距,像素 chartTopMargin ……………… [number]设置图表上边距,像素 chartBottomMargin ……………[number]设置图表下边距,像素 canvasBgRatio …………………[ ?]canvasBgAngle …………………[number] borderColor ……………………[color] borderThickness ……………… [number] borderAlpha ……………………[number] canvasBorderAlpha ……………[number] captionPadding …………………[?] xAxisNamePadding ……………[?] yAxisNamePadding ……………[?] yAxisValuesPadding ……………[?] labelPadding ……………………[?] valuePadding ……………………[?] canvasPadding。
FusionCharts参数大全2010年01月11日 星期一 14:13Fusioncharts 参数objects ANCHORS 锚点 用于标识line或area的数值点 支持效果 Animation 动画、Shadow 阴影、Glow 发光、Be objectsANCHORS 锚点 用于标识line或area的数值点支持效果 Animation 动画、Shadow 阴影、Glow 发光、Bevel 倾斜、Blur 模糊动画属性 _alpha、_x、_y、_xScale、_yScaleBACKGROUND 整个图表的背景支持属性 Animation、Shadow、Glow、Bevel、Blur动画属性 _alpha、_x、_y、_xScale、_yScaleCANVAS 区域图中的区域支持属性 Animation、Shadow、Glow、Bevel、Blur动画属性 _alpha、_x、_y、_xScale、_yScaleCAPTION 图表标题SUBCAPTION 图表子标题支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体动画属性 _alpha、_x、_yDATALABELS 数据的x轴标签列表支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体动画属性 _alpha、_x、_yDATAPLOT 数据细节(如:2D图表中的列)支持属性 Animation、Shadow、Glow、Bevel、Blur动画属性 _alpha、_x、_y、_xScale、_yScaleDATAVALUES 图表数据支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体动画属性 _alpha、_x、_yDIVLINES 水平的列表区域(由div组成的线)支持属性 Animation、Shadow、Glow、Bevel、Blur动画属性 _alpha、_x、_y、_xScaleHGRID 水平的两个列表区域中交替的颜色支持属性 Animation、Shadow、Glow、Bevel、Blur动画属性 _alpha、_x、_y、_xScale、_yScaleVDIVLINES 垂直的列表区域VGRID 垂直的两个列表区域中交替的颜色VLINES 垂直分割线XAXISNAME x轴名称YAXISNAME y轴名称YAXISVALUES y轴的值列表TOOLTIP 在鼠标移动到数据点上的时候的提示支持属性 FontTRENDLINES 趋势线TRENDVALUESchartFunctional Attributesanimation bool 是否使用动画palette number(1-5) 使用默认的调色板connectNullData bool 是否呈现空值(?猜测)showLabels bool 是否显示标签labelDisplay string (WRAP,STAGGER,ROTATE or NONE ) 标签的呈现方式(超长屏蔽、折行、倾斜还是不显示)rotateLabels boolslantLabels boollabelStep number (1 or above)staggerLines number (2 or above) 多少个字符后折行(labelDisplay=stagger)showValues bool 是否一直显示数据值在数据点上rotateValues bool 是否滚动显示值 (showValues=1)showYAxisValues bool 是否显示y轴数据showLimits boolshowDivLineValues boolyAxisValuesStep number (1 or above) y轴标记的显示间隔 标记之间个间隔,防止缩到一起,影像显示adjustDiv bool 自动调整divlinesrotateYAxisName boolyAxisNameWidth number (In Pixels)clickURL String 图表的焦点链接地址defaultAnimation bool 是否开启默认动画yAxisMinValue number Y轴中最小值yAxisMaxValue number Y轴中最大值setAdaptiveYMinChart Titles and Axis NamescaptionsubCaptionxAxisNameyAxisNameChart CosmeticsbgColor color 可以使用逗号分割多个颜色值 FF5904,FFFFFFbgAlpha number (0-100) 透明度bgRatio number (0-100) 多个颜色值所占的比率bgAngle number (0-360) 角度bgSWF string 背景flash,但必须在同一个域下bgSWFAlpha number (0-100)canvasBgColor Color 区域背景颜色canvasBgAlphacanvasBgRatiocanvasBgAnglecanvasBorderColorcanvasBorderThickness number (0-5) 边框厚度canvasBorderAlphashowBorder boolborderColorborderThickness number In PixelsborderAlphaData Plot CosmeticsshowPlotBorder boolplotBorderColorplotBorderThickness (0-5)pixelsplotBorderAlphaplotBorderDashed bool 是否使用虚线plotBorderDashLen number in pixelsplotBorderDashGap number in pixelsplotFillAngle number 0-360plotFillRatio number 0-100plotFillAlphaplotGradientColor color 渐变颜色showShadow bool 是否显示阴影plotFillColorAnchorsdrawAnchors boolanchorSides Number 3-20 边数 anchorRadius number in pixels 半径 anchorBorderColor color hex code anchorBorderThickness number in pixels anchorBgColoranchorAlphaanchorBgAlphaDivisional Lines & GridsnumDivLines number >0 水平区域线数量 divLineColordivLineThickness number 1-5divLineAlphadivLineIsDashed bool 虚线 divLineDashLendivLineDashGapzeroPlaneColorzeroPlaneThicknesszeroPlaneAlphashowAlternateHGridColor alternateHGridColoralternateHGridAlphanumVDivLinesvDivLineColorvDivLineThicknessvDivLineAlphavDivLineIsDashedvDivLineDashLenvDivLineDashGap showAlternateVGridColor alternateVGridColoralternateVGridAlphaNumber FormattingformatNumber boolformatNumberScale bool defaultNumberScale string numberScaleUnit string numberScaleValue stringnumberPrefix stringnumberSuffix stringdecimalSeparator string thousandSeparator string inDecimalSeparator string inThousandSeparator stringdecimals number 0-10 保留几位小数forceDecimals bool 是否前置保留几位小数yAxisValueDecimals number 0-10Font PropertiesbaseFontbaseFontSize number 0-72baseFontColoroutCnvBaseFont cnv canvas outCnvBaseFontSizeoutCnvBaseFontColorTool-tipshowToolTip booltoolTipBgColortoolTipBorderColortoolTipSepCharChart Padding & MarginscaptionPaddingxAxisNamePaddingyAxisNamePaddingyAxisValuesPaddinglabelPaddingvaluePaddingchartLeftMargin :图与画布的左边界chartRightMargin :值与下边界的宽度chartTopMargin :值与上边界的宽度chartBottomMargin :值与下边界的宽度canvasPadding :值与左边界的宽度set elementlabel stringvalue numbercolor color hex codelink stringtoolText stringshowLavelshowValuedashedalphaanchorSidesanchorRadiusanchorBorderColoranchorBorderThicknessanchorBgColoranchorAlphaanchorBgAlphaVertical data separator lines<set label='Dec 2005' value='36556' /><vLine color='FF5904' thickness='2' /><set label='Jan 2006' value='45456' />colorthicknessalphadasheddashLendashGapTrend-lines<trendLines><line startValue='895' color='FF0000' displayvalue='Average' /> </trendLines>startValueendValuedisplayValuecolorisTrendZoneshowOnTopthicknessalphadasheddashLendashGapvalueOnRight==============旧版本================================FusionCharts 的 XML标签属性有一下四种数据类型* Boolean - 布尔类型,只能为1或者0。
FusionCharts详细指导1.FusionCharts简单介绍图表显示是很多开发工作所必不可少的一项功能,FusionChart是一个基于Flash的图表组件,可以用来提供数据驱动的动态图表。
通过Adobe Flash,用XML 格式的数据输入,实现数据展示的图表化,动态化以及交互性。
使用FusionChart 可以方便的生成漂亮的柱状图、曲线图等图标,显示数据直观、清晰。
(1)与AJAX/JavaScript结合:可以通过页面的热点链接或者动态的服务器端的数据更新,而无需刷新页面来刷新图形。
(2)只需要将SWF文件复制到系统中,不需要安装任何插件之类的东西(3)需要把图形格式和数据以XML的格式传送给SWF文件,即可得到你所要的图形。
(4)减轻了服务器的加载负担。
FusionCharts 是由客户端的Adobe Flash平台根据服务器婴儿湿疹怎么办端提供的SWF文件以及XML格式的数据文件生成的图形。
(5)丰富多样的图形类型,Flash动画图表、地图和仪表盘。
访问官网:/2. FusionCharts可展示的图形类型柱状图、折线图、饼图、条形图、区域图、堆叠图、冒泡图、仪表盘、滑动条、地图、ffdy电影等二FusionCharts的使用1.基本步骤(1)SWF 文件引入你想创建图形类型对应的SWF文件,如3D柱状图对应的SWF文件是Column3D.swf(2)xml格式的数据文件FusionCharts只能访问预选定义的xml格式的数据,所以首先要把你要展示的数据转换成xml格式。
如下:是简单的3D柱状图的xml数据格式。
源文件Data.xml<chart>标签里面的树形定义是和整个图形相关的一个属性,图形名称显示,X轴Y轴的名称显示等。
<set>部分是具体的数据部分,label和value分别定义了某个数据的具体值,在图形上表现为柱状图每条柱子的名字及值。
(3)嵌入图形的html文件这里用到一个公用的FusionCharts.js文件,页面中一定要引入。
一、FusionCharts构成的基本三要素:swf,data,承载图表的载体。
Swf:Charts文件夹下面的所有swf文件,需要什么样的图表样式,就加在与之相对应的swf文件。
Data:数据源。
数据可以是*.xml, *.json 文件,也可以是代码中xml或json格式的数据。
载体:页面中装载swf的空间组件。
Eg:div,span等等。
二、装载swf的注意事项1.装载swf的基本语法页面必须引用FusionCharts.js<script type="text/javascript"src="../ FusionCharts.js"></script><div id="chartdiv">FusionCharts will be loaded here!</div><script type="text/javascript">var chart = new FusionCharts("../FusionCharts/Column3D.swf", "chartid", "400", "300", "0", "1");chart.setDataURL("../FusionData/LinkjavascriptData.xml");chart.render("chartdiv");</script>Column3D.swf:所要展现的图表类型LinkjavascriptData.xml:图表引用的数据源FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”):debugmodel 通常设置为0,registerwithjs通常设置为1.2.基本数据格式XML文件<chart>开头,以</chart>结束;或者以<graph>开头,以</graph>结束。
animation 是否显示加载图表时的动画palette 内置的图表样式,共5个paletteColors 自定义图表元素颜色(为多个,如过过少会重复) showAboutMenuItem 右键是否显示"关于FusionCharts" aboutMenuItemLabel 右键关于自定义文字aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式) showZeroPies 是否显示0值的饼showPercentValues labels上是否显示百分数showPercentInToolTip tip上是否显示百分数showLabels 是否显示LabelmanageLabelOverflow 当Label溢出时进行自动管理useEllipsesWhenOverflow 当Label溢出时候使用... showValues 是否显示值labelSepChar label上的分隔符defaultAnimation 是否关闭默认动画一开始自定义动画clickURL 整个图表的点击的url标题caption 主标题subCaption 副标题图表的装饰showBorder 显示边框borderColor 边框颜色borderThickness 边框粗细borderAlpha 边框透明度bgColor 背景颜色bgAlpha 背景透明度bgRatio 背景比例bgAngle 背景角度bgSWF 背景flash地址可以是图片地址bgSWFAlpha 背景flash的透明度showVLineLabelBorderlogoURL log地址logoPosition log位置logoAlpha log透明度logoScale log比例logoLink log链接元素的装饰showPlotBorder 每一片的边框plotBorderColor 每一片的边框颜色plotBorderThickness 每一片的边框粗细plotBorderAlpha 每一片的边框透明度plotFillAlpha 每一片的边框填充透明度use3DLighting 3d光效果饼/圈专有属性slicingDistance 当点击图表的时候这一片饼离开中心点的距离pieRadius 饼的外半径startingAngle 起始角度enableRotation 开启旋转pieInnerFaceAlpha 图表里面的透明度pieOuterFaceAlpha 图表外面的透明度pieYScale 饼立起来的角度,角度越大看到的面积越大. pieSliceDepth 图表的厚度标明线& Labels (label和图表元素之间的线)enableSmartLabels 是否开启标明显skipOverlapLabels 跳过重复标签isSmartLineSlanted 标明线方式(倾斜或直)smartLineColor 标明线颜色smartLineThickness 标明线粗细smartLineAlpha 标明线透明度labelDistancesmartLabelClearance 标明线长度数字formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或MdefaultNumberScale 默认数量级numberScaleUnitnumberScaleValuenumberPrefix 数字前缀numberSuffix 数字后缀decimalSeparator 小数分隔符thousandSeparator 千位分割符inDecimalSeparator 在十进位分割符inThousandSeparator 在千位分割符decimals 小数forceDecimals 是否用0填充以至满足要保留的小数位字体baseFont 基本字体baseFontSize 基本字号baseFontColor 基本字颜色Tool-tipshowToolTip 是否显示提示toolTipBgColor 提示背景色toolTipBorderColor 提示边框色toolTipSepChar 提示分隔符showToolTipShadow 是否显示提示Tool-tip阴影边距captionPadding 标题内边距chartLeftMargin 图表左外边距chartRightMargin 图表右外边距chartTopMargin 图表上外边距chartBottomMargin 图表下外边距set元素borderColor 边框颜色isSliced 被切开label [label]value 值color 颜色link 链接(FusionCharts链接格式)toolText 自定义提示图例(3.2版本以上)showLegend 是否显示图例legendPosition 图例位置legendCaption 图例说明legendIconScale 图例图标0-5(图例图标大小)legendBgColor 图例背景色legendBgAlpha 图例透明度legendBorderColor 图例边框颜色legendBorderThickness 图例边框粗细legendBorderAlpha 图例边框透明度legendShadow 图例阴影legendAllowDrag 是否允许拖动图例legendScrollBgColor 图例滚动条背景色legendScrollBarColor 图例滚动条颜色legendScrollBtnColor 图例滚动条按钮颜reverseLegend 反转图例interactiveLegend 图例交互(是否可点击)legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)minimiseWrappingInLegend。
FusionChart完全入门手册前言:在翻译FunsionChart V3的时候,发现官方的帮助文档汉化其实是一个很浩大的工程,里面涉及的内容非常多,基本上可以写成一本书了。
但是在一些点上,描述又不是很清楚,很多地方只是给出了描述文字,具体使用上的操作或者技巧,就更谈不上了。
结合我前一阶段进行的BI项目的情况,结合我本人手头翻译的帮助文档,产生了写一些实例帮助文档的想法,姑且叫做《FusionChart完全入门手册》吧。
一、概述:(略,如果效果好,以后补充)二、Charts类型FusionCharts总共包含了很多的系列,如●FusionCharts -- 图表系列●FusionMap -- 地图系列●FusionWidgets -- 仪表盘系列●PowerCharts -- 不好翻译,但是其中最著名的是漏斗,姑且称为漏斗系列吧我们这里介绍的是使用最多,样式也最繁杂的图标系列三、一个简单的实例一个完整的工程应该包含以下几个部分●控制文件(如FusionCharts.js,如果需要导出图形还需要FusionChartsExportComponent.js)●资源文件(swf文件,如Area2D.swf)●程序文件(如.html /.aspx /.asp/.php/.jsp等)●数据文件(根据实现方式,此部分可省略,后续进行说明)下面,先看一个简单的例子,本章节如不加说明,默认显示的是2D柱状图(别小看它,2D学会了其他的水到渠成,大家稍安勿躁)代码:代码1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht tp:///TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="/1999/xhtml">3<head>4<meta http-equiv="Content-Type" content="text/html; charset=utf-8 "/>5<title>FusionCharts v3 完全入门手册</title>6<link rel="stylesheet" href="style/Style.css" type="text/css"/>7<script language="JavaScript" src="JSClass/FusionCharts.js"></scri pt>8</head>910<body>11<table width="98%" border="0" cellspacing="0" cellpadding="3" alig n="center">12<tr>13<td valign="top" class="text" align="center"><div id="chartdi v" align="center">14 FusionCharts. </div>15<script type="text/javascript">16var chart = new FusionCharts("Charts/Column2D.swf", "Ch artId", "500", "300", "0", "0");17 chart.setDataURL("Data/Column2D.xml");18 chart.render("chartdiv");19</script></td>20</tr>2122</table>23</body>24</html>25需要说明的是,工程的目录结构如下:程序中的关键行是代码<script language="JavaScript" src="JSClass/FusionCharts.js"></script>这里指定了控制文件<script type="text/javascript">var chart = new FusionCharts("Charts/Column2D.swf", "Chart Id", "500", "300", "0", "0");chart.setDataURL("Data/Column2D.xml");chart.render("chartdiv");</script>这里指定了资源文件和数据文件并用控制文件调用资源文件和数据文件,在页面显示。
FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。
FusionCharts Free则是FusionCharts提供的一个免费版本,虽然免费,功能依然强大,图形类型依然丰富。
不得不感叹技术发展的真快,99年的时候,flash刚刚在互联网上流行,那时还只是一个简单的动画软件,编程能力有限。
但现在flash几乎无所不能了,图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP。
NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识,你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2。
1,主要做了以下改动:•增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档.•F usionCharts DOM更加容易地把图表加载到你的页面上。
•修改了。
Net的使用代码和文档。
•增加了新的PHP API ,并修复了一些BUG。
•修改了FusionCharts。
js ,以便可以支持双引号。
(那就是说以前不支持?)•增加了在FusionCharts使用UTF—8编码的示例。
FusionCharts到底能做什么呢?下面就给大家展示一下。
3D/2D 柱形图图片1图片2 曲线图图片3 图片43D/2D饼图、环图图片5图片6 区域图图片7图片8 堆栈图图片9 图片10联合图图片11图片12 蜡烛图图片13图片14 漏斗图图片15 图片16甘特图图片17图片18看了这么多漂亮的图形以后,是不是有点感到兴奋呢?如果把这么漂亮专业的图形放到用户面前,相信他们也会满意的。
Fusioncharts教程Fusioncharts 报表工具 (2)1.Fusioncharts 介绍 (2)2. 数据接口XML: (2)3. 使用前的准备工作(基于java的Web工程为例): (2)4. 创建第一个Chart: (2)5. FusionCharts提供多样式图: (4)6.FusionCharts的高级特性: (8)7. FusionCharts提供了很多设置chart样式的属性: (10)8.动态XML生成的chart: (10)9.FusionCharts的优缺点 (10)10 购买FusionCharts注意的事项: (10)Fusioncharts 报表工具1.Fusioncharts 介绍:Fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,fusioncharts可用于任何网页脚本语言如, HTML格式,JSP技术等等。
提供交互式和强大的动态图标,fusioncharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表。
2. 数据接口XML:Fusioncharts是以XML为数据接口而成图表。
提供XML两种形式:直接以XML文件提供数据。
基于数据库数据动态生成XML(此方法在后面详细介绍)。
3. 使用前的准备工作(基于java的Web工程为例):➢拷贝所有的flash文件(所有的图标文件在下载包中Charts 包中)到工程WebRoot目录下,这些flash文件作为生成报表的模板图标。
➢拷贝FusionCharts.jsp(下载包Includes包中)文件到WebRoot下(可以将其放在WebRoot下的某个文件夹中),这个文件包含将生成的flash图标嵌入到jsp或者HTML文件中。
➢拷贝FusionCharts.js(下载包JSCLASS包中),这个文件提供了createChartHTML 函数是我们轻松的创建图表。
FusionCharts参数的详细说明和功能特性功能特性animation 是否动画显示数据,默认为1(True)showNames是否显示横向坐标轴(x轴)标签名称rotateNames是否旋转显示标签,默认为0(False):横向显示showValues是否在图表显示对应的数据值,默认为1(True) yAxisMinValue指定纵轴(y轴)最小值,数字yAxisMaxValue指定纵轴(y轴)最小值,数字showLimits是否显示图表限值(y轴最大、最小值),默认为1(True)图表标题和轴名称caption 图表主标题subCaption图表副标题xAxisName横向坐标轴(x轴)名称yAxisName纵向坐标轴(y轴)名称图表和画布的样式bgColor图表背景色,6位16进制颜色值canvasBgColor画布背景色,6位16进制颜色值canvasBgAlpha画布透明度,[0-100]canvasBorderColor画布边框颜色,6位16进制颜色值canvasBorderThickness画布边框厚度,[0-100] shadowAlpha投影透明度,[0-100]showLegend是否显示系列名,默认为1(True)字体属性baseFont图表字体样式baseFontSize图表字体大小baseFontColor图表字体颜色,6位16进制颜色值outCnvBaseFont图表画布以外的字体样式outCnvBaseFontSize图表画布以外的字体大小outCnvBaseFontColor图表画布以外的字体颜色,6位16进制颜色值分区线和网格numDivLines画布内部水平分区线条数,数字divLineColor水平分区线颜色,6位16进制颜色值divLineThickness水平分区线厚度,[1-5]divLineAlpha水平分区线透明度,[0-100]showAlternateHGridColor是否在横向网格带交替的颜色,默认为0(False) alternateHGridColor横向网格带交替的颜色,6位16进制颜色值alternateHGridAlpha横向网格带的透明度,[0-100]showDivLinues是否显示Div行的值,默认??numVDivLines画布内部垂直分区线条数,数字vDivLineColor垂直分区线颜色,6位16进制颜色值vDivLineThickness垂直分区线厚度,[1-5]vDivLineAlpha垂直分区线透明度,[0-100]showAlternateVGridColor是否在纵向网格带交替的颜色,默认为0(False) alternateVGridColor纵向网格带交替的颜色,6位16进制颜色值alternateVGridAlpha纵向网格带的透明度,[0-100]数字格式numberPrefix增加数字前缀numberSuffix增加数字后缀% 为'%25'formatNumberScale是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M (百万);若取0,则不加K或MdecimalPrecision指定小数位的位数,[0-10] 例如:='0' 取整divLineDecimalPrecision指定水平分区线的值小数位的位数,[0-10] limitsDecimalPrecision指定y轴最大、最小值的小数位的位数,[0-10] formatNumber逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符decimalSeparator指定小数分隔符,默认为'.'thousandSeparator指定千分位分隔符,默认为','Tool-tip/Hover标题showhovercap是否显示悬停说明框,默认为1(True)hoverCapBgColor悬停说明框背景色,6位16进制颜色值hoverCapBorderColor悬停说明框边框颜色,6位16进制颜色值hoverCapSepChar指定悬停说明框内值与值之间分隔符,默认为','折线图的参数lineThickness折线的厚度anchorRadius折线节点半径,数字anchorBgAlpha折线节点透明度,[0-100]anchorBgColor折线节点填充颜色,6位16进制颜色值anchorBorderColor折线节点边框颜色,6位16进制颜色值Set标签使用的参数value 数据值color 颜色link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])name 横向坐标轴标签名称FusionCharts v3新增功能新的3.1版本:使得出口能力为PDF格式的图表和图片在客户端以及服务器端旋转文字并不需要任何更多的嵌入字体。
FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。
FusionCharts Free则是FusionCharts提供的一个免费版本,虽然免费,功能依然强大,图形类型依然丰富。
不得不感叹技术发展的真快,99年的时候,flash刚刚在互联网上流行,那时还只是一个简单的动画软件,编程能力有限。
但现在flash几乎无所不能了,图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 , ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识,你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1,主要做了以下改动:∙增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
∙F usionCharts DOM更加容易地把图表加载到你的页面上。
∙修改了.Net的使用代码和文档。
∙增加了新的PHP API ,并修复了一些BUG。
∙修改了FusionCharts.js ,以便可以支持双引号。
(那就是说以前不支持?)∙增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢?下面就给大家展示一下。
3D/2D 柱形图图片1图片2 曲线图图片3图片43D/2D饼图、环图图片5图片6 区域图图片7图片8 堆栈图图片9图片10联合图图片11图片12 蜡烛图图片13图片14 漏斗图图片15图片16甘特图图片17图片18看了这么多漂亮的图形以后,是不是有点感到兴奋呢?如果把这么漂亮专业的图形放到用户面前,相信他们也会满意的。
FusionCharts图表控件中文版使用手册附注fusionCharts详细属性一、构成fusionCharts的三要素: (3)swf、data.xml、承载图表的载体 (3)二、对于我们还未使用的功能: (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的三要素:swf、data.xml、承载图表的载体1、Swf:按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg:若你想生成一张二维柱状图,那么在你的工程里就必须包含Column2D.swf文件)2、Data.xml:方法一:直接用data.jsp文件替代data.xml文件,写法格式同xml。
FusionCharts 的 XML标签属性有一下四种数据类型* Boolean - 布尔类型,只能为1或者0。
例如:<graph showNames=’1′ >* Number - 数字类型,只能为数字。
例如:<graph yAxisMaxValue=’200′ >* String - 字符串类型,只能为字符串。
例如: <graph caption=’My Chart’ >* Hex Color Code - 十六进制颜色代码,前边没有’#’.例如: <graph bgColor=’FFFFDD’ >XML中的标签和属性有:<graph> 所具有的属性flash背景参数:* bgColor=”HexColorCode” : 设置flash的背景颜色* bgAlpha=”NumericalValue(0-100)” : 设置背景的透明度* bgSWF=”Path of SWF File” : 设置一个外部的Flash 为flash的背景图表背景参数:* canvasBgColor=”HexColorCode” : 设置图表背景的颜色* canvasBaseColor=”HexColorCode” : 设置图表基部的颜色* canvasBaseDepth=”Numerical Value” : 设置图表基部的高度* canvasBgDepth=”Numerical Value” : 设置图表背景的深度* showCanvasBg=”1/0″ : 设置是否显示图表背景* showCanvasBase=”1/0″ : 设置是否显示图表基部图表和轴的标题* caption=”String” : 图表上方的标题* subCaption=”String” : 图表上方的副标题* xAxisName= “String” : X轴的名字* yAxisName= “String” : y轴的名字图表数量值的限制* yAxisMinValue=”value”: y轴最小值* yAxisMaxValue=”value”: y舟最大值通用参数* shownames=”1/0″ : 设置是否在x轴下显示<set>里指定的name* showValues=”1/0″ : 设置是否在柱型图或饼型图上显示数据的值* showLimits=”1/0″ : 设置是否在图表的y轴坐标上显示最大最小的数据值* rotateNames=”1/0″ : 设置x轴下的name 是水平显示还是垂直显示* animation=”1/0″ : 设置柱型图的显示是否是动画显示字体属性* baseFont=”FontName” : 设置字体样式* baseFontSize=”FontSize” : 设置字体大小* baseFontColor=”HexColorCode” : 设置字体颜色* outCnvBaseFont = “FontName” : 设置图表外侧的字体样式* outCnvBaseFontSze=”FontSize” : 设置图表外侧的字体大小* outCnvBaseFontColor=”HexColorCode”: 设置图表外侧的字体颜色数字格式选项* numberPrefix=”$” : 设置数据值的前缀* numberSuffix=”p.a” : 设置数据值的后缀(如果是特殊字符,需要使用URL Encode重编码)* formatNumber=”1/0″ : 设置是否格式化数据* formatNumberScale=”1/0″ : 设置是否用“K”来代表千,“M”来代表百万* decimalSeparator=”.” : 用指定的字符来代替小数点* thousandSeparator=”,” : 用指定的字符来代替千位分隔符* decimalPrecision=”2″ : 设置十进制的精度* divLineDecimalPrecision=”2″: 设置y轴数值的小数位数* limitsDecimalPrecision=”2″ : 设置y轴的最大最小值的小数位数水平分隔线* numdivlines=”NumericalValue” : 设置水平分隔线的数量* divlinecolor=”HexColorCode” : 设置水平分隔线的颜色* divLineThickness=”NumericalValue” : 设置水平分隔线的宽度* divLineAlpha=”NumericalValue0-100″ : 设置水平分隔线的透明度* showDivLineValue=”1/0″ : 设置是否显示水平分隔线的数值鼠标旋停参数* showhovercap=”1/0″ : 显示是否激活鼠标旋停效果* hoverCapBgColor=”HexColorCode” : 设置鼠标旋停效果的背景颜色* hoverCapBorderColor=”HexColorCode” : 设置鼠标旋停效果的边框颜色* hoverCapSepChar=”Char” : 设置鼠标旋停后显示的文本中的分隔符号图表边距的设置* chartLeftMargin=”Numerical Value (in pixels)” : 设置图表左边距* chartRightMargin=”Numerical Value (in pixels)” : 设置图表右边距* chartTopMargin=”Numerical Value (in pixels)” : 设置图表上边距* chartBottomMargin=”Numerical Value (in pixels)” : 设置图表下边距Zero PlaneThe zero plane is a 3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won’t see a visible zero plane.* zeroPlaneShowBorder=”1/0″ : Whether the border of a 3D zero plane would be plotted or not.* zeroPlaneBorderColor=”Hex Code” : If the border is to be plotted, this attribute sets the border color for the plane.* zeroPlaneColor=”Hex Code” : The intended color for the zero plane.* zeroPlaneAlpha=”Numerical Value 0-100″ : The intended transparency for the zero plane.<set> 所具有的属性* name=”string” : 设置在图表中体现出来的名字Example: <set name=’Jan’…>* value=”NumericalValue” : 设置在图表中各个名字想对应的值Example: <set name=’Jan’ value=’12345′…>* color=”HexCode” : 设置在图表中相对应的柱行图的颜色Example: <set name=’Jan’ value=’12345′ color=’636363′…>* hoverText=”String value” : 设置鼠标旋停在相对应的柱行图上出现的文本内容Example: <set name=’Jan’ value=’12345′ color=’636363′ hoverText=’January’…> * link=”URL” : 设置该柱行图的链接地址(需要URL Encode重编码)Example: <set … link=’ShowDetails.asp%3FMonth=Jan’…>* alpha=”Numerical Value 0-100″ : 设置在图表中相对应的柱行图的透明度Example: <set … alpha=’100′…>* showName=”1″ : 设置在是否显示图表中相对应的柱行图的nameExample : <set … showName=”1″…>。
FusionCharts参数的详细说明2011-07-04 17:523D饼图属性(Pie3D.swf )animation 是否显示加载图表时的动画palette 内置的图表样式,共5个paletteColors 自定义图表元素颜色(为多个,如过过少会重复) showAboutMenuItem 右键是否显示"关于FusionCharts" aboutMenuItemLabel 右键关于自定义文字aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式) showZeroPies 是否显示0值的饼showPercentValues labels上是否显示百分数showPercentInToolTip tip上是否显示百分数showLabels 是否显示LabelmanageLabelOverflow 当Label溢出时进行自动管理useEllipsesWhenOverflow 当Label溢出时候使用... showValues 是否显示值labelSepChar label上的分隔符defaultAnimation 是否关闭默认动画一开始自定义动画clickURL 整个图表的点击的url标题caption 主标题subCaption 副标题图表的装饰showBorder 显示边框borderColor 边框颜色borderThickness 边框粗细borderAlpha 边框透明度bgColor 背景颜色bgAlpha 背景透明度bgRatio 背景比例bgAngle 背景角度bgSWF 背景flash地址可以是图片地址bgSWFAlpha 背景flash的透明度showVLineLabelBorderlogoURL log地址logoPosition log位置logoAlpha log透明度logoScale log比例logoLink log链接元素的装饰showPlotBorder 每一片的边框plotBorderColor 每一片的边框颜色plotBorderThickness 每一片的边框粗细plotBorderAlpha 每一片的边框透明度plotFillAlpha 每一片的边框填充透明度use3DLighting 3d光效果饼/圈专有属性slicingDistance 当点击图表的时候这一片饼离开中心点的距离pieRadius 饼的外半径startingAngle 起始角度enableRotation 开启旋转pieInnerFaceAlpha 图表里面的透明度pieOuterFaceAlpha 图表外面的透明度pieYScale 饼立起来的角度,角度越大看到的面积越大. pieSliceDepth 图表的厚度标明线& Labels (label和图表元素之间的线)enableSmartLabels 是否开启标明显skipOverlapLabels 跳过重复标签isSmartLineSlanted 标明线方式(倾斜或直)smartLineColor 标明线颜色smartLineThickness 标明线粗细smartLineAlpha 标明线透明度labelDistancesmartLabelClearance 标明线长度数字formatNumber 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或MdefaultNumberScale 默认数量级numberScaleUnitnumberScaleValuenumberPrefix 数字前缀numberSuffix 数字后缀decimalSeparator 小数分隔符thousandSeparator 千位分割符inDecimalSeparator 在十进位分割符inThousandSeparator 在千位分割符decimals 小数forceDecimals 是否用0填充以至满足要保留的小数位字体baseFont 基本字体baseFontSize 基本字号baseFontColor 基本字颜色Tool-tipshowToolTip 是否显示提示toolTipBgColor 提示背景色toolTipBorderColor 提示边框色toolTipSepChar 提示分隔符showToolTipShadow 是否显示提示Tool-tip阴影边距captionPadding 标题内边距chartLeftMargin 图表左外边距chartRightMargin 图表右外边距chartTopMargin 图表上外边距chartBottomMargin 图表下外边距set元素borderColor 边框颜色isSliced 被切开label [label]value 值color 颜色link 链接(FusionCharts链接格式)toolText 自定义提示图例(3.2版本以上)showLegend 是否显示图例legendPosition 图例位置legendCaption 图例说明legendIconScale 图例图标0-5(图例图标大小) legendBgColor 图例背景色legendBgAlpha 图例透明度legendBorderColor 图例边框颜色legendBorderThickness 图例边框粗细legendBorderAlpha 图例边框透明度legendShadow 图例阴影legendAllowDrag 是否允许拖动图例legendScrollBgColor 图例滚动条背景色legendScrollBarColor 图例滚动条颜色legendScrollBtnColor 图例滚动条按钮颜reverseLegend 反转图例interactiveLegend 图例交互(是否可点击)legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)minimiseWrappingInLegend多系列折线图(MSLine.swf)[default]showLabels 是否显示LabellabelDisplay Label的展示形式(AUTO/WRAP/STAGGER/ROTATE/NONE) useEllipsesWhenOverflow 当Label溢出时候使用...rotateLabels 旋转LabelslantLabels 如果rotateLabels=1,设置label是否偏转个角度.labelStep label步伐(可以设置5个一显示/和category中showLabel='0'有些类似但不完全相同,区别在于这个属性是先展示后去掉不要的label,后者正好相反.这样对label会不会自动折行很有关系)staggerLines 如果labelDisplay='STAGGER',Label显示多少行.showValues 是否显示值valuePosition 值的位置(ABOVE/BELOW/AUTO,上下自动)rotateValues 把值旋转showYAxisValues 是否y轴值showLimits 是否y轴极限值yAxisValuesStep y轴值步伐(距离几个刻度显示一个值) showShadow 是否显示阴影adjustDiv 调整线rotateYAxisName 是否旋转y轴名字yAxisNameWidth y轴名字的宽clickURL 图表点击的urldefaultAnimation 默认动画yAxisMinValue 指定纵轴(y轴)最小值,数字yAxisMaxValue 指定纵轴(y轴)最小值,数字图表标题和轴名称caption 图表主标题subCaption 图表副标题xAxisName 横向坐标轴(x轴)名称yAxisName 纵向坐标轴(y轴)名称图表和画布的样式showBorder 是否显示边框borderColor 边框颜色borderThickness 边框粗细borderAlpha 边框透明度bgColor 图表背景色,6位16进制颜色值bgAlpha 图表背景透明度bgRatio 图表背景的放大缩小比例bgAngle 图表背景的角度bgSWF 图表背景flash也可以是图片地址bgSWFAlpha 图表背景flash的透明度canvasBgColor 画布背景色,6位16进制颜色值canvasBgAlpha 画布透明度,[0-100]canvasBgRatio 画布放大缩小比例canvasBgAngle 画布角度canvasBorderColor 画布边框颜色,6位16进制颜色值canvasBorderThickness 画布边框厚度,[0-100] canvasBorderAlpha 画布边框透明度showVLineLabelBorder[logo]图表元素细节lineColor 线的颜色lineThickness 线的粗细lineAlpha 线的透明度lineDashed 是否虚线lineDashLen 每个小虚线长度lineDashGap 两个小虚线间的距离折点drawAnchors 是否显示折点anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形) anchorRadius 折点半径anchorBorderColor 折点边框颜色anchorBorderThickness 折点边框粗细anchorBgColor 折点背景色anchorAlpha 折点透明度anchorBgAlpha 折点背景透明度分区线和网格numVDivLines 画布内部垂直分区线条数,数字vDivLineColor 垂直分区线颜色,6位16进制颜色值vDivLineThickness 垂直分区线厚度,[1-5]vDivLineAlpha 垂直分区线透明度,[0-100]vDivLineIsDashed 垂直分区线是否为虚线vDivLineDashLen 垂直分区线每个虚线长度vDivLineDashGap 垂直分区线2个虚线间距离showAlternateVGridColor 是否在纵向网格带交替的颜色,默认为0(False) alternateVGridColor 纵向网格带交替的颜色,6位16进制颜色值alternateVGridAlpha 纵向网格带的透明度,[0-100]numDivLines 画布内部水平分区线条数,数字divLineColor 水平分区线颜色,6位16进制颜色值divLineThickness 水平分区线厚度,[1-5]divLineAlpha 水平分区线透明度,[0-100]divLineIsDashed 水平分区线是否为虚线divLineDashLen 水平分区线每个虚线长度divLineDashGap 水平分区线2个虚线间距离zeroPlaneColor 0线颜色zeroPlaneThickness 0线粗细zeroPlaneAlpha 0线透明度showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False) alternateHGridColor 横向网格带交替的颜色,6位16进制颜色值alternateHGridAlpha 横向网格带的透明度,[0-100] showZeroPlane 是否显示0线[图例]字体属性baseFont 图表字体baseFontSize 图表字体大小baseFontColor 图表字体颜色,6位16进制颜色值outCnvBaseFont 图表画布以外的字体样式outCnvBaseFontSize 图表画布以外的字体大小outCnvBaseFontColor 图表画布以外的字体颜色,6位16进制颜色值[Tool-tip]图表的内外边距captionPadding 标题内边距chartLeftMargin 图表左外边距chartRightMargin 图表右外边距chartTopMargin 图表上外边距chartBottomMargin 图表下外边距Set标签value 数据值displayValue 显示的值color 颜色link 链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[java script:函数])toolText 自定义提示showValue 是否显示值valuePosition 值得位置alpha 透明度anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形) anchorRadius 折点半径anchorBorderColor 折点边框颜色anchorBorderThickness 折点边框粗细anchorBgColor 折点背景色anchorAlpha 折点透明度anchorBgAlpha 折点背景透明度dashed 虚线3D柱状图(Column3D.swf )图表样式canvasBaseColor 底盘颜色showCanvasBase 是否显示底盘canvasbasecolor 底盘颜色柱图元素细节plotGradientColor 渐变色2D条图(Bar2D.swf )区分线及网格alternateVGridColor 垂直网格交替的颜色。
说明:1、颜色值使用16进制表示,不需要#前缀,比如红色:FF00002、透明度,有效范围0~1003、下面的例图是用2D柱状图有需要的时候会引入其他类型的图。
4、布尔类型的值都用’1’和’0’表示。
1、背景(Background)bgColor="FF0000" bgColor="00FF00" bgColor="FF0000,00FF00"相关属性参数:1):bgColor 设置背景颜色。
(多个颜色则显示为渐变效果)举例说明(最希望你懂的):A: bgColor="FF0000" 使用红色背景。
B: bgColor="FF0000,00FF00" 使用红色到绿色的渐变作为背景。
2):bgAlpha 背景透明度,值的个数和颜色值一致。
3):bgRatio 各个背景色的比例,值的个数和颜色值一致,总和为100(颜色渐变时使用该属性)4):bgAngle 背景渐变的方向,0~360 :(颜色渐变时使用该属性)0表示从左向右渐变45表示从左上角到右下角渐变90表示从上向下渐变180表示从右向左渐变360和0一样表示从左向右渐变其他角度类推。
见下图个角度效果(下图颜色设置为bgColor="FF0000,00FF00,0000FF")0 45 90 1805):bgSWF 使用背景图片,可以是图片或者swf的flash,图片必须和图表在同一域名下。
6):bgSWFAlpha 背景图片的透明度。
(0背景图不可见, 100背景图最清晰)2、边框(Border)showBorder='1' showBorder='0'相关属性参数:1):showBorder 设置是否显示边框 1:显示 0:不显示默认值:2D类图表显示边框, 3D类图表不显示。
2):borderColor 边框颜色。
f u s i o n C h a r t s属性参考精选集团标准化办公室:[VV986T-J682P28-JP266L8-68PNN]fusionCharts属性参考API转自:一.FusionCharts的分类关于FusionCharts的基本介绍我就不在这里浪费篇幅了,想了解的朋友自己去官网里面找吧。
我就说说FusionCharts的官方四大分类:每种类型我还是贴个图吧(从左到右依次对应):二.关于FusionCharts,FusionCharts分类有很多种。
按数据类型分类有:1.单组数据类型图表(SingleDataCharts)2.多组数据类型图表(Multi-DataCharts)按图的展示类型分类(也是官方分类)有:1.单系列图表(SingleSeriesCharts)2.多系列图表(Multi-SeriesCharts)3.堆积式图表(StackedCharts)4.组合图表(CombinationCharts)5.分布图(XYPlotCharts)6.滚动图(ScrollCharts)其实我们的项目中通常所说的分类就是按数据类型分类的,这个分类是我们自己在实际工作中总结出来的。
而按图形展示来分类是FusionCharts官方文档的分类,是很标准的分类。
数据类型分类如图(从左到右依次对应):图的展示类型分类(从左到右依次对应):三.关于FusionCharts的Attributes(属性)关于FusionCharts的FusionCharts中很多不同的图、不同类型的图其实有很多共通的属性,当然也有一些各自特殊的属性。
下面我先来给大家介绍这些共通的属性吧。
上图为FusionCharts的FusionCharts中的属性。
我将拿此图的属性作为例子讲解,因为此图的属性几乎全部为通用属性。
(具体是99%通用还是100%通用这个我还真没有统计过,至少是95%通用吧)。
属性的分类就以官方的API文档为准吧::<1>FunctionalAttributes(功能属性)<2>TitlesandAxisNames(标题和坐标抽名字)<3>ChartsCosmetics(图表美容属性)<4>DivisionalLines/Grids(分区线/网格属性)<5>Tool-tip(工具提示属性)<6>PaddingsandMargins(填充和边距属性):<1><set>element(set元素属性)<2>PlotCosmetics(节点美容属性):<1>NumberFormatting(数字格式化属性)<2>FontProperties(字体属性)<3>VerticalLines(垂直线属性)<4>TrendLines(趋势线属性)。
FusionChart的参数详细说明(2)<chart caption='各地市对比图' xAxisName='' yAxisName='' outCnvBaseFontColor='#000000' showValues='0' decimals='3' formatNumberScale='0' baseFontSize='13' bgAlpha='40' bgColor='#F3EED1' legendPadding='0' slantLabels='1' showLabels='1' chartLeftMargin='1' chartRightMargin='1' chartTopMargin='1' chartBottomMargin='1' canvasBgColor='#F9F9F9' canvasBaseColor='#F9F9F9' canvasBaseDepth='3' showCanvasBg='1' showCanvasBase='1'><set lable='...'value='...'/><set lable='...' value='...'/><setlable='...' value='...'/><set lable='...' value='...'/></chart>FusionCharts 的XML标签属性有一下四种数据类型* Boolean - 布尔类型,只能为1或者0。
功能特性
animation 是否动画显示数据,默认为 1(True) showNames 是否显示横向坐标轴(x轴)标签名称rotateNames 是否旋转显示标签,默认为0(False):横向显示showValues 是否在图表显示对应的数据值,默认为
1(True)
yAxisMinValue 指定纵轴(y轴)最小值,数字
yAxisMaxValue 指定纵轴(y轴)最小值,数字
showLimits 是否显示图表限值(y轴最大、最小值),默认为1(True)
showColumnShadow 是否显示各条形图间的阴影(若柱面图在一起并列的话)showAlternateHGridColor 是否隔行显示不同颜色
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
imageSave='1' 是否保存图片
imageSaveURL='Path/FusionChartsSave.jsp '图片路径
hoverCapSepChar=','。
鼠标放到柱面上时显示的提示信息的分隔符showhovercap='1' 鼠标放到柱面上时是否显示提示信息hoverCapBgColor=‘ffffff’提示信息背景颜色
图表和画布的样式
bgColor 图表背景色,6位16进制颜色值canvasBgColor 画布背景色,6位16进制颜色值canvasBgAlpha 画布透明度,[0-100]
canvasBorderColor 画布边框颜色,6位16进制颜色值canvasBorderThickness 画布边框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否显示系列名,默认为1(True)
字体属性
baseFont 图表字体样式
baseFontSize 图表字体大小
baseFontColor 图表字体颜色,6位16进制颜色值outCnvBaseFont 图表画布以外的字体样式outCnvBaseFontSize 图表画布以外的字体大小outCnvBaseFontColor 图表画布以外的字体颜色,6位16进制颜色值
分区线和网格
numDivLines 画布内部水平分区线条数,数字
divLineColor 水平分区线颜色,6位16进制颜色值divLineThickness 水平分区线厚度,[1-5]
divLineAlpha 水平分区线透明度,[0-100]
showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False) alternateHGridColor 横向网格带交替的颜色,6位16进制颜色值alternateHGridAlpha 横向网格带的透明度,[0-100] showDivLineValues 是否显示Div行的值,默认??numVDivLines 画布内部垂直分区线条数,数字
vDivLineColor 垂直分区线颜色,6位16进制颜色值vDivLineThickness 垂直分区线厚度,[1-5]
vDivLineAlpha 垂直分区线透明度,[0-100] showAlternateVGridColor 是否在纵向网格带交替的颜色,默认为0(False) alternateVGridColor 纵向网格带交替的颜色,6位16进制颜色值alternateVGridAlpha 纵向网格带的透明度,[0-100]
数字格式
numberPrefix 增加数字前缀
numberSuffix 增加数字后缀 % 为 '%25' / (吨)为
‘%ef%bc%88%e5%90%a8%ef%bc%89’(Server.UrlEncode编码)formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数
字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision 指定小数位的位数, [0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分区线的值小数位的位数, [0-10] limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数,[0-10] formatNumber 逗号来分隔数字(千位,百万位),默认为
1(True);若取0,则不加分隔符
decimalSeparator 指定小数分隔符,默认为'.' thousandSeparator 指定千分位分隔符,默认为','
Tool- tip/Hover标题
showhovercap 是否显示悬停说明框,默认为1(True) hoverCapBgColor 悬停说明框背景色,6位16进制颜色值hoverCapBorderColor 悬停说明框边框颜色,6位16进制颜色值hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness 折线的厚度
anchorRadius 折线节点半径,数字
anchorBgAlpha 折线节点透明度,[0-100]
anchorBgColor 折线节点填充颜色,6位16进制颜色值anchorBorderColor 折线节点边框颜色,6位16进制颜色值
Set标签使用的参数
value 数据值
color 颜色
link 链接(本窗口打开[Url],新窗口打开[n-Url],
调用JS函数[JavaScript:函数])
name 横向坐标轴标签名称
showFCMenuItem='0' 设置右键显示不显示
1. varmyChart= newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "
500");
第一个参数是SWF 文件的地址。
第二个是图形的id。
这个id 你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有
多个图形的时候,这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
1. myChart.setDataURL("Data.xml");
最后,我们把图形渲染在指定的地方。
1. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id,这就表示把图形render 到"chartdiv"。
现在你运行JSChart.html,你会看到同Chart.html 一样的效果。
很显然使用JavaScript 加载
图形,更方便,更直观。
如果你想在一个新的窗口打开页面,只需要在连接的前面加上“n-”,就像下面的代码一样:
1. <graph caption='Monthly Sales Summary' subcaption='For the year 2006 '
2. xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
3. <set name='Jan' value='1 7400' link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8' />
XML数据节点和常用属性详解
caption=‘标题‘
subcaption=‘子标题‘
clickURL=‘abc.jsp‘ 点击整个图表时跳转到abc.jsp
xAxisName=部门‘
numberPrefix =‘¥’ 数据前缀单位
numberSuffix =‘个’ 数据后缀单位
Decimals=‘2’ 保留两位小数,四舍五入
forceDecimals=‘2’ 强制保留两位小数,对于5.1 转换为5.10 yAxisName=‘完成率’
如果使用汉字汉符需加属性:rotateYAxisName=‘1’
showValues=‘1’
yAxisMaxValue=‘100’
对于百分比的常用bgColor='999999,FFFFFF‘渐变bgColo r=‘999999 ’ 单色useRoundEdges=‘1’ 光线效果
baseFont=‘宋体‘
baseFontSize='12'
baseFontColor='333333'。