FusionCharts参数说明
Fusioncharts属性大全
边框和背景是否显示边框，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加粗。
fusionchars属性
在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配置说明
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详细说明
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_柱状图详解
取值范围
自定义 0~100 0~100
属性含义
背景 （chart 所在位置） 颜色。 用法： bgColor=’ 99CCFF,FFFFFF’ 背景透明度。用法：bgAlpha=‘40,100’ 如果背景颜色有多个，该属性设置两种颜 色在面板中所占比例（上下显示） 。用法： bgRatio=’0,100’
aboutMenuItemLabel aboutMenuItemLink
string string
showLabels
string Boolean
子标题 是否显示 label，当没有 xAxisName 属性时， 值为 1 仅显示的是 x 坐标而没有 x 轴名称， 当 有 xAxisName 属性时，该属性无效 属性需在 rotateLabels=1 或 labelDisplay=ROTATE 时同时使用
Boolean number
0/1 自定义像素 值
clikURL maxColWidth
string number
自定义 自定义像素 值
use3DLighting defaultAnimation
Boolean Boolean
0/1 0/1 自定义 自定义 0/1
是否显示 3D 光线效果，默认显示（1） 是否使用默认动画，默认为使用（1） ，与 animation 属性相似
bgSWFAlpha canvasBgColor canvasBgAlpha canvasBaseColor showCanvasBg showCanvasBase canvasBaseDepth canvasBgDepth showBorder borderColor borderThickness borderAlpha showVLineLabelBorder logoURL logoPosition
FusionChart中文使用手册
一、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>结束。
FusionCharts参数说明——3D饼图属性(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。
FusionChart完全入门手册
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>这里指定了资源文件和数据文件并用控制文件调用资源文件和数据文件，在页面显示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
功能特性
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'。