非常全面FusionCharts插件+二次开发指南-海文库
全站搜索：
您现在的位置：&>&&>&能源/化工
非常全面FusionCharts插件+二次开发指南
非常全面FusionCharts插件二次开发指南
FusionCharts1.FusionCharts介绍：FusionCharts是一个基于Flash的图表组件，可以用来提供数据驱动的动态图表，fusioncharts可用于任何网页脚本语言，如HTML，JSP等。提供交互式和强大的动态图标，fusioncharts充分利用流体美的Flash为模版，使用XML作为数据接口，产生和用户互动的动态图表。2.数据接口XML：FusionCharts是以XML为数据接口而成图表。提供XML两种形式：直接以XML文件提供数据。基于数据库数据动态生成XML。3.FusionCharts安装（以java的web工程为例）：? 将所有的SWF文件拷贝到WebRoot下的一个自己创建的文件夹。? 拷贝FusionCharts.jsp文件到WebRoot下（可以将其放在WebRoot下的某个文件夹中），这个文件包含生成的flash图标嵌入到jsp或者HTML中。? 拷贝FusionCharts.js，这个文件提供了createChartHTML函数使我们轻松的创建图表。4.创建一个Chart（以Column 2D为例）：以本地为例，首先创建一个FusionCharts的文件夹（D:\FusionCharts）。把下载根目录下的Charts文件夹拷贝过来，这里就包含了所有的我们要引用的SWF文件，然后拷贝FusionCharts.js文件到该目录下，将就需要创建XML数据文档：&chart palette='2' caption='Unit Sales'
xAxisName=&month& yAxisName='Units' decimals='1' showValues='1' formatNumberScale='0' useRoundEdges='1'&&set label='Jan' value='462' /&&set label='Feb' value='857' /&&set label='Mar' value='671' /&&set label='Apr' value='494' /&&set label='May' value='761' /&
&set label='Jun' value='960' /&&/chart&接下来创建一个包含图形的HTML页面：&?xml version=&1.0& encoding=&iso-8859-1&?&&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&html xmlns=&http://www.w3.org/1999/xhtml&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=iso-8859-1& /&&title&FusionCharts v3 Documentation&/title&&link rel=&stylesheet& href=&../Contents/Style.css& type=&text/css& /&&script language=&JavaScript& src=&../JSClass/FusionCharts.js&&&/script&&/head&
&body&&table width=&98%& border=&0& cellspacing=&0& cellpadding=&3& align=&center&&&tr&&td valign=&top& class=&text& align=&center&& &div id=&chartdiv& align=&center&&FusionCharts. &/div&&script type=&text/javascript&&var chart = new FusionCharts(&../Charts/Column2D.swf&, &ChartId&, &500&, &300&, &0&, &0&);
chart.setDataURL(&../Data/Column2D.xml&);chart.render(&chartdiv&);&/script& &/td&&/tr&&tr&&td valign=&top& class=&text& align=&center&&&&/td&&/tr&&tr&&td valign=&top& class=&text& align=&center&&&a href=&Data/Column2D.xml& target=&_blank&&&img src=&../Contents/Images/BtnViewXML.gif& alt=&View XML for the above chart& width=&75& height=&25& border=&0& /&&/a&&/td&&/tr&&/table&&/body&&/html&这样就生成了如Column 2D Chart图例所示，其他图形只需要正确的SWF文件和XML文件代替上面代码中红色标记的地方即可生成需要的图形。以上对FusionCharts的数据接口、安装步骤和创建也适用于后面介绍的FusionMaps、FusionWidgets、PowerCharts。以下介绍各个图形的属性，注意：Column 2D ChartSWF：Column2D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）
分区线/网格 属性（Divisional Lines/Grids）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Column3D ChartSWF: Column3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）
分区线/网格 属性（Divisional Lines/Grids）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法： &trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Pie 2D ChartSWF: Pie2D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
饼图/环图属性（Pie / Doughnut Properties）
连接线/标签（Smart Lines & Labels）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
Pie 3D ChartSWF: Pie3D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
饼图/环图属性（Pie / Doughnut Properties）
连接线/标签（Smart Lines & Labels）
数字格式化（Number Formatting）
字体属性（Font Properties）工具提示（Tool-Tip）图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
Doughnut 2D ChartSWF: Doughnut2D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
饼图/环图属性（Pie / Doughnut Properties）
连接线/标签（Smart Lines & Labels）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
Doughnut 3D ChartSWF: Doughnut3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
饼图/环图属性（Pie / Doughnut Properties）
连接线/标签（Smart Lines & Labels）
数字格式化（Number Formatting）
字体属性（Font Properties）工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
Scroll Column 2D ChartSWF: ScrollColumn2D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
滚动属性（Scroll Properties）分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）
&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法： &trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Stacked Column 2D ChartSWF: StackedColumn2D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）
分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Stacked Column 3D ChartSWF: StackedColumn3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）
&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法： &trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Scroll Stacked Column 2D ChartSWF：ScrollStackedColumn2D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）
滚动属性（Scroll Properties）
分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）
&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如： &vLine color='FF5904' thickness='2' label=' ' /&
&dataset&元素（&dataset&
Elenment）
&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Line(单条曲线)SWF: Line.swf图列
Xml&chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' yAxisMinValue='15000'
numberPrefix='$' showValues='0' alternateHGridColor='FCB541' alternateHGridAlpha='20' divLineColor='FCB541' divLineAlpha='50' canvasBorderColor='666666' baseFontColor='666666' lineColor='FCB541'&&set label='Jan' value='17400' /&&set label='Feb' value='19800' /&&set label='Mar' value='21800' /&&set label='Apr' value='23800' /&&set label='May' value='29600' /&&set label='Jun' value='27600' /&&set label='Jul' value='31800' /&&set label='Aug' value='39700' /&&set label='Sep' value='37800' /&&set label='Oct' value='21900' /&&set label='Nov' value='32900' /&&set label='Dec' value='39800' /&
&styles&&definition&&style name='Anim1' type='animation' param='_xscale' start='0' duration='1' /&
&style name='Anim2' type='animation' param='_alpha' start='0' duration='0.6' /&
&style name='DataShadow' type='Shadow' alpha='40'/&
&/definition&
&application&
&apply toObject='DIVLINES' styles='Anim1' /&
&apply toObject='HGRID' styles='Anim2' /&
&apply toObject='DATALABELS' styles='DataShadow,Anim2' /&
&/application&
&/styles& &/chart&&chart& 元素属性
图标外观显示
数据曲线属性
数据点(Anchors)的属性
分区网格属性
Tool-tip属性
Chart Padding
垂直数据分隔线垂直数据分割线:如果有一条曲线在set中添加: &vLine color='FF5904' thickness='20'/&
目标曲线的属性(Trend-lines)&trendLines&&line startValue='300000' color='FF0000' displayvalue='Average' /&
Scroll Line Api(滚动曲线)SWF: ScrollLine2D.swf图列
&chart& 元素属性
图表标题和坐标名称(Chart Titles and Axis Names)图标外观显示(Chart Cosmetics)
数据曲线属性滚动条Scroll的数性
数据点(Anchors)的属性
分区网格属性
Legend属性
Tool-tip属性
Categories属性
属性垂直数据分隔线垂直数据分割线:如果有一条曲线在set中添加: &vLine color='FF5904' thickness='20'/&
Dataset属性
Set的属性值
目标曲线的属性(Trend-lines)&trendLines&&line startValue='895' color='FF0000' displayvalue='Average' /&
MsLine(多条曲线)SWF: MsLine.swf
Chart 元素属性
标题属性图标外观显示
数据曲线属性数据点(Anchors)的属性
分区网格属性
Legend属性
Tool-tip属性
Chart Padding
Categories属性
Category属性
垂直数据分隔线垂直数据分割线:如果有一条曲线在set中添加: &vLine color='FF5904' thickness='20'/&如果有多条曲线在Categories中添加: &vLine color='FF5904' thickness='20'/&
Dataset属性
Set的属性值
标曲线的属性(Trend-lines)&trendLines&&line startValue='895' color='FF0000' displayvalue='Average' /&
Bar 2D Chart这个图中的x轴和y轴和平时理解的x轴和y轴恰好相反.SWF: Bar2D.swf图例
(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
分区线/网格 属性（Divisional Lines/Grids）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Stacked Bar 2D ChartSWF: StackedBar2D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）
分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如： &vLine color='FF5904' thickness='2' label=' ' /&
&dataset&元素（&dataset&
Elenment）
&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法： &trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Stacked Bar 3D ChartSWF: StackedBar3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）
&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如： &vLine color='FF5904' thickness='2' label=' ' /&
&dataset&元素（&dataset&
Elenment）
&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Multi-series Column 2D ChartSWF: MsColumn2D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Multi-series Column 3D ChartSWF: MsColumn3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）&set&标签(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Multi-series Bar 2D ChartSWF: MsBar2D.swf图例
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）适用于columns, lines, area, pie or any data that you're plotting
分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）图表填充和边距属性（Chart Padding & Margins）
&set&标签(&set& Element)
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法： &trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
Multi-series Bar 3D ChartSWF: MsBar3D.swf
功能属性(Functional Attributes)
图表标题和坐标名称(Chart Titles and Axis Names)
图表美观属性(Charts Cosmetics)
数据节点美观属性（Data Plot Cosmetics）分区线/网格 属性（Divisional Lines/Grids）
图文属性（Legend Properties）
数字格式化（Number Formatting）
字体属性（Font Properties）
工具提示（Tool-Tip）
图表填充和边距属性（Chart Padding & Margins）
&categories&元素（&categories& element）
&category&元素（&category& element）
数据的垂直分割线（Vertical data separator lines）这里的属性属于&vLine&标签，用法如：
&dataset&元素（&dataset&
Elenment）
&set&元素(&set& Element)
趋势线属性（Trend-lines）这里的属性属于&line&标签，用法：&trendLines&&line
startValue='895' color='FF0000' displayvalue='Average'/&
FusionMapFusionMap主要是矢量地图，可以用来显示相关地域的数据收集，这些图片都是有XML数据源驱动，可以在网页动态的交换数据，可以在任何脚本以及数据库中应用。FusionMap操作简单，只要修改XML中的数据，其它的不做任何修改，就可以很快的在地图上显示出数据。图列
Xml&?xml version=&1.0& encoding=&utf-8&?&&map animation=&0& showMarkerLabels=&1& exposeHoverEvent=&1& bgAlpha=&0& bgColor=&000000& baseFontSize=&12& numberSuffix=&mail& showCanvasBorder=&0& canvasBorderColor=&f1f1f1& canvasBorderThickness=&1& borderColor=&ffffff& hoverColor=&34d1ca& legendPosition=&0&legendBgColor=&ffffff& legendBgAlpha=&40& legendShadow=&0& forceDecimals=&1& decimalPrecision=&4& legendBorderColor=&97F8F6&&&data&&entity id=&CN.BJ& name=&011011& color=&558ED5& displayValue=&北京& fontColor=&333333& showLabel=&1& tooltext=&北京& link=&view/beijing.jsp&/&&entity id=&CN.SH& name=&013035& color=&558ED5& displayValue=&上海& fontColor=&dddddd& showLabel=&1& tooltext=&上海& link=&view/shanghai.jsp&/&&entity id=&CN.TJ& name=&011016& color=&558ED5& displayValue=&天津& fontColor=&dddddd& showLabel=&1& tooltext=&天津& link=&view/tianjin.jsp&/&&entity id=&CN.CQ& name=&014047& color=&558ED5& displayValue=&重庆& fontColor=&333333& showLabel=&1& tooltext=&重庆& link=&view/chongqing.jsp&/&&entity id=&CN.ZJ& name=&013033& color=&558ED5& displayValue=&浙江& fontColor=&333333& showLabel=&1& tooltext=&浙江& link=&javaScript:gdIndexView('013033')&/&&entity id=&CN.FJ& name=&013037& color=&558ED5& displayValue=&福建& fontColor=&333333& showLabel=&1& tooltext=&福建& link=&view/fujian.jsp&/&&entity id=&CN.JX& name=&014044& color=&558ED5& displayValue=&江西& fontColor=&333333& showLabel=&1& tooltext=&江西& link=&javaScript:gdIndexView('014044')&/&&entity id=&CN.HB& name=&011013& color=&558ED5& displayValue=&河北& fontColor=&333333& showLabel=&1& tooltext=&河北& link=&javaScript:gdIndexView('011013')&/&&entity id=&CN.HE& name=&014041& color=&558ED5& displayValue=&河南& fontColor=&333333& showLabel=&1& tooltext=&河南& link=&javaScript:gdIndexView('014041')&/&&entity id=&CN.HU& name=&014042& color=&558ED5& displayValue=&湖北& fontColor=&333333& showLabel=&1& tooltext=&湖北& link=&javaScript:gdIndexView('014042')&/&&entity id=&CN.HN& name=&014043& color=&558ED5& displayValue=&湖南& fontColor=&333333& showLabel=&1& tooltext=&湖南& link=&javaScript:gdIndexView('014043')&/&&entity id=&CN.JS& name=&013032& color=&558ED5& displayValue=&江苏& fontColor=&333333& showLabel=&1& tooltext=&江苏& link=&javaScript:gdIndexView('013032')&/&&entity id=&CN.XZ& name=&010154& color=&558ED5& displayValue=&西藏& fontColor=&333333& showLabel=&1& tooltext=&西藏& link=&javaScript:gdIndexView('016066')&/&&entity id=&CN.LN& name=&012021& color=&558ED5& displayValue=&辽宁& fontColor=&333333& showLabel=&1& tooltext=&辽宁& link=&javaScript:gdIndexView('012021')&/&&entity id=&CN.NX& name=&016064& color=&558ED5& displayValue=&宁夏& fontColor=&333333& showLabel=&1& tooltext=&宁夏& link=&javaScript:gdIndexView('016064')&/&&entity id=&CN.SX& name=&011014& color=&558ED5& displayValue=&山西& fontColor=&333333& showLabel=&1& tooltext=&山西& link=&javaScript:gdIndexView('011014')&/&&entity id=&CN.SA& name=&016061& color=&558ED5& displayValue=&陕西& fontColor=&333333& showLabel=&1& tooltext=&陕西& link=&javaScript:gdIndexView('016061')&/&&entity id=&CN.JL& name=&012022& color=&558ED5& displayValue=&吉林& fontColor=&333333&
showLabel=&1& tooltext=&吉林& link=&javaScript:gdIndexView('012022')&/&&entity id=&CN.XJ& name=&016065& color=&558ED5& displayValue=&新疆& fontColor=&333333& showLabel=&1& tooltext=&新疆& link=&javaScript:gdIndexView('016065')&/&&entity id=&CN.SD& name=&011017& color=&558ED5& displayValue=&山东& fontColor=&333333& showLabel=&1& tooltext=&山东& link=&view/shandong.jsp&/&&entity id=&CN.HL& name=&012023& color=&558ED5& displayValue=&黑龙江& fontColor=&333333& showLabel=&1& tooltext=&黑龙江& link=&javaScript:gdIndexView('012023')&/&&entity id=&CN.QH& name=&016063& color=&558ED5& displayValue=&青海& fontColor=&333333& showLabel=&1& tooltext=&青海& link=&javaScript:gdIndexView('016063')&/&&entity id=&CN.SC& name=&014046& color=&558ED5& displayValue=&四川& fontColor=&333333& showLabel=&1& tooltext=&四川& link=&javaScript:gdIndexView('014046')&/&&entity id=&CN.GS& name=&016062& color=&558ED5& displayValue=&甘肃& fontColor=&333333& showLabel=&1& tooltext=&甘肃& link=&javaScript:gdIndexView('016062')&/&&entity id=&CN.GZ& name=&& color=&7F7F7F& displayValue=&贵州& fontColor=&333333& showLabel=&1& tooltext=&贵州& link=&&/&&entity id=&CN.YN& name=&& color=&7F7F7F& displayValue=&云南& fontColor=&333333& showLabel=&1& tooltext=&云南& link=&&/&&entity id=&CN.AH& name=&013034& color=&558ED5& displayValue=&安徽& fontColor=&333333& showLabel=&1& tooltext=&安徽& link=&javaScript:gdIndexView('013034')&/&&entity id=&CN.GX& name=&& color=&7F7F7F& displayValue=&广西& fontColor=&333333& showLabel=&1& tooltext=&广西& link=&&/&&entity id=&CN.GD& name=&& color=&7F7F7F& displayValue=&广东& fontColor=&333333& showLabel=&1& tooltext=&广东& link=&&/&&entity id=&CN.Hk& name=&& color=&7F7F7F& displayValue=&香港& fontColor=&dddddd& showLabel=&1& tooltext=&香港& link=&&/&&entity id=&CN.MA& name=&& color=&7F7F7F& displayValue=&澳门& fontColor=&dddddd& showLabel=&1& tooltext=&澳门& link=&&/&&entity id=&CN.HA& name=&& color=&7F7F7F& displayValue=&海南& fontColor=&333333& showLabel=&1& tooltext=&海南& link=&&/&&entity id=&CN.TA& name=&& color=&7F7F7F& displayValue=&台湾& fontColor=&333333& showLabel=&1& tooltext=&台湾& link=&&/&&entity id=&CN.NM.MD& name=&012024& color=&558ED5& displayValue=&蒙东& fontColor=&333333& showLabel=&1& tooltext=&蒙东& link=&javaScript:gdIndexView('012024')&/&&entity id=&CN.NM.MX& name=&& color=&7F7F7F& displayValue=&蒙西& fontColor=&333333&showLabel=&1& tooltext=&蒙西& link=&&/&&/data&&styles&&definition&&style name=&TTipFont& type=&font& isHTML=&1& color=&ffffff& bgColor=&666666& size=&12&/&&style name=&HTMLFont& type=&font& color=&333333& borderColor=&CCCCCC& bgColor=&FFFFFF&/&
&style name=&myShadow& type=&Shadow& distance=&1&/&&/definition&&application&&apply toObject=&MARKERS& styles=&myShadow&/&
&apply toObject=&MARKERLABELS& styles=&HTMLFont,myShadow&/&
&apply toObject=&TOOLTIP& styles=&TTipFont,Shadow&/&
&/application&
&/map&Map功能属性
Map外观属性
Map数字格式
Map字体属性
Map实体属性
是否保存为图片图例属性这个属性需要对颜色的分组才可以生效，通过对颜色的图例进行属性的设置，下面首先是怎么分组，通过实例来说明，首先设定一个值的范围颜色，然后value的值就对应着颜色，如下例 &colorRange&&color minValue='0' maxValue='500' displayValue='Sparsely Populated'
color='A7E9BC' /&
&color minValue='500' maxValue='1000' displayValue='Well Populated' color='FFFFCC' /&
&color minValue='1000' maxValue='5000' displayValue='Densely Populated' color='FF9377' /&&/colorRange&
&data&&entity id='NA' value='515' /&
&entity id='SA' value='373' /&
&entity id='AS' value='3875' /&
&entity id='EU' value='727' /&
&entity id='AF' value='885' /&
&entity id='AU' value='32' /&
提示信息地图边距
&entity&实体属性在每个单独的entity实体中
对entity 中id设别名通过例子来说明正常情况下，在中国地图中要显示新疆的数据，那么id=? CN.XJ?,下列起别名‘xj’ &entityDef&&entity internalId='CN.XJ' newId='xj' sName='N.Am' lName='N. America'/& &/entityDef&其中 newid 是新的id，sName 是新的显示值,lName 是提示框显示的值。 &entity id='xj' value ='' color='e52800' /&标签属性显示标签，如下: &markers&
&definition&&marker id='HO' x='140.09' y='165.19' label='Head Office' /&
&marker id='PF' x='533.37' y='182.25' label='Production Center' /&
&marker id='SA' x='447.04' y='106.57' label='Sales' /&
&/definition&
&application&
&marker id='HO' shapeId='circle' /&
&marker id='PF' shapeId='arc' /&
&marker id='SA' shapeId='triangle' /&
&/application&
&/markers&标签连线&connectors&&connector from='HO' to='PF' toolText='' dashed='0' color='00577F' alpha='40'/&&connector from='SA' to='HO' toolText='Chicago - Atlanta: 606 miles' color='00577F' alpha='40'/&&connector from='SA' to='PF' toolText='Seattle - Los Angeles: 954 miles' dashed='1' color='00577F'/&
&/connectors标签属性
标签图片这部分就举个例子，就是标签可以导入图片。 &markers&&definition&&marker id='CA' x='116.65' y='94.85' label='Sales Office' labelPos='top'/&
&/definition&
&shapes&&shape id=' CAMap ' type='image' url='Resources/us_flag.jpg' labelPadding='12' /&
&/shapes&&application&&marker id='CA' shapeId='CAMap' toolText='Canada&BR&2 Managers&BR&11 Staff'/&&/application&
&/markers&
&definition&Style属性在style中设置了相关的属性，那么在头部设置不会生效，它是会以style中的为标准。 举例说明 style的格式
在Style属性中不同对象又包含以下属性： Font 属性：
Shadow属性Glow的属性Bevel(厚度，好像有点3D效果)Blur的属性(模糊)
FusionWidgetsFusionWidgets是一个测量控件和仪表控件的结合，可以利用它来开发金融应用程序，仪表盘，执行状况面板，实时股票监视器以及生产过程坚持程序等，FusionWidgets对于那些有数据可是化以及数据分析需求的应用特别适合，如:关键绩效指标以及其它鉴定数据被实施监控的的应用程序。FusionWidgets最大的亮点就是实时监控。仪表盘(Angular Gauge)介绍仪表盘主要是用来监测每个实时变化的指标值，如车速表，燃油表，电压表等。仪表盘可以很清晰的显示出所需数据。并且仪表盘给用户以很明了，很直观的视觉感受。 图形下面是仪表盘的各种图形
Xml这是以第一个仪表盘为例的xml&chart bgAlpha=&0& bgColor=&FFFFFF& lowerLimit=&0& upperLimit=&100& numberSuffix=&%25& showBorder=&0& basefontColor=&FFFFDD& chartTopMargin=&25& chartBottomMargin=&25&chartLeftMargin=&25& chartRightMargin=&25& toolTipBgColor=&80A905& gaugeFillMix=&{dark-10},FFFFFF,{dark-10}& gaugeFillRatio=&3&& &colorRange&&color minValue=&0& maxValue=&45& code=&FF654F&/&&color minValue=&45& maxValue=&80& code=&F6BD0F&/&&color minValue=&80& maxValue=&100& code=&8BBA00&/&&/colorRange&&dials&&dial value=&92& rearExtension=&10&/&&/dials&&trendpoints&&point value=&50& displayValue=&Average& fontcolor=&FF4400& useMarker=&1& dashed=&1& dashLen=&2& dashGap=&2& valueInside=&1&/&&/trendpoints&&!-- Rectangles behind the gauge --&&annotations&&annotationGroup id=&Grp1& showBelow=&1&&&annotation type=&rectangle& x=&5& y=&5& toX=&345& toY=&195& radius=&10& color=&333& showBorder=&0&/&&/annotationGroup&&/annotations&&styles&&definition&&style name=&RectShadow& type=&shadow& strength=&3&/&&/definition&&application&&apply toObject=&Grp1& styles=&RectShadow&/&&/application&&/styles&&/chart&
轴线(Aixs)属性
中心点属性如下红色部分属性
提示属性Chart Padding
ColorRange/color属性仪表盘显示颜色的属性。
Dial指针属性
目标值属性
标尺(Linear Gauge)介绍线性仪表(标尺)采用了横向的的滑块显示方式，每个标尺都是用一个颜色范围和一个或多个指针来显示数据的值，利用水平色阶的监测数据来表明是否是在确定的界限内，可以创建各种分类数据的颜色范围，视觉上有很好的体验。
XML&Chart bgColor=&FFFFFF& bgAlpha=&0& showBorder=&0& upperLimit=&100& lowerLimit=&-50& gaugeRoundRadius=&5& chartBottomMargin=&10& ticksBelowGauge=&0& showGaugeLabels=&0&valueAbovePointer=&0& pointerOnTop=&1& pointerRadius=&9&&&colorRange&&color minValue=&0& maxValue=&100& name=&GOOD&/&&color minValue=&35& maxValue=&70& name=&WEAK&/&&color minValue=&70& maxValue=&100& name=&BAD&/&&/colorRange&&value&-11&/value&&styles&&definition&&style name=&ValueFont& type=&Font& bgColor=&333333& size=&10& color=&FFFFFF&/&&/definition&&application&&apply toObject=&VALUE& styles=&valueFont&/&&/application&&/styles&&/Chart&Char属性
轴线(Aixs)属性标尺属性
Chart Padding
ColorRange/color属性这部分主要是分段的属性。
指针value属性
目标线的属性增加目标线值
PowerChartsPowerCharts介绍PowerCharts是一组高级绘图窗口组件，通过它可以绘制出视觉上引人注目的，交互式功能强大的的图标。PowerCharts的图表允许给web应用添加RIA（Rich Internet Applications）富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。的功能，用户可以拥有与此前完全不一样的体验。这些图标用于多种目的，如:模仿，仿真，可视化数据选择，科学绘图，财务分析等。 PowerCharts的优点1. 动画和图表互动性非常好。2. 众多独特的图标类型。3. 功能强大4. 使用简单5. 运行在不同的平台6. 减少服务器的负载DragNode介绍节点图是一个专门的图标类型，其中每一个图标作为一个数据集显示在图标中，此图提供了一个非常直观的界面，用户可以调整相关的实体，甚至可以增加新的链接，每个集点可以表现为一个数据集，每个数据集可以表现为各种各样的图形，甚至文字和图标结合在一起。
XML&chart palette='2' xAxisMinValue='0' xAxisMaxValue='100' yAxisMinValue='0' yAxisMaxValue='100' is3D='1' showFormBtn='1' viewMode='0'&
&dataset seriesName='DS1'&&set x='12' y='79' width='70' height='56' name='Node 1 with a long label' color='FE3233' id='1'/&
&setx='59' x='88' x='33'y='15' y='75' y='35'width='40' radius='37' radius='37'height='56' shape='circle' shape='circle'name='Node name='Node name='Node2' 3' 4'color='FE9191' color='62D0FE' color='FE8181'id='2' id='3' id='4'link='n-'/& link='n-'/& link='n-'/&&set x='40' y='85' width='45' height='67' name='Node 5' color='FE7272' BorderColor='ff5904' id='5' /&
&setx='69'y='85'width='45'height='67'name='Node6'color='72D4FE'id='6'link='n-'/&&set x='87' y='45' radius='47' shape='polygon' numSides='3' name='Node 7' color='FE5151' id='7' link='n-'/&&set x='65' y='60' radius='47' shape='polygon' numSides='5' name='Node 8' color='FE9191' id='8' link='n-'/&
&setx='12'y='20'radius='37'shape='circle'name='Node9'color='33C1FE'id='9'link='n-'/&&set x='80' y='12' radius='47' shape='polygon' numSides='4' name='Node 10' color='33C1FE' id='10' link='n-'/&
&/dataset&&connectors color='FF0000' stdThickness='5'&&connector strength='0.96' label='link label' from='1' to='9' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.8' label='link12' from='1' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.8' label='link2' from='1' to='8' color='BBBB00' /&&connector strength='0.3' label='link3' from='1' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.4' label='link4' from='2' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.6' label='link5' from='4' to='2' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.33' label='link1' from='2' to='8' color='BBBB00'/&
&connector strength='0.66' label='link7' from='8' to='3' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.7' label='link6' from='4' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.6' from='4' to='8' color='FF5904' arrowAtStart='1' arrowAtEnd='1'/&
&connector strength='0.6' label='link9' from='5' to='8' color='BBBB00' /&&connector strength='0.5' label='link10' from='7' to='8' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /&
&connector strength='0.3' label='link11' from='7' to='10' color='BBBB00'/&
&/connectors& &/chart&Char属性
Form&Button属性
标题属性图标外观属性
数据点属性分区网格属性
Legend 属性
Tool-tip属性
Chart Padding
Categories属性
Category属性这个属性在目前的例子中没有用到。dataset属性
Connectors属性
Connector属性
目标曲线的属性(Trend-lines)&trendLines&&line startValue='895' color='FF0000' displayvalue='Average' /&
垂直分割线的属性&vTrendLines&&line startValue='895' endValue='980' displayvalue='Zone 1' isTrendZone='1'/&
&/vTrendLines&
color='FF0000'
Spine Chart介绍Spine是fusionCharts中Line曲线的一个扩展，它主要是用来展现平滑的曲线。用户在视觉上有更好的体验。图列
Xml&chart palette=&3& caption=&Monthly Sales Summary& subcaption=&For the year2006& xAxisName=&Month& yAxisMinValue=&15000& yAxisName=&Sales& numberPrefix=&$& showValues=&0&& &set label=&Jan& value=&17400&/& &set label=&Feb& value=&19800&/& &set label=&Mar& value=&21800&/&
&set label=&Apr& value=&23800&/& &set label=&May& value=&29600&/& &set label=&Jun& value=&27600&/& &set label=&Jul& value=&31800&/& &set label=&Aug& value=&39700&/& &set label=&Sep& value=&32800&/& &set label=&Oct& value=&21900&/& &set label=&Nov& value=&32900&/& &set label=&Dec& value=&39800&/& &/chart&Chart属性
标题属性图标外观显示
数据曲线属性
数据点(Anchors)的属性
分区网格属性
tool-tip属性
Chart Padding
垂直数据分隔线垂直数据分割线:如果有一条曲线在set中添加: &vLine color='FF5904' thickness='20'/&如果有多条曲线在Categories中添加: &vLine color='FF5904' thickness='20'/&
目标曲线的属性(Trend-lines)&trendLines&&line startValue='300000' color='FF0000' displayvalue='Average' /&
Multi-aix(多坐标曲线)介绍多坐标曲线是PowerChart中一个互动的多轴线图，顾名思义，就是一个图标有多个坐标轴，并且用户可以选择显示或隐藏其中的坐标轴，坐标轴可以任意的放在图标的左边或者右边。对于每一条坐标轴也可以进行任意的调整如:上限，下限等。用户需求上有很好的灵活性。图例
Xml&chart caption=&PowerGenerator& xAxisName=&Time& showValues=&0& divLineAlpha=&100& numVDivLines=&4& vDivLineAlpha=&0& showAlternateVGridColor=&1& alternateVGridAlpha=&5&canvasPadding=&0&& &categories&&category label=&00:00s&/& &category label=&00:04s&/& &category label=&00:08s&/&
&category label=&00:12s&/&&category label=&00:16s&/&&category label=&00:20s&/&&/categories&&axis title=&Power& titlePos=&left& tickWidth=&10& divlineisdashed=&1& numberSuffix=& W&&&dataset seriesName=&Power [W]&&&set value=&6&/&&set value=&26&/&&set value=&16&/&&set value=&27&/&&set value=&28&/&&set value=&33&/&&/dataset&&/axis&&axis title=&Temp.& titlePos=&left& numDivLines=&14& tickWidth=&10& divlineisdashed=&1& numberSuffix=& F&& &dataset seriesName=&Temperature&&&set value=&296&/&&set value=&311&/&&set value=&336&/&&set value=&371&/&&set value=&389&/&&set value=&393&/&&/dataset&&/axis&&axis title=&Speed[RPM]& titlepos=&RIGHT& axisOnLeft=&0& numDivLines=&10& tickWidth=&10& divlineisdashed=&1&&&dataset seriesName=&Speed&&&set value=&1&/&&set value=&11&/&&set value=&36&/&&set value=&49&/&&set value=&68&/&&set value=&88&/&&/dataset&&/axis&&/chart&Chart属性
标题属性图标外观显示
数据曲线属性
数据点(Anchors)的属性
分区网格属性
Legend 属性
字体属性tool-tip属性
Chart Padding
Categories属性Category属性垂直数据分隔线垂直数据分割线:
如果有一条曲线在set中添加: &vLine color='FF5904' thickness='20'/&
Axis元素属性
Dataset属性
Set的属性值
上一篇： 下一篇：
All rights reserved Powered by
copyright &copyright 。文档资料库内容来自网络，如有侵犯请联系客服。