ASP.NET实现数据图表1

标签: asp.net float import c string gdi+
825人阅读 评论(0) 收藏 举报
三.在ASP.NET中实现数据图表的完整源代码和运行界面:

  在掌握了产生图片,在给图片上色、在图片上输出字符、和画线等基本操作过以后,充分的利用各种基本操作,就可以得的在ASP.NET中实现数据图表的完整程序,下图是运行界面:

图05:在ASP.NET中实现数据图表的运行界面

  下面是在ASP.NET中实现数据图表的完整代码(chart1.aspx),如下:

<%@ Import Namespace = "System" %>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Drawing2D" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>
<script language = "C#" runat = "server" >

class LineChart
{
public Bitmap b ;
public string Title = "在ASP.NET中实现数据图表" ;
public ArrayList chartValues = new ArrayList ( ) ;
public float Xorigin = 0 , Yorigin = 0 ;
public float ScaleX , ScaleY ;
public float Xdivs = 2 , Ydivs = 2 ;

private int Width , Height ;
private Graphics g ;
private Page p ;

struct datapoint {
public float x ;
public float y ;
public bool valid ;
}

//初始化
public LineChart ( int myWidth , int myHeight , Page myPage ) {
Width = myWidth ; Height = myHeight ;
ScaleX = myWidth ; ScaleY = myHeight ;
b = new Bitmap ( myWidth , myHeight ) ;
g = Graphics . FromImage ( b ) ;
p = myPage ;
}

public void AddValue ( int x , int y ) {
datapoint myPoint ;
myPoint . x = x ;
myPoint . y = y ;
myPoint . valid = true ;
chartValues . Add ( myPoint ) ;
}

public void Draw ( ) {
int i ;
float x , y , x0 , y0 ;
string myLabel ;
Pen blackPen = new Pen ( Color . Blue , 2 ) ;
Brush blackBrush = new SolidBrush ( Color . Black ) ;
Font axesFont = new Font ( "arial" , 10 ) ;

//首先要创建图片的大小
p . Response . ContentType = "image/jpeg" ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , Width , Height ) ;
int ChartInset = 50 ;
int ChartWidth = Width - ( 2 * ChartInset ) ;
int ChartHeight = Height - ( 2 * ChartInset ) ;
g . DrawRectangle ( new Pen ( Color . Black , 1 ) , ChartInset , ChartInset , ChartWidth , ChartHeight ) ;
//写出图片上面的图片内容文字
g . DrawString ( Title , new Font ( "arial" , 14 ) , blackBrush , Width / 3 , 10 ) ;
//沿X坐标写入X标签
for ( i = 0 ; i <= Xdivs ; i++ ) {
x = ChartInset + ( i * ChartWidth ) / Xdivs ;
y = ChartHeight + ChartInset ;
myLabel = ( Xorigin + ( ScaleX * i / Xdivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , x - 4 , y + 10 ) ;
g . DrawLine ( blackPen , x , y + 2 , x , y - 2 ) ;
}
//沿Y坐标写入Y标签
for ( i = 0 ; i <= Ydivs ; i++ )
{
x = ChartInset ;
y = ChartHeight + ChartInset - ( i * ChartHeight / Ydivs ) ;
myLabel = ( Yorigin + ( ScaleY * i / Ydivs ) ) . ToString ( ) ;
g . DrawString ( myLabel , axesFont , blackBrush , 5 , y - 6 ) ;
g . DrawLine ( blackPen , x + 2 , y , x - 2 , y ) ;
}
g . RotateTransform ( 180 ) ;
g . TranslateTransform ( 0 , - Height ) ;
g . TranslateTransform ( - ChartInset , ChartInset ) ;
g . ScaleTransform ( - 1 , 1 ) ;

//画出图表中的数据
datapoint prevPoint = new datapoint ( ) ;
prevPoint . valid = false ;
foreach ( datapoint myPoint in chartValues ) {
if ( prevPoint . valid == true ) {
x0 = ChartWidth * ( prevPoint . x - Xorigin ) / ScaleX ;
y0 = ChartHeight * ( prevPoint . y - Yorigin ) / ScaleY ;
x = ChartWidth * ( myPoint . x - Xorigin ) / ScaleX ;
y = ChartHeight * ( myPoint . y - Yorigin ) / ScaleY ;
g . DrawLine ( blackPen , x0 , y0 , x , y ) ;
g . FillEllipse ( blackBrush , x0 - 2 , y0 - 2 , 4 , 4 ) ;
g . FillEllipse ( blackBrush , x - 2 , y - 2 , 4 , 4 ) ;
}
prevPoint = myPoint ;
}

//最后以图片形式来浏览
b . Save ( p . Response . OutputStream , ImageFormat . Jpeg ) ;
}

~LineChart ( ) {
g . Dispose ( ) ;
b . Dispose ( ) ;
}
}
void Page_Load ( Object sender , EventArgs e )
{
LineChart c = new LineChart ( 640 , 480 , Page ) ;
c . Title = " 在ASP.NET中实现数据图表" ;
c . Xorigin = 0 ; c . ScaleX = 500 ; c . Xdivs = 5 ;
c . Yorigin = 0 ; c . ScaleY = 1000 ; c . Ydivs = 5 ;
c . AddValue ( 0 , 150 ) ;
c . AddValue ( 50 , 50 ) ;
c . AddValue ( 100 , 700 ) ;
c . AddValue ( 200 , 150 ) ;
c . AddValue ( 300 , 450 ) ;
c . AddValue ( 400 , 75 ) ;
c . AddValue ( 450 , 450 ) ;
c . AddValue ( 500 , 250 ) ;
c . Draw ( ) ;
}
</script >


  四. 总结:

  实现图表始终是互联网编程的一个难点,本文介绍了在ASP.NET页面中如何实现数据图表,在没有什么好的组件可以利用的前提下,利用.Net FrameWork SDK GDI+中提供的各种用以操作图形的方法,这样的过程虽然有点烦杂,但对实现复杂的图表是非常有用的。希望本文不仅能够帮助读者解决在互联网上的图表问题,也能够对读者的针对GDI+也有所了解。
查看评论

echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据

最近做的一个项目的其中一个页面有图表展示数据的需求,有柱状图、折线图和饼图,于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了,详细请参照echarts官网和echart...
  • JaneLittle
  • JaneLittle
  • 2017-04-11 17:39:32
  • 8727

使用echarts做动态数据 图表

$(function() { addDefaultDate(); switchPanel('showListMemory'); }); var listButtonTitle = '点击显示列...
  • wskydwffg2017
  • wskydwffg2017
  • 2017-01-25 17:29:49
  • 974

eCharts使用图表简单示例

1. eCharts官网 http://echarts.baidu.com/index.html。     这是官网的简介:     ECharts,缩写来自Enterprise Charts,商...
  • hu_shengyang
  • hu_shengyang
  • 2014-09-03 16:08:31
  • 60687

asp.net下应用Echarts饼图

最近要做一个统计功能,列表难以表现,就采用了百度echarts饼图来表示。 百度Echarts教程 这是百度的饼图实例饼图实例 前台JS代码: 要在form中放一个div,如  {CSDN:CODE...
  • horizon0503
  • horizon0503
  • 2016-01-05 14:04:38
  • 1233

如何在网页中显示数据图表--Echarts入门教程

如何在网页中显示数据图表–Echarts入门教程五分钟上手官网文档链接地址–>戳这里 一、下载所需要的echarts.min.js文件 官网下载链接 csdn下载链接...
  • longgeaisisi
  • longgeaisisi
  • 2017-10-11 13:03:37
  • 515

1.简单实例:ASP.NET下Echarts通过Ajax从数据库中获取数据

后台:Test01.ashx.cs:从数据库获取数据,通过HTTP请求(HttpContext)实现和前台数据传递json数据 using System; using System.Coll...
  • xiaolinzifl
  • xiaolinzifl
  • 2016-04-29 15:56:02
  • 5639

Echarts 动态从后台获取数据进行图表的展示

Echarts 动态从后台获取数据进行图表的展示 前端部分:   ECharts            ...
  • qq_31561851
  • qq_31561851
  • 2016-09-19 17:08:03
  • 11839

使用ECharts实现数据图表分析

实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以XML为数据、提供丰富的F...
  • JerehEdu
  • JerehEdu
  • 2015-05-29 14:51:24
  • 2094

echarts 图表展示 练习一 (基础页面加载数据)

1.下载echarts.zip包   当然你选择哪个都行只要能下载下来。 2. 解压查看内部构建 build 文件夹 我们需要这里的东西 当然里面也有其他东西你也需要看看比如doc 3.这...
  • happyvx
  • happyvx
  • 2015-08-06 15:47:52
  • 1290

ASP.NET Web开发 Echarts图表空数据优化

1、问题提出      在Web开发中,使用Echarts百度图表控件显示折线图、饼图等时,如果从数据库取出的是空数据,默认显示的是动态气泡图,看起来很凌乱,用户体验不好,那么我们如何修改呢?    ...
  • taomanman
  • taomanman
  • 2016-03-04 11:08:46
  • 2770
    个人资料
    等级:
    访问量: 5万+
    积分: 682
    排名: 7万+
    文章分类
    最新评论