FusionCharts--加载XML文件

上篇已经简单介绍了FusionCharts，对它有了一定的了解之后，开始介绍如何使用FusionCharts。FusionCharts加载文件的方式有两种：XML和json，首先通过简单实例来说一下FusionCharts如何加载XML文件。

首先建立一个XML文件：data.xml

<?xml version="1.0" encoding="utf-8" ?>
<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'>
  <set name='2009-10-04' value='57653' color='AFD8F8'/>
  <set name='2009-10-05' value='57389' color='F6BD0F'/>
  <set name='2009-10-06' value='59256' color='8BBA00'/>
  <set name='2009-10-07' value='62762' color='FF8E46'/>
  <set name='2009-10-08' value='63287' color='008E8E'/>
  <set name='2009-10-09' value='60109' color='D64646'/>
  <set name='2009-10-10' value='64653' color='8E468E'/>
  <set name='2009-10-11' value='61687' color='588526'/>
</graph>

然后建立aspx窗体：引入 FusionCharts.js以及核心文件SWF

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="single.aspx.cs" Inherits="FusionCharts.single" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <table>
            <tr>
                <td style="width: 50%; height: 50%">
                    <div id="Pie"></div>
                </td>  
            </tr>            
        </table>
    </form>
</body>
</html>
<script src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
    var chart =
    new FusionCharts('FusionCharts/Pie2D.swf',"ChartId","400","300");
    chart.setDataURL("data.xml");
    chart.render('Pie');
   

</script>

上述加载的效果是一个单系列的2D饼状图：

如果想要加载其他系列的图形，只需要修改加载的SWF核心文件即可，如下将2D转换为3D图：

     var chart1 =
              new FusionCharts('FusionCharts/Column2D.swf',"300");
     chart1.setDataURL("data.xml");
     chart1.render('Column');

其效果图如下：

这样的话，我们只需要修改上述加载的核心文件即可实现各种不同系列的图形转换。

柱状图：

折线图：

区域图：

小结：

使用FusionCharts加载文件，最主要的就是引入js和核心的SWF，写js处理与加载文件时需要注意放置的位置，如果放置在所要显示的div上面，就会提示“Unable to find the container DOM element”。另外就是注意XML的文件格式，需要按照FusionCharts所能加载的格式去设置。

加载XML文件的方式实现图表展示相对来说挺简单的，但是我们在后台查询到数据时，返回的都是datatable或者是list，这样的话如何去加载呢？下篇我们将介绍后台datatable的处理。

FusionCharts--加载XML文件

相关推荐