FusionCharts免费程序帮你轻松生成炫酷flash 3D图表

前段时间在处理一些房地产相关的数据展示，本来可以直接用Excel利用数据自动生成相关的柱形图、饼图等，但考虑到既然是利用网络来展示这些数据，那何不考虑直接用网络的方法来解决，直接建立一个展示模型，后面定期更新数据，图表自动生成，这样在一定程度上增强数据展示效果（如CNZZ、51LA统计、百度统计后台也无一例外都使用flash图表来展示流量数据、趋势线or 饼图）。于是考虑使用一些常见的flash 3D图表程序来实现。
大致观察了下，现在常有被用到的是一款免费开源的Open Flash Chart程序，貌似也挺不错，偶试用了下，总感觉生成的3D图表不太漂亮，于是又GOOGLE了一翻，偶然发现FusionCharts这款免费flash 3d图表生成程序（包括但不限于3d），而且生成的图表界面也非常美观，大致看了下介绍，也不难上手，于是就利用这些简单作了些图表。下面上个效果图演示，及详细的使用方法，仅供不太懂编程的、不太喜欢看英文的及有利用FLASH展示数据生成图表需求的站长们参考，高手请直接忽略。

为了说明利用这个FusionCharts生成类似上图的3D图表的简便性，这里直接贴出上图的代码，后面再详细说明。
<SCRIPT LANGUAGE="Javascript" SRC="http://sh.fcbao.com/datacenter/data_graph/201011/FusionCharts/FusionCharts.js"></SCRIPT>

<div id="indexDiv" align="center">
Chart.
</div>
<script type="text/javascript">
//Instantiate the Chart
var chart_index = new FusionCharts("FusionCharts/FCF_Column3D.swf", "index", "960", "550", "0", "0");
chart_index.setTransparent("false");

//Provide entire XML data using dataXML method
chart_index.setDataXML("<graph bgcolor='e1f5ff' caption='2010年11月上海新楼盘指数' subCaption='（数据来源：房产报fcbao.com 单位：万元）' numberPrefix='' formatNumberScale='1' decimalPrecision='2' baseFontSize='14' numberSuffix='万'><set name='全上海市' value='2.51' color='AFD8F8' /><set name='中心城区' value='3.24' color='F6BD0F' /><set name='市郊结合' value='1.87' color='8BBA00' /><set name='上海郊县' value='1.11' color='A66EDD' /></graph>")
//Finally, render the chart.
chart_index.render("indexDiv");
</script>

很简单的两段js代码，可直接套用，第一段为引用FusionCharts程序附带的一个js文件，第二段为调用FusionCharts/FCF_Column3D.swf这个3d图展示flash文件，配置好宽度和高度，然后利用chart_index.setDataXML把要展示的数据赋给上面的flash文件，有动画效果的3D柱形图就简单生成了。至于数据的格式，只需要按照程序提供的XML格式模板填写即可。
柱形图Xml格式简单分析：
<graph bgcolor='背景颜色如e1f5ff ' caption='图表标题' subCaption='图表副标题' numberPrefix='图表中数字前辍，可不加' formatNumberScale='1' decimalPrecision='2' baseFontSize='字体大小如14'  numberSuffix='图表中数字后辍如单位万或%等'>
<set name='横坐标值或名称' value='纵坐标值' color='颜色值如AFD8F8' />
<set name='中心城区' value='3.24' color='F6BD0F' />
……..中间均为使用set设置横坐标和纵坐标值
</graph>
如果是简单一次性使用，上面生成柱形图的程序只需要改下XML数据即可使用了，当然，本文本不限于此：
1. xml数据如果要自动生成咋办？
2. 上面的图表貌似还是不够个性化，如果我要调整下图表的配色，加些背景或者水印LOGO，咋整？
3. 上面只是柱形图，如果我要做饼图、趋势图等咋整？
先说明第一个问题，XML数据如果一个个手动设置，在数据量比较多的情况下，还确实有些麻烦，程序提供了很多种数据生成方式，拿PHP程序中的方式有定义数据数组循环一下自动生成XML数据；直接从数据库中读取数据生成XML数据等等。当然这里又涉及到编程问题了，有个矛盾，对PHP比较了解的朋友，那估计也不会看本文，直接去找原始英文文档研究了，而如果完全不懂编程，又要动态生成咋办。
下面有格式模板及落叶的注释：
<?php
include("Includes/FusionCharts.php");
include("Includes/FC_Colors.php");
//上面两文件在下载的附件中，只需要把路径放对，其余不用管，也更不用修改。上两文件的作用是一个自动引用fusionchart程序，一个是随机生成每条柱的颜色，这样不用修改
?>
<?php
//下面设置横坐标的数组，从上至下，仿写，把数字改下
$arrData_i[0][1] = "全上海市";
$arrData_i[1][1] = "中心城区";
$arrData_i[2][1] = "市郊结合";
$arrData_i[3][1] = "上海郊县";
//下面设置纵坐标，从上至下仿写，把数字改下
$arrData_i[0][2] = 2.51;
$arrData_i[1][2] = 3.24;
$arrData_i[2][2] = 1.87;
$arrData_i[3][2] = 1.11;

//下面是循环生成XML文件，只需要把下面的标题、副标题，改下就基本可以了
$strXML_i = "<graph bgcolor='e1f5ff' caption='2010年11月上海新楼盘指数' subCaption='（数据来源：房产报fcbao.com  单位：万元）' numberPrefix='' formatNumberScale='1' decimalPrecision='2' baseFontSize='14' numberSuffix='万'>";
//下面不用修改
foreach ($arrData_i as $arSubData_i)
  $strXML_i .= "<set name='" . $arSubData_i[1] . "' value='" . $arSubData_i[2] ."' color='". getFCColor() ."' />";

$strXML_i .= "</graph>";

//下面是输出3D图表的，基本不用改，有需要的注意下swf文件的相对路径，也可改下宽和高，如960 改成800
echo renderChart("FusionCharts/FCF_Column3D.swf", "", $strXML_i, "index", 960, 550);
?>
上面的主要改动的还是数据数组，这个可以直接用记事本打开PHP文件修改，如果需要连数组也自动生成的，可以建立一个数据库，然后把数据定期写入数据库，然后读取出来，循环生成上面的数据数组即可。
实际运用，演示地址：http://sh.fcbao.com/datacenter/data_graph/201011/index.php
另外，其实还有其它很多专业使用的方法，也不仅限于PHP，这里不赘述。
第二个问题，FusionCharts中在XML文件中提供了很多自定义设置的方法，除了上面提到的主标题、副标题、数据前辍，数据后辍，字体大小，图表背景等，还有包括设置图表背景图片（解决个性化背景及水印的问题），设置3D柱的厚度及阴影大小等。这个英文文档里面有详细的介绍，由于数量太大，本文暂不赘述，后面如有必要单独写一篇文章来介绍。
第三个问题，这里只展示一个效果图，使用方法类似，但可能需要单独来介始，下次吧。

源码下载：http://sh.fcbao.com/datacenter/data_graph/code.rar