FusionCharts--WEB图表技术

最近项目中需要需要统计图表功能,刚好在网上看到Fusioncharts这个基于Flash的图表组件,功能很强大,效果也很不错.转载一篇介绍文章,原文地址:http://485567.blog.51cto.com/475567/98437  
Fusioncharts是一个基于Flash的图表组件，可以用来提供数据驱动的动态图标，fusioncharts可用于任何网页脚本语言如， HTML格式，JSP技术等等。提供交互式和强大的动态图标，fusioncharts充分利用流体美丽的Flash为模板，使用XML作为其数据接口，创造紧凑，互动和真正的动态图表
技术细节
设想所有的图形组成不需要任何的安装，你可以在你的能想到的语言环境中进行工作，并能在多数的浏览器中运行，建立漂亮的、栩栩如生的效果。假设你的数据在有限的时间、空间、WEB内不停的发生改变。FusionCharts刚好帮助你实现所有想像出来的事物。

 

【1】FusionCharts的特点：
（a）:不需要任何Active-X或扩展控件
不需要安装任何扩展Active-X控件或组件来渲染效果。对于服务器不需要安装组件，FusionCharts能够运行的非常流畅。你只需上载核心的SWF文件到服务器中并将为其配置XML数据文件。
(b):栩栩如生的效果可以增加站点美学效果：
通过Active-X控件或组件制作的图形是静态GIF或JPEG文件。但是，通过FusionCharts就能制作出光滑、栩栩如生的动态图像效果，同时也很方便的为XML数据文件自定义附加属性。
(c):减少服务器负载：
FusionCharts能很大程度地减轻服务器的负荷，相当在客户端处理工作。客户端仅仅需要Macromedia flash 6播放器，现在来讲非常普通的了，常与游览器的新版本一起推出。由于该控件文件非常小，因此也非常适合窄频带传输。
(d):兼容多种脚本语言：
FusionCharts兼容多种脚本语言：如ASP，ASP.NET,JSP, PHP, Perl, CGI, CF等，如同在客户端进行处理时，无论是哪一种脚本语言通过数据访问组件都没太大关系。该控件能够自定义从文本文件中获取的数据也可以在静态服务器中工作。（文本文件或XML文件包含的数据能够被经常更新）
(e):改变客户端动态数据库
你可以用客户端中很少的几句脚本来控制FusionCharts，也能够在客户端中建立全新的图形而不需要重新加载页面和图形。
(f):可在图形中追加其它特征：
FusionCharts提供了自制的很多选项：比如透明度、色彩主题、热点选区、盘旋标题等。其最大的好处在于你能够利用XML数据文件进行自定义。

版本2.3最新更新内容：
(a):可完全设置AutoFit图表：所有的图表可以自定义尺寸大小，包括设置任意的宽度和高度，在HTML页面中可设置特殊的宽度和高度，而不需对.fla文本进行编辑。
(b):新的图表类型：在新的图表类型中新增加了一套气泡图表，stacked column multi-series line图表，Dual Y mbination 图表，stacked area multi-series line Dual Y Combination等图表样式。
(c):新的动态图案：在新的动态图案中可添加线条图表，面积图表和饼状图表。
(d):垂直文本支持：在X-轴中所有的图表均可支持垂直文本标签。
(e):加载内部的其他Flash影片：FusionCharts 2. 3的图表能够直接加载内部其他的Flash影片，而无需改变/指定其他任何东西。
(f):客户端数据支持：FusionCharts 2.3图表具有内置客户端数据支持，你可以使用客户端提供的JavaScript/VBScript脚本语言动态更新图表，而无需重新加载页面或图表。
(g):新的栅格控件：在列表格式中新的栅格控件标签显示个别的连续图表数据，该栅格控件可从其他 相同的图表源文件中获取数据。
(h):垂直和水平栅格颜色选项：如今你能在图表画布中垂直和水平交替图表。
(i):支持.swf格式的背景图像：所有的图表如今将支持.swf格式的背景图像（或先前的JPEG图像）
(j):动态图例：所有的一系列图表如今将支持动态图例（多－线条图例）。该图例能自动调整自己所需的最好空间以便为图表提供更多的可用空间。
(k):Trend line和zone支持：FusionChart 2.3如今将同时支持Trend zones and trend lines.
(l):先进的数据格式化选项：你能为数据格式选择更多的特殊属性。同样，为个别图表元素设置十进制的精度数据选项，如 limits和div line的显示值。
(m):为不常见的数据设置更好的支持：如今我们已经为不常见的数据引入了更好的支持（中断数据），其中包括为所有的单系列的，多－系列的和整合的图表进行设置（除了stacked图表外）。
(n):为整合图表提供新的XML结构：整合的图表如今能支持一个新的XML结构，在运行时是一个非常明晰和便于使用的。§
阴影效果：在线条图表和饼状图表中支持阴影效果，你能够通过XML来控制所有的阴影属性。
附加的盘旋标题文本：如今你能够为每个数据元素指定附加的盘旋标题文本，除数据标签外。

【2】版本 v3.0 更新细节：
核心更改：
添加了7个新图表：
实时堆叠式柱状图以及实时双 Y轴图。
Bullet graphs –水平以及垂直的。
Spark Line, Spark Column以及 Spark Win/Loss表。
使用FusionCharts v3框架，因此提供了以下特点：
简单而高级地整合了 JavaScript.
支持 STYLE.
自带了使用 ActionScript 2的 Adobe Flash 8.
新的调试模式。
支持倾斜度。
支持调色板。
支持虚线。
支持算术比例。
能够更好的打印。
支持高级钻取。
可以将整副图作为一个热点。
可以为每一个数据绘图项提供自定义工具提示。
对应用程序消息支持多种语言。

支持有角度的以及线性标尺编辑模式。
在所有实时表中，对从服务器到客户端的流式实时消息支持消息日志。
在所有实时表中，支持 Alert Manager. 对使用 XML以及 JavaScript的 annotation增加了更多的控制。 对实时表添加了 Context Menu,以停止/开始更新、清空表。对于给定的时间框，如果用户觉得监控器不需要该计算器，它能够帮助用户停止更新。停止以后，用户还可以动态启动更新，对实时表添加了 JavaScript API,以在客户端实现停止/启动更新、清空表、重新加载表等。 添加了新的 JavaScript API,以给图表中添加数据。 引入了单色主题，以帮助用户基于单色创建自己的调色板。 在实时表中 - 能够在实时数据流 URL的末端添加数据戳（类似于时间戳） -以方便跟踪“最后给表中添加了什么值？”。而不必使用注册表、会话或者数据库字段来控制。无状态环境中使用了该简单而有效的技术。

Data-streaming表中的更改
轴每次都会更新，以反映当前视图中数据的局限。 引入了Annotation - 它能够帮你绘制自定义形状、对象，在表中任何地方加载图片。 可以调整 Canvas Margins,以设置增加的 canvas页边空白。如果用户的数据标签或者 y轴值比较大，可以调整页边空白。 可以选择（交互式的） Legend –在客户端，你可以选择显示/隐藏完整的数据集。如果你要比较多个输入流，而且只想观察一个，其它输入流仍保存在帧里的话，它会很有用。 具有标签的实时 vLines. 能够从服务器发送清空命令 –因此，必要的话，可以清空图表。 如果需要对某个特定图表停止更新时，能够从服务器发送停止更新命令。 使用客户端 JavaScript,能够检索图表的当前数据视图。 当图表检索到新的数据时，会发起 JavaScript事件 FC_ChartUpdated.当图表实时更新时，可以使用该事件来更新其它显示容器。 能够指定不同的 updateInterval以及 clearInterval (与 refreshInterval不同) –当数据被检索到并且加入到了队列中，或者当刷新了图表以显示新数据时，它可以帮你指定。你还可以设置预定义清空间隔以清空图表。

Angular Gauge的更改
现在，可以在任何角度、任何方向绘制 Guage.
对 gauge以及 annotations添加了自动比例工具。
对颜色比例可自定义坡度填充混和。
对 pivot可以自定义坡度属性。
支持基于百分比的 gauge半径。
支持编辑模式。
对每个刻度可以选择显示值，而且能够自定义坐标。
能够添加趋势点、趋势弧以及趋势标记。
可以在 gauge内部或者外部显示标记或者趋向值。
支持消息日志。
支持 Alert Manager.
对每个刻度支持实时扩展，以解析更多的 gauges.

Gantt chart的更改
支持日期和时间。
可以自定义输出数据格式。
能够显示每个任务的完成百分比以及空进度条，或者使用不同的填充色。
对数据表以及 Gantt面板支持滚动。
能够以组显示单个工具条 –以指出任务组。
能够自定义工具提示属性 –而且，你还可以选择是否把任务日期作为工具提示内容的一部分显示。
能够对显示颜色基调的图表添加图例。能够完全自定义图例。
能够以百分比定义每个任务的高度以及顶部填充，而不仅仅只是象素。
能够预定义调色板以及单色主题选择器，以方便地给图表设置颜色。
支持圆边任务条。
能够对工具条自定义坡度混和以及阴影。
能够对 Gantt图表定义 annotation,以显示更多的信息。

Funnel Chart的更改
能够把相同的数据绘制成流线型漏斗图或者截面漏斗图。
交互式的漏斗分层，点击时，能够与主漏斗中分离。
能够把漏斗分层绘制成空心或者实心的。
能够对每一个漏斗分层设置相同的倾斜角（或使它们与数据独立）。
在图表上点击右键，然后选择View 2D,能够无缝地把 3D漏斗转换成 2D漏斗。
当边界以及填充属性上有多个控制时，能够自身解析 2D模式中的漏斗。
能够以真实值或者百分比显示值。
如果以百分比显示，你可以选择把显示为第一个值或者前一个值的百分数。
标签变得灵巧了，以避免漏斗标签覆盖。
能够在端或者中心处放置标签。
能够对每一个漏斗分层自定义工具文本。

Pyramid Chart的更改
交互式棱锥分层，点击时，能够与主棱锥中分离。
在图表上点击右键，然后选择View 2D,能够无缝地把 3D棱锥转换成 2D棱锥。
当边界以及填充属性上有多个控制时，能够自身解析 2D模式中的棱锥。
能够以真实值或者百分比显示值。
标签变得灵巧了，以避免棱锥标签覆盖。
能够在端或者中心处放置标签。
能够对每一个棱锥分层自定义工具文本。

Linear Gauge的更改
支持多点。
每个点有工具文本以及链接。
支持编辑模式。
能够对 gauge自定义坡度填充。
支持圆边 gauge.
能够更好地控制刻度以及刻度值。
能够在 gauge以上或者以下显示点。
可以创建趋势线/区域。

LED Gauge的更改
能够更好地控制刻度以及刻度值。
对整个 LED支持单色填充。

Thermometer Gauge的更改
2D/3D填充模式。
能够更好地控制刻度以及刻度值。

Cylinder Gauge的更改
增强了 3D外观。
能够更好地控制刻度以及刻度值。
支持动画填充。

Bulb Gauge的更改
能够在球形的内部或者外部显示值。
可以把颜色范围标签显示为图表值，而不是真实的数值。
FusionMaps
FusionMaps v3.0能够帮助你给动态网页添加动画的、交互的以及数据驱动的 Flash Maps.这些图片是由XML数据源驱动，并且可以被整合到任何脚本技术 (ASP.NET, ASP, PHP, JSP, CF等)以及数据库中。

产品特点：
目前，FusionMaps包含了 186张图片，包括陆地、主要的城市以及所有美国城市。
动态以及数据驱动的flash图片。
添加数据以及配置图片的可视化GUI.
能够与任何数据库以及脚本语言如：ASP, ASP.NET, PHP, JSP, ColdFusion等整合。
支持自定义标记以指出点位置如：城市、商场、交汇处、办公室等。
无需修改源代码就可以动态调整到任何大小。
支持由数据范围着色，可以显示/隐藏图例。
支持不同的动画风格。
支持在同一窗口、新窗口、框架或者弹出窗口中钻取。
使用斜角以及阴影效果的2D/3D.
对高级客户端交互以及动态图片更改提供了完整的 AJAX.
支持多语言(UTF-8)命名。

PowerCharts
PowerCharts Plug是一组高级绘图窗口部件，通过它，可以绘制出视觉上引人注目的、交互式功能强大的图表。使用 Adobe Flash（以前为 Macromedia Flash）提供的丰富特征集，PowerCharts Plug中的图表允许给 web应用程序中添加 Rich Internet Applications (RIA)功能，因此，终端用户可以拥有与此前完全不一样的体验。
这些表可以用于多种目的，如：模拟、仿真、可视化数据选择、科学绘图、财务分析等。
PowerCharts plug 不是 FusionCharts v3 Suite 的标准组成部分，因此需要另外付费

PowerCharts提供了如下显示的多种图表。

Drag-node表
在该表中，每一个数据集被显示为一个可拖动的节点

Multi-axis Line表
该表是一个交互式行，它允许在同一图表中绘制多个轴

Select Scatter表
该表允许用户可视化地从给定数据中选择出一组数据子集。

Drag-able Column, Line & Area表
该表允许用户可视化操作图表中的数据，然后把它提交给服务器。

Interactive Candlestick表
FusionCharts v3 PowerCharts suite 中的该表给用户提供了一个功能强大且交互式的接口，以允许用户绘制频繁使用的数据。
Waterfall表
该表是一种特殊的列表。

Multi-level Pie表
该表允许用户在处理过的饼图中显示对称以及不对称树结构。

Logarithmic表
PowerCharts 中引入了对数表。用户可以为对数比例选择任意的正数底（与1不同）。

Spline表
PowerCharts 中引入了曲面表。目前，组件中共有4种曲面表：
o Single series Spline?
o Single series Spline Area?
o Multi-series Spline?
Multi-series Spline Area?

Radar表
该表允许用户直观地以绘图方式显示不同的 Key Performance Indicators (KPIs).

Error Bar表
该表用于显示图表上显示的数据的统计信息。

Kagi表
该表是由日本于 1870 年开发的，它使用一系列垂直线来描述某种资产的供需水平

使用说明：
<1>：fusioncharts是以XML为数据接口而生成图表。它提供两种XML形式：直接以XML文件提供数据，也就是事先写好的.xml。另一种是基于数据库动态生成XML。
<2>：拷贝fusioncharts下的所有的.swf文件(所有的图标文件在下载包中Charts 包中)到工程WebRoot目录下，这些flash文件作为生成报表的模板图标。
<3>：拷贝fusioncharts.js到webRoot目录下的js文件夹下，这里面提供了createChartHTML,能帮助我们直接调用flash文件从而生成图表。
<4>:用一个简单的例子来说明一下上面的步骤：
(1):以静态的XML为数据接口创建柱状图或者曲线图。在工程根目录下创建XML文件data.xml此文件的格式为
     <chart palette="2" caption="Unit Sales" xAxisName="Month" yAxisName="Units" showValues="0" >
       <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>
(2):这个xml文件可以直接放在一个文件夹下，也可以放在jsp页面当中来引用。注意与以往的xml格式不同的是没有声明xml的表头。这种格式正是fusioncharts所要求的格式
(3):chart标签属性说明：caption代表：图片的标题、xAxisName代表：横坐标的标题、yAxisName代表：纵坐标的标题(注意：纵坐标的标题只能是英文，能否是中文这一点还在研究当中)、showValues代表：当值为boolen型0为在柱子或者曲线上不显示数据，“1”为显示数据。其中还有很多属性都在fusioncharts帮助文件中有详细的说明。
(4)：XML<set>子标签：label为横坐标的元素，value为每个坐标元素对应的值。
(5)：了解了XML的内容就可以直接编写jsp页面了。
<%@ include file="../Includes/FusionCharts.jsp"%>
<HTML>
   <HEAD>
      <TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
   </HEAD>
   <BODY>
   <%
String chartHTMLCode=createChartHTML("./FusionCharts/Column3D.swf", " Data.xml", "", "myFirst", 600, 300, false) ;
   %>
   <%=chartHTMLCode%>
   </BODY>
</HTML>

(6):FusionCharts.jsp文件提供了createChartHTML（）函数来创建图片方法中的共有七个参数：
1：要引用flash文件的的路径不同的图片引用不同的flash文件。
2：为xml文件的路径。
3当动态的生成XMl文件时要传的参数，在此如果物理路径中有XMl文件的话第二个参数传文件路径，第三个参数为空，当物理路径中没有xml文件 而是程序生成的话，第二个参数为空，第三个参数为程序生成xml的字符串。
4：生成图片的id。
5：图片的with。
6： 图片的hight。
7：图片是否为调试模式。通过以上的代码就可以生成简单的chart图了。
现在运行web服务器可以看到图片

FusionCharts Free毕竟是商业公司开发的，帮助文档做得非常漂亮，E文好的同学可以直接去看
在线文档。

准备工作：
第一步：到这里下载FusionCharts Free。
第二步：将下载的FusionCharts Free文件夹放到你的网站目录中。其中应该有：
Charts，Code，Contents，Gallery，JSClass和Index.html。

创建一个如下的XML文档（Data.xml）：
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
     <set name='Jan' value='462' color='AFD8F8' />
     <set name='Feb' value='857' color='F6BD0F' />
     <set name='Mar' value='671' color='8BBA00' />
     <set name='Apr' value='494' color='FF8E46' />
     <set name='May' value='761' color='008E8E' />
     <set name='Jun' value='960' color='D64646' />
     <set name='Jul' value='629' color='8E468E' />
     <set name='Aug' value='622' color='588526' />
     <set name='Sep' value='376' color='B3AA00' />
     <set name='Oct' value='494' color='008ED6' />
     <set name='Nov' value='761' color='9D080D' />
     <set name='Dec' value='960' color='A186BE' />
</graph>


创建一个如下的PHP文件（BasicChart.php）：
<?php
include("../Includes/FusionCharts.php");
?>
<HTML>
    <HEAD>
       <TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE>
    </HEAD>
    <BODY>
    <?php
      echo renderChartHTML("http://www.cnblogs.com/FusionCharts/FCF-Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300);
    ?>
    </BODY>
</HTML>

可以看到，我们需要做的只是包含FusionCharts.php和调用renderChartHTML函数而已，
renderChartHTML的参数说明如下：

参数	说明
chartSWF	SWF文件名，代表我们想生成的图形。FCF_Column3D.swf为3D的柱状图。
strURL	XML数据文件的URL。
strXML	FusionCharts有两种传递XML数据的方法，第一种方法是传递已经生成的XML文件的URL，另一种是直接传递包含XML数据流的字符串。这里我们使用的是第一种方法，所以将strXML设置为“”。
chartId	在HTML中表示我们生成的图表的ID。
chartWidth	图表的宽度
chartHeight	图标的高度

运行 BasicChart.php，你就会在浏览器中看到如下的图表：



传递XML数据的另一种方法
下面说明传递XML数据的另一种方法，这是的PHP文件为：

<?php
include("../Includes/FusionCharts.php");
?>
<HTML>
    <HEAD>
       <TITLE>FusionCharts Free - Simple Column 3D Chart using dataXML method</TITLE>
    </HEAD>
<BODY>

<?php
    $strXML = "";
    $strXML .= "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'
    decimalPrecision='0' formatNumberScale='0'>";
    $strXML .= "<set name='Jan' value='462' color='AFD8F8' />";
    $strXML .= "<set name='Feb' value='857' color='F6BD0F' />";
    $strXML .= "<set name='Mar' value='671' color='8BBA00' />";
    $strXML .= "<set name='Apr' value='494' color='FF8E46' />";
    $strXML .= "<set name='May' value='761' color='008E8E' />";
    $strXML .= "<set name='Jun' value='960' color='D64646' />";
    $strXML .= "<set name='Jul' value='629' color='8E468E' />";
    $strXML .= "<set name='Aug' value='622' color='588526' />";
    $strXML .= "<set name='Sep' value='376' color='B3AA00' />";
    $strXML .= "<set name='Oct' value='494' color='008ED6' />";
    $strXML .= "<set name='Nov' value='761' color='9D080D' />";
    $strXML .= "<set name='Dec' value='960' color='A186BE' />";
    $strXML .= "</graph>";

   echo renderChartHTML("http://www.cnblogs.com/FusionCharts/FCF_Column3D.swf", "", $strXML, "myNext", 600, 300);
?>
</BODY>
</HTML>

同样很简单吧？

搞定flash的“Click to activate and use this control”
我们在上面生成的图表在IE上可能会显示成这样，你必须单击之后才能同flash进行交互。


由于这个问题只是发生在直接将flash嵌入HTML的时候。所以最简单的办法就是利用JavaScript来嵌入flash了。而FusionCharts提供了一个叫做renderChart()的函数，可以帮助我们非常简单的搞定这个问题。

<?php
include("../Includes/FusionCharts.php");
?>
<HTML>
    <HEAD>
       <TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
      <SCRIPT LANGUAGE="Javascript" SRC="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></SCRIPT>
    </HEAD>
<BODY>
    <?php
   echo renderChart("http://www.cnblogs.com/FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300, false, false);
    ?>
</BODY>
</HTML>