PHP+Ajax+FusionCharts实现动态Flash图表

看似复杂的功能，其实只是利用了PHP、Ajax及FusionCharts的基本的方法。

总结其实现过程： Ajax请求PHP页面查询数据，PHP将所需数据生成JSON数组传回Ajax，再写入页面对应位置，再由FusionCharts重新加载Flash图表。

这样做的好处是实现定时异步传输数据并最终展现出来。

对于FusionCharts不了解的请谷歌之。这里需要下载FusionCharts的安装文件（官方地址：www.fusioncharts.com ），包括FusionCharts.js、加载XML数据的FusionCharts.php文件，还有所需的SWF文件，一个Flash文件对应一个展示效果，效果多种多样，各取所需，总有一款适合你。详细的安装使用教程，这里就不赘述鸟，当然，如果需要，请留言 😛

不多说，上代码：

function get_data(){
           var params = new Object();
           //赋值变量
           $.ajax({
                   type: "POST",
                   url: "index.php?app=app&act=act",
                   data: params,
                   async : false,
                   success: function(msg){
                     if(msg != ""){
                            var jsonobj = eval('('+msg+')');
                            $("#chartdiv1").html(jsonobj. amount_xml);  //不要把对应的内容放错地方
                            $("#chartdiv2").html(jsonobj. orders_xml);
                     }
                   }
         });
}

这个都是基本的Ajax框架，不必多说。

实现定时读取数据的方法很多，这里简单提两种：

1. setInterval方法：

body中添加JS代码：

<script type="text/javascript">
//定时刷新数据
setInterval('get_data()',30000);//设定5分钟刷新数据
</script>

1. 前一方法的升级：

利用setInterval函数定时访问本地时间，如到一定时间，则请求PHP页面传回数据。

指定每天9点、12点整刷新数据：

function get_time(){
    var now = new Date(),
    var hour = now.getHours(),
    var minutes = now.getMinutes(),
    var seconds = now.getSeconds()
    if(hour == 9 && minutes == 00 && seconds < 30){
        setTimeout('get_data()',500);
    }else if(hour == 12 && minutes == 00 && seconds < 30){
        setTimeout('get_data()',500);
    }
}

PHP部分：需要仔细研究FusionCharts对应XML数据，测试时，可先将数据写进XML文件中，修改参数，如Flash图表大小、颜色等等。

<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export' subcaption='In Millions Tonnes per annum pr Hectare' >
   <categories font='Arial' fontSize='11' fontColor='000000'>
      <category name='N. America' hoverText='North America'/>
      <category name='Asia' />
      ……
   </categories>
   <dataset seriesname='Rice' color='FDC12E'>
      <set value='30' />
      <set value='26' />
      <set value='29' />
      <set value='31' />
      <set value='34' />
   </dataset>
     ……
</graph>

<graph>是root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。<set>元素，用来描述数据。name属性用来表示数据类别名称，value属性表示数据，color属性表示图形颜色。

PHP要做的就是把数据写成对应的XML格式，注意在写入数据时，多余的空格或许会影响最终的输出，然后用json_encode输出JSON数组，最后别忘了echo。

$json_arr = array(
       " amount_xml" => $amount_xml,
       " orders_xml" => $orders_xml
);
$json = json_encode($json_arr);
echo $json;

这里使用的是数组，没错，这样，我们可以一次更新多个表格的数据！