脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → .net实现动态柱状图和饼状图

.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 Core MVC压缩样式、脚本详解

    ASP.NET Core MVC压缩样式、脚本详解

    这篇文章主要介绍了ASP.NET Core MVC压缩样式、脚本详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • 发布一个基于TokyoTyrant的C#客户端开源项目

    发布一个基于TokyoTyrant的C#客户端开源项目

    目前在网上关于TokyoCabinet（以下简称TC）和TokyoTyrant（以下简称TT）的资料已相对丰富了，但在.NET平台上的客户端软件却相对匮乏，因为做Discuz!NT企业版的关系，两个月前开始接触TC和TT，开始写相关的客户端代码。
    2010-07-07
  • 深入解读ASP.NET Core身份认证过程实现

    深入解读ASP.NET Core身份认证过程实现

    这篇文章主要介绍了深入解读ASP.NET Core身份认证过程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • ASP.NET MVC通过勾选checkbox更改select的内容

    ASP.NET MVC通过勾选checkbox更改select的内容

    这篇文章介绍了ASP.NET MVC通过勾选checkbox更改select内容的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09
  • Web Services使用多态的方法

    Web Services使用多态的方法

    Web Services可以支持多态，不过仅仅限制在可以直接引用Web Services的时候，本文也只是起到抛砖引玉的效果，
    2015-10-10
  • 详解在Azure上部署Asp.NET Core Web App

    详解在Azure上部署Asp.NET Core Web App

    这篇文章主要介绍了详解在Azure上部署Asp.NET Core Web App，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • .NET程序性能监控系统Elastic AMP的使用方法

    .NET程序性能监控系统Elastic AMP的使用方法

    这篇文章介绍了.NET程序性能监控系统Elastic AMP的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • .Net集合排序的一种高级玩法实例教程

    .Net集合排序的一种高级玩法实例教程

    这篇文章主要给大家介绍了关于.Net集合排序的一种高级玩法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05
  • 水晶报表图片不显示两种问题分析及解决方法

    水晶报表图片不显示两种问题分析及解决方法

    水晶报表布置后里面的图片不显示的情况，分两种：一是：水晶报表工具栏上的图片不显示；二是：水晶报表中的的图片对象不显示,接下来将分别介绍解决方法，感兴趣的朋友可以了解下啊
    2013-01-01
  • .NET Core利用动态代理实现AOP(面向切面编程)

    .NET Core利用动态代理实现AOP(面向切面编程)

    用动态代理可以做AOP（面向切面编程），进行无入侵式实现自己的扩展业务，调用者和被调用者之间的解耦，提高代码的灵活性和可扩展性。本文将为大家详细介绍实现的方法，感兴趣的可以学习一下
    2022-01-01

最新评论