.net+FusionChart实现动态显示的柱状图和饼状图

更新时间：2022年07月05日 11:09:08 作者：AZRNG

这篇文章介绍了.net+FusionChart实现动态显示柱状图和饼状图的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="divBarChart">
    </div>
    <div id="divPieChart">
    </div>
    <div id="divPieChart2">
    </div>
    <script type="text/javascript" src="FusionChart/FusionCharts.js"></script>
    <script type="text/javascript">
        function ConstructHttpString(myURL) {
            myURL += "?rnd=" + new Date().getTime();
            return encodeURIComponent(myURL.toString());
        }
        //画图(以指定 xml格式文件为数据源)
        function DrawChart(divId,flashFileName,width,height,xmlUrl) {
            var myChartId = new Date().getTime();
            var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
            //myChart.setDataURL("data.xml"); //获取xml格式数据源
            myChart.setDataURL(ConstructHttpString(xmlUrl)); //获取xml格式数据源
            myChart.set
            myChart.addParam("wmode", "Opaque");
            myChart.render(divId);
        }
        
        //画图 (以指定 xml格式字符串为数据源)
        function DrawChart2(divId, flashFileName, width, height) {
            var myChartId = new Date().getTime();
            var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
            myChart.setDataXML('<chart caption="逗你玩" numberPrefix="$"><set value="25" label="Item A" color="AFD8F8" /><set value="17" label="Item B" color="F6BD0F" /><set value="23" label="Item C" color="8BBA00" isSliced="1" /></chart>');
            myChart.addParam("wmode", "Opaque");
            myChart.render(divId);
        }
        //柱状图
        DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml");
        //饼状图
        DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx");
        //饼状图
        DrawChart2("divPieChart2", "Pie2D.swf", "500", "396");
    </script>
</body>
</html>

上面是，前端页面上的使用，可以看出：其用法很简单，对于绘制柱状图或是饼状图等，对于使用唯一的区别就是：指定不同的展示flash文件和相应的xml格式内容(具体每种chart图表对应的xml文件格式，请查看官网Demo)。其方法主要方法有：

setDataURL：设置数据源Url，以指定 xml格式文件为数据源
setDataXML：设置数据源xml内容，以指定 xml格式字符串为数据源

(网上说有个setJSONData的方法，可以设置json对象作为数据源，但应该是老版本或整合修改后的js文件，没找到，所以直接设置json对象作为数据源貌似不行！)

using System;
 
namespace Web_Client.pieChart
{
    public partial class xml : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.ContentType = "text/xml; characterset=utf-8";
            Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });
            Response.Write("<chart caption=\"饼状图\" numberPrefix=\"$\"><set value=\"25\" label=\"项目 A\" color=\"AFD8F8\" /><set value=\"17\" label=\"Item B\" color=\"F6BD0F\" /><set value=\"23\" label=\"Item C\" color=\"8BBA00\" isSliced=\"1\" />   <set value=\"65\" label=\"Item D\" color=\"A66EDD\" /><set value=\"22\" label=\"Item E\" color=\"F984A1\" /></chart>");
            Response.End();
        }
    }
}

以上是在后台代码中输出xml格式文件为数据源，需要注意的是：Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——这两行代码是不可缺少的，其作用是：指定输出xml文件的编码和解决中文乱码问题！

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ASP.net与SQLite数据库通过js和ashx交互（连接和操作）
这篇文章主要介绍了ASP.net与SQLite数据库通过js和ashx交互（连接和操作），具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
导致Asp.Net站点重启10个原因小结分析
Asp.Net站点有时候会莫名其妙的重启，什么原因导致的却不得而知，经过一番折腾后，我总结了导致Asp.Net站点重启的10个原因，需要的朋友可以参考下。
2011-08-08
Visual Studio快捷键汇总
这篇文章介绍了Visual Studio的常用快捷键，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
asp.net下PageMethods使用技巧
ASP.net AjAX中的PageMethods可以将静态页方法添加到 ASP.NET 页中并将其用作 Web 方法。然后，无需创建单独的 .asmx 文件即可从该页中的脚本调用这些方法，就好像这些方法是 Web 服务的一部分。特别是在一些交互流程不复杂而调用次数和方法又比较多的情况下更为方便。因为PageMethods不需要我们再添加另外的WEB服务或Page来处理请求。
2008-03-03
asp.net简化接收参数值的函数
获取querystring 参数名
2008-05-05
c#加密类使用方法示例
这篇文章主要介绍了c#加密类使用方法,大家可以参考使用
2013-11-11
asp.net get set用法
属性的定义和使用属性由两个部分组成：属性头和存储器。存储器分为get访问器和set访问器。声明属性的一般形式为：修饰符类型属性名
2008-05-05
在ASP.NET MVC下限制同一个IP地址单位时间间隔内的请求次数的解决方法
有时候,当用户请求一个Controller下的Action,我们希望,在单位时间间隔内,比如每秒,每分钟,每小时,每天,每星期,限制同一个IP地址对某个Action的请求次数,如何做呢？这篇文章主要介绍了在ASP.NET MVC下限制同一个IP地址单位时间间隔内的请求次数,需要的朋友可以参考下
2024-01-01
ASP.NET Core Zero模块系统讲解
本文详细讲解了ASP.NET Core Zero模块系统，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-02-02
Elasticsearch.Net使用入门教程（1）
这篇文章主要为大家详细介绍了Elasticsearch.Net使用入门教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11