FusionCharts--加载XML文件

最新推荐文章于 2020-04-13 10:03:54 发布

走出自己的未来

最新推荐文章于 2020-04-13 10:03:54 发布

阅读量1.5k

点赞数

分类专栏： ● 项目实战 -----【Enpower】文章标签： FusionCharts SWF

本文链接：https://blog.csdn.net/wpb92/article/details/51930548

版权

● 项目实战同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

-----【Enpower】

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用FusionCharts通过XML文件创建图表，包括柱状图、折线图和区域图的展示。首先建立XML数据文件，然后通过引入js和SWF核心文件，调整SWF参数实现2D到3D图表的转换。加载XML时需要注意DOM元素位置及XML文件格式，以避免错误。后续文章将探讨后台数据如datatable如何加载到FusionCharts。

摘要由CSDN通过智能技术生成

上篇已经简单介绍了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', "ChartId", "400", "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的处理。