在ASP.NET中使用FusionCharts图表

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

项目中常常会使用一些图表，用图表来丰富自己的页面，那么Fusioncharts将是一个很不错的选择，其效果也十分好。有关它的一下东西，可以在http://www.fusioncharts.com/里面下载或者参考。

以下将用一个简单的实例来说明其应用，其中数据源部分是通过AJAX（JQuery）来实现从服务端取得的。

1.下载FusionCharts组建，并将其放在项目的某个目录中

官方网站上能下载到很多不同格式的Charts模板，这些模板都是SWF文件，他们都会对应各种不同的XML格式的数据源，这里需要根据选取的模板确定XML数据源的格式。这里我以选择Column3D.swf为例，其图表和数据源如下图：

2.ASPX页面

添加FusionCharts的JS文件：

<script language="javascript" type="text/javascript" src="/Components/FusionCharts/JSClass/FusionCharts.js"></script>

这里我使用JQuery中提供的Ajax来读取数据源，所以要添加JQuery的JS文件：

<script language="javascript" type="text/javascript" src="/Scripts/JQuery/jquery-1.4.1.js"></script>

在页面上添加一个DIV容器：

<div id="divColumn3DChart""></div>

这里就是最核心的一个JS方法啦：

function SetDataForCharts() {
//柱状图
        $.ajax({
            type: 'POST',
            url: '/Components/AjaxMethods.aspx/GetDataForColumn3DChart',
            contentType: "application/json",
            datatype: "json",
            success: function (response) {
                var val = response.d;
                var chart =new FusionCharts("/Components/FusionCharts/Charts/Column3D.swf", "newChart", "280", "200", "0", "1");
                chart.setDataXML(val);
                chart.render("divColumn3DChart");
            }
        });

url：获取数据源时所需要调用的函数，函数返回值为XML字符串。路径使用相对路径。

如果想打开页面就加载这个Chart，可以window.onload = function SetDataForCharts() { //TODO }

3.上一步url对应的文件代码

关键的函数为：

[System.Web.Services.WebMethod()]
publicstaticstring GetDataForColumn3DChart()
{
　　string strXML ="这里需要根据实际需求，从数据库中将数据查询出来，并拼接出符合格式的XML字符串";
　　return strXML;
}