ZedGraph图形控件在Web开发中的应用

简介: ZedGraph介绍:ZedGraph是一个功能强大图形控件,可以根据任意数据集创建2D曲线,bar,和pie图,同时我们既可以Windows Form中,也可以在ASP.NET Web Form中使用它。

ZedGraph介绍:

ZedGraph是一个功能强大图形控件,可以根据任意数据集创建2D曲线,bar,和pie图,同时我们既可以Windows Form中,也可以在ASP.NET Web Form中使用它。ZedGraph具有高度的灵活性,我们几乎可以定制图形的每个方面,同时又为所有的特性提供了默认值,因此可以快速上手。ZedGraph与.NET 2.0和Visual Studio 2005兼容。

ZedGraph在web中的应用:

zedgraph是一个开源免费项目,其官方网http://zedgraph.org/wiki/index.php?title=Main_Page

zedgraph中有两个命名空间--------ZedGraph和ZedGraph.Web。

ZedGraph 命名空间包含整个ZedGraph的类,加上一个ZedGraphControl控件(用于WinForm开发用的UI控件)。

ZedGraph.Web命名空间包含用于web开发的组件,加上一个ZedGraphWeb控件(用于web开发的UI控件)。

          当只开发WinForm程序时,可以只添加引用ZedGraph命名空间对应的ZedGraph.dll。并可以在工具箱中,用 “选择项”把ZedGraphControl控件当成工具添加到工具箱中,这时就可以像其他(如button)一样,直接从工具箱中拖拉出来。

          当开发web程序时,就要添加引用ZedGraph.dll和ZedGraph.Web.dll。并也可在工具箱中,把ZedGraphWeb控件添加到工具箱。

          现在讲关于zedgraph 在web中的应用:

          ZedGraphWeb.RenderMode有两种模式:ImageTag和RawImage。

          ImageTag:这是用的比较多的。此时,把zedgraph作为一个正常控件使用。它的每一次请求,都会先生成图片,缓存在服务器上的一个指定文件夹下(这些图片,在客户端关闭浏览器,缓存时间到时,自动删除),接着自动产生一个<img srl="">标签,放在原来ZedGraphWeb在网页中的位置。img的src指向缓存在指定文件夹下的图片的地址,并加上time属性,以骗取浏览器重新加载图片。默认情况下,我们需要在应用程序的根目录下,指定一个ZedGraphImages的文件夹来存放缓存图片,大家也可修改ZedGraphWeb的

 

Height:300 
Width: 400 
RenderedImagePath: ~/ZedGraphImages/     (这个属性可以自己设置路径) 
ChartFill.Color: Black 
ChartFill.Type: Solid 
TmpImageDuration: 0      (注意这里的单位是小时,如果不小心会在服务器端产生很多的垃圾文件) 

这是利用Visual Studio属性面板对ZedGraph控件进行设置

在解决方案浏览器中右击项目,选择New Folder,命名为ZedGraphImages,ZedGraph使用此文件夹存放呈现到客户端的图片,必须添加这个文件夹。

绘制图形:

命名空间应用:

aspx.cs文件中

using ZedGraph.Web;
using System.Data.SqlClient;

aspx文件中

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" Theme=""%>
<%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>

<!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 runat="server">
    <title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
        <ZGW:ZEDGRAPHWEB runat="server"
                Width="900" Height="500" OnRenderGraph="OnRenderGraph" RenderedImagePath="~/image/" TmpImageDuration="0.01">
        </ZGW:ZEDGRAPHWEB>
</form>
</body>
</html>

在aspx.cs文件里添加ZedGraph的事件代码OnRenderGraph:

protected void OnRenderGraph(ZedGraphWeb webObject, Graphics g, MasterPane masterPane)
{

        GraphPane myPane = masterPane[0];
        string[] labels = null;
        myPane.Title.Text = "";//报表名称
        myPane.XAxis.Title.Text = "";//横坐标的名称
        myPane.YAxis.Title.Text = "";//纵坐标的名称
        SqlConnection myConnection = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);

//获取数据库中的数据
        SqlDataAdapter myDataAdapter = new SqlDataAdapter("select * from RealDate", myConnection);
        DataSet myDs = new DataSet();
        myDataAdapter.Fill(myDs, "RealDate");
        int iCount = myDs.Tables["RealDate"].Rows.Count;
        double[] y = new double[iCount];
        string s = string.Empty;
        for (int i = 0; i < iCount; i++)
        {
            DateTime sTime = Convert.ToDateTime(myDs.Tables["RealDate"].Rows[i][0].ToString());
            s += sTime.ToString("hh:mm:ss") + ";";
            y[i] = Convert.ToDouble(myDs.Tables["RealDate"].Rows[i][1].ToString());
        }
        labels = s.Split(';');
        LineItem myCurve = myPane.AddCurve("监测值", null, y, Color.Red, SymbolType.Circle);
        myCurve.Line.IsSmooth = true;
        myPane.XAxis.Type = AxisType.Text;
        myPane.XAxis.Scale.TextLabels = labels;
        myPane.XAxis.Scale.FontSpec.Size = 7;
        myCurve.Line.Width = 1.5F;
        myCurve.Symbol.Fill = new Fill(Color.White);
        myCurve.Symbol.Size = 5;
        myPane.XAxis.Scale.BaseTic = 0;
        myPane.Chart.Fill = new Fill(Color.White, Color.SteelBlue, 45.0F);

        const double offset = 0.001;
        for (int i = 0; i < iCount; i++)
        {
            PointPair pt = myCurve.Points[i];
            TextObj text = new TextObj(pt.Y.ToString(), pt.X, pt.Y + offset, CoordType.AxisXYScale, AlignH.Left, AlignV.Center);
            text.ZOrder = ZOrder.A_InFront;
            text.FontSpec.Border.IsVisible = false;
            text.FontSpec.Fill.IsVisible = false;
            text.FontSpec.Fill = new Fill(Color.FromArgb(100, Color.White));
            text.FontSpec.Angle = 90;

            myPane.GraphObjList.Add(text);
        }
        myPane.YAxis.Scale.MaxGrace = 0.2;
        masterPane.AxisChange(g);

}

效果图:

 ZedGraph图形控件在Web开发中的应用 - 太平凡 - 平凡人的博客

相关文章
|
24天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
38 3
|
29天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
36 3
|
24天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
126 45
|
2天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
11 5
|
11天前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
|
5天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
19 2
|
14天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
20天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
34 1
|
22天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
25天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
25 3
下一篇
无影云桌面