ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > Linux操作系统 > Linux操作系统 > (转)ASP.NET2.0统计图表

(转)ASP.NET2.0统计图表

原创 Linux操作系统 作者：bzz8363 时间：2008-06-12 19:24:21 0 删除 编辑

本文讲述如何绘制条形图，折线图，柱形图，面积图等常见图形。

效果图：

手把手教程：

原理：OWC是Office   Web   Compent的缩写，即Microsoft的Office   Web组件，它为在Web中绘制图形提供了灵活的同时也是最基本的机制。在一个intranet环境中，如果可以假设客户机上存在特定的浏览器和一些功能强大的软件（如IE6和Office   2000/XP/2003），那么就有能力利用Office   Web组件提供一个交互式图形开发环境。这种模式下，客户端工作站将在整个任务中分担很大的比重。理论上说Excel能做的图都可以通过OWC画。

第一步：
右键点击网站根目录引用。如图所示：

第二步：
点击“添加引用”后弹出一个窗口，添加OWC的引用。如图所示：

点“确定”。

第三步：
代码中引用Microsoft.Office.Interop.Owc11。

全部代码
后台代码：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Data.SqlClient;   //添加数据操作引用
using Microsoft.Office.Interop.Owc11;//添加Office组件引用

public partial class OWCdrawing : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        //连接数据库并获取特定字符串
        string strSeriesName = "图例1";
        string ConnectString = "Server=(local);DataBase=web;Uid=sa;Pwd=sa";
        string Sql = "SELECT month,Allcount FROM Chart";
        SqlConnection myConn = new SqlConnection(ConnectString);
        myConn.Open();
        SqlDataAdapter Da = new SqlDataAdapter(Sql, myConn);
        DataSet ds = new DataSet();
        Da.Fill(ds);

        //存放月
        string[] MonNum = new string[12];
        //存放数据
        string[] MonCount = new string[12];
        //为数组赋值
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            MonNum[i] = ds.Tables[0].Rows[i][0].ToString();
            MonCount[i] = ds.Tables[0].Rows[i][1].ToString();
        }
        //为x轴指定特定字符串，以便显示数据
        string strXdata = String.Empty;
        foreach (string strData in MonNum)
        {
            strXdata += strData + "\t";
        }
        string strYdata = String.Empty;
        //为y轴指定特定的字符串，以便与x轴相对应
        foreach (string strValue in MonCount)
        {
            strYdata += strValue + "\t";
        }

        //创建ChartSpace对象来放置图表
        ChartSpace laySpace = new ChartSpaceClass();

        //在ChartSpace对象中添加图表
        ChChart InsertChart = laySpace.Charts.Add(0);

        //指定绘制图表的类型。类型可以通过OWC.ChartChartTypeEnum枚举值得到
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeLine;//折线图
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeArea;//面积图
        //InsertChart.Type = ChartChartTypeEnum.chChartTypeBarClustered;//条形图
        InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;//柱形图

 

        //指定图表是否需要图例标注
        InsertChart.HasLegend = false;

       
        InsertChart.HasTitle = true;//为图表添加标题
        InsertChart.Title.Caption = "2006年清清月儿每个月花销流水账";//标题名称

        //为x,y轴添加图示说明
        InsertChart.Axes[0].HasTitle = true;
        InsertChart.Axes[0].Title.Caption = "";//月份
        InsertChart.Axes[1].HasTitle = true;
        InsertChart.Axes[1].Scaling.SplitMinimum = 200;
        InsertChart.Axes[1].Title.Caption = "数量";

        //添加一个series系列
        InsertChart.SeriesCollection.Add(0);

        //给定series系列的名字
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);

        //给定分类
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strXdata);

        //给定值
        InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, strYdata);
        //输出文件.
        string strAbsolutePath = (Server.MapPath(".")) + "\\ShowData.gif";
        laySpace.ExportPicture(strAbsolutePath, "GIF", 400, 250);

        //创建GIF文件的相对路径.
        string strRelativePath = "./ShowData.gif";

        //把图片添加到placeholder中，并在页面上显示
        string strImageTag = "";
        this.PlaceHolder1.Controls.Add(new LiteralControl(strImageTag));
    }
}

前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OWCdrawing.aspx.cs" Inherits="OWCdrawing" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml" >

    清清月儿<A href="http://blog.csdn.net/21aspnet%3C/title"><FONT color=#56b6e9>http://blog.csdn.net/21aspnet</title</FONT></A>><BR></head><BR><body><BR>    <form. id="form1" runat="server"><BR>   <div style="text-align: left"><BR>        <table style="width: 600px"><BR>            <tr><BR>                <td colspan="3" style="height: 20px"><BR>                    <strong>怎么样在ASP.NET2.0中使用OWC组件画图</strong></td><BR>            </tr><BR>            <tr><BR>                <td colspan="3" rowspan="2" style="height: 21px"><BR>        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><BR>                </td><BR>            </tr><BR>            <tr><BR>            </tr><BR>        </table><BR>    <BR>    </div><BR>    </form><BR></body><BR></html><BR></P> <P align=left><STRONG>数据库SQL脚本</STRONG>：<BR>USE [web]<BR>GO<BR>/****** 对象:  Table [dbo].[Chart]    脚本日期: 03/27/2007 22:26:00 ******/<BR>SET ANSI_NULLS ON<BR>GO<BR>SET QUOTED_IDENTIFIER ON<BR>GO<BR>CREATE TABLE [dbo].[Chart](<BR> [id] [int] IDENTITY(1,1) NOT NULL,<BR> [month] [smallint] NULL,<BR> [Allcount] [int] NULL<BR>) ON [PRIMARY]<BR></P> <P align=left>在数据库建好表以后要自己手动假想有12条数据，手动添加，最终结果类似下图：<BR><IMG alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/21aspnet/286353/o_owc9.gif"></P> <P align=left>后台程序说明：<BR>最关键就是<FONT color=#ff0000>InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;</FONT></P> <P align=left><FONT color=#ff0000><FONT color=#000000>你可以在</FONT>ChartChartTypeEnum</FONT>后<STRONG><FONT color=#ff00ff>点</FONT></STRONG>出其他方法。如图所示：<BR><IMG alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/21aspnet/286353/o_owc3.gif"></P> <P align=left>下面列出的是其他类型图：</P> <P align=left>折线图：<BR><IMG alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/21aspnet/286353/o_owc4.gif"></P> <P align=left> </P><FONT color=#ff0000></FONT> <P align=left><BR>面积图：<BR><IMG alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/21aspnet/286353/o_owc5.gif"></P> <P align=left>条形图：<BR><IMG alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/21aspnet/286353/o_owc6.gif"><BR></P> <P align=left>OWC什么图形都可以画，还能画立体的，请大家自己尝试。</P> <P align=left>可以参考OWC手册，具体位置：<BR><FONT color=#ff0000><STRONG>C:\Program Files\Common Files\Microsoft Shared\Web Components\11\2052\OWCVBA11.CHM</STRONG></FONT></P></FONT> </div> <p style="clear:both;"></p> <p class="translate"> 来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/730950/viewspace-344564/ ，如需转载，请注明出处，否则将追究法律责任。 </p> <!-- --> </div> </div> <div class="preview-footer clearfix"> <!--已点赞、收藏--> <div class="icon-praise" id="praise" onclick="blogObj.praise($(this),'/praise/')"><span class="text"></span><span class="num">0</span></div> <div class="icon-collect" id="collect" onclick="blogObj.praise($(this),'/favour/')"><span class="text"></span><span class="num">0</span></div> <div class="share-group fr"> <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1522216707615"> <span class="fl">分享到：</span> <a href="javascript:;" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="javascript:;" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a> <a href="javascript:;" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="javascript:;" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div> <script> window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdDesc": "", "bdMini": "", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {"bdSize": 16} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; if ($(window).width() < 1320) { if ($(window).width() < 1200) { $(".sideslip").css({ "left": "20px", "margin-left": 0 }) } else { $(".sideslip").css({ "margin-left": "-590px" }) } }</script> </div> </div> <div class="article-context"> <div class="fl"> <span class="color77">上一篇：</span> 没有了~ </div> <div class="fr"> <span class="color77">下一篇：</span> <a href="https://blog.itpub.net/730950/viewspace-344567/">(转)OWC学习笔记-电子表格（Spreadsheet）风格属性设置</a> </div> </div> <input type="hidden" id="blogId" name="blogId" value="344564"> <!--评论开始--> <div class="blog-comment"> <div class="new-comment"> <input type="hidden" id="hid" name="hid" value="344564"> <input type="hidden" name="_token" value="LBG005Sm9hOReR1ccNpxvz7U0JwuPEarff2uYKyN"> <a class="avatar" href="javascript:;"> <img src="/images/user_pic_default.png"></a> <!--用户未登录--> <div class="sign-container"> <span>请登录后发表评论</span> <a class="btn btn-sign"> <a class="layui-btn ml30" onclick="blog.login(event)">登录</a> </a> </div> <!--用户已登录--> <textarea placeholder="请写下你的评论…" onfocus="blogObj.textareaFocus($(this),200)" maxlength=200></textarea> </div> <div class="comment-list"> <div class="top-title"><span class="all-comment">全部评论</span> <span class="colorbb ml20"></span> </div> <div class="comment-items" id="comment_items"> <script type="text/template" id='blog_template'> <%for(var i=0;i <items.length;i++){%> <div class="comment-item"> <div class="author"> <a target="_blank" href="/<%=items[i].uid%>" class="avatar"> <img src="<%=items[i].headimg%>" alt=""> </a> <div class="info"> <div class="name"><a target="_blank" href="/<%=items[i].uid%>"><%=items[i].username%></a> <span class="fr reply-btn" onclick="blogObj.newComment($(this),'<%=items[i].username%>',<%=items[i].id%>)">回复</span> </div> <div class="time colorbb"><%=items[i].createtime%></div> </div> </div> <p class="comment-wrap"><%=items[i].content%></p> <%if(items[i].items.items.length) { %> <div class="sub-comment-list"> <%for(var j=0;j <items [i].items.items.length;j++){%> <div class="sub-comment"> <div class="color77 time-reply"> <span class="time"><%=items[i].items.items[j].createtime%></span> <span class="reply-btn fr" onclick="blogObj.newComment($(this),'<%=items[i].items.items[j].username%>',<%=items[i].items.items[j].id%>)">回复</span> </div> <p><a href="/<%=items[i].uid%>"><%=items[i].items.items[j].username%></a>   回复   <a href="/<%=items[i].touid%>"><%=items[i].items.items[j].tousername%></a>： <span class="content"><%=items[i].items.items[j].content%></span></p> </div> <%}%> <%if(items[i].items.total > 5) { %> <div class="more-comment"><span class="sub-comment-count">还有<i class="count"><%=items[i].items.total-5%></i>条评论</span><span class="more-comment-btn" onclick=blogObj.loadSubComment($(this),<%=items[i].id%>) data-count=1 data-flag=true>点击查看</span> </div> <%}%> </div> <%}%> </div> <%}%> </script> </div> </div> </div> <!--评论结束--> </div> <script> </script> <div class="fr w290"> <!--作者信息开始--> <!--作者信息开始--> <div class="author-info right-fixed "> <div class="head-img"> <a href="https://blog.itpub.net/730950/"><img src="http://account.itpub.net/api/avatar.php?uid=730950" alt=""></a> </div> <div class="author-name"><a href="https://blog.itpub.net/730950/">bzz8363</a></div> <div class="author-intro"> </div> <p class="register-time"><span class="color77">注册时间：</span>2008-06-12</p> <ul class="tree-list clearfix"> <li> <div class="item-tt">博文量</div> <a href="https://blog.itpub.net/730950/"><span class="item-num blognum">8</span></a> </li> <li> <div class="item-tt">访问量</div> <div class="item-num blogviewnum">17833</div> </li> </ul> </div> <!--作者信息结束--> <script> var data = {uid: 730950}; $._ajax({ url: '/getAuthorInfo/', data: data, type: 'get', dataType: 'json', success: function (data) { if (data.code == 200) { var data = data.data; $(".blognum").text(data.blognum); $(".blogviewnum").text(data.visitednum); } } }); </script> <!--作者信息结束--> <!--博文推荐开始--> <div class="blog-choice right-fixed"> <h3 class="choice-title">最新文章</h3> <ul class="newul"> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-2146352/" class="clearfix"> Oracle Linux 6 使 tmpfs 生效 方法 说明 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-2146350/" class="clearfix"> 安装后调整DB参数 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-2146349/" class="clearfix"> Oracle DB 开机自启动和关闭 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-346804/" class="clearfix"> (转)OWC绘图控件研究 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-344577/" class="clearfix"> (转)ADO.Net对Oracle数据库的操作 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-344572/" class="clearfix"> (转)OWC做电子表格和图表的试验 </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/730950/viewspace-344567/" class="clearfix"> (转)OWC学习笔记-电子表格（Spreadsheet）风格属性设置 </a> </li> <ul> </div> <!--大牛精选结束--> </div> </div> <div class="icon-back-top" onclick="$('html,body').animate({scrollTop:0},'slow');"></div> <!--main部分结束--> <!--百度推送--> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--footer部分开始--> <div class="blog-footer"> <div class="w1200 pr"> <div class="footer-links"> <a class="icon-blog icon-wx mr30"> <div class="wx-qrcode"> <img src="/images/qrcode.jpg" alt=""> </div> </a> <a href="https://weibo.com/itpub2001?from=myfollow_all" class="icon-blog icon-wb" target="_blank"></a> </div> <p class="footer-nav"> <a href="http://www.it168.com/bottomfile/it168.shtml" target="_blank">支持我们</a> <a href="http://www.it168.com/bottomfile/tgzn.shtml" target="_blank">作者招募</a> <a href="http://www.it168.com/bottomfile/sytk.shtml" target="_blank">用户协议</a> <a href="//blog.itpub.net/31509949/viewspace-2157750/" target="_blank">FAQ</a> <a href="http://edu.itpub.net/contactus.html" target="_blank">Contact Us</a> <script src="https://s22.cnzz.com/z_stat.php?id=1274521965&web_id=1274521965" language="JavaScript"></script> </p> <p>北京盛拓优讯信息技术有限公司. 版权所有  <a style="color:#777777;" target="_blank" href="http://beian.miit.gov.cn">京ICP备16024965号-8</a> 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 <a style="color:#777777;" target="_blank" href="http://www.it168.com/jubao.html"> 未成年人举报专区</a></p> <p>广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员</p> <p>违法和不良信息举报电话:18101376593</p> </div> </div> <!--footer部分结束--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5016281862f595e78ffa42f085ea0f49"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?540bee2c1a1b922df9e0a0b922440b73"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- END STAT PV --> </body> </html>