asp.net se da cuenta de la tabla de datos

Para insertar un gráfico en ASP, el método más utilizado es utilizar el control MSChart. Entonces, ¿es lo mismo en ASP.NET? La respuesta es no.

  Sabemos que ASP.NET es un lenguaje compilado. Cuando un cliente llama a una página ASP.NET por primera vez, en realidad pasa por un proceso de compilación más complicado. El archivo MSIL se compila y almacena en la máquina local. El archivo MSIL es en realidad Es un archivo de lenguaje intermedio, y luego este archivo es recompilado por un compilador JIT (Just in time) para generar lenguaje de máquina, de modo que se muestre la página ASP.NET que llama. Para diferentes máquinas, hay diferentes JIT. Está compilado en diferentes lenguajes de máquina Este es el llamado principio multiplataforma por el que Microsoft aboga firmemente por ASP.NET.

  Cuando una página ASP.NET se compila en un archivo MSIL, la biblioteca de clases utilizada para la compilación debe ser un archivo de código administrado (Código administrado), y los controles ActiveX son archivos que se han compilado en lenguaje de máquina, que pertenecen a archivos de código no administrados. (Código no administrado). Por lo tanto, es imposible llamar al componente MSChart directamente en ASP.NET. Aunque puede utilizar las herramientas proporcionadas por .Net framework para convertir este componente MSChart en un archivo de código administrado, el proceso es relativamente complicado y el gráfico generado por este método es bastante lento y está limitado por el propio componente MSChart. Para gráficos complejos, no se puede utilizar para generarlos.

  Este artículo tomará el gráfico del mercado de valores como ejemplo para presentar cómo implementar el gráfico en ASP.NET. De hecho, el gráfico de mercado que vemos no es un gráfico, sino una imagen. Genere una imagen en el lado del servidor y luego dibuje la información diversa que desea mostrar al usuario en la imagen, y luego envíe la imagen al cliente a través del navegador para formar un gráfico. Este es el método que se discutirá en este artículo. Aunque este método es más complicado de implementar, es flexible y muy práctico. Es especialmente adecuado para gráficos en Internet. El método de implementación específico se presenta a continuación.

  Una. Diseño de programa y entorno operativo presentados en este artículo

  (1). Microsoft Windows 2000 Server Edition

  (2) .. Net Framework SDK Beta 2 y superior

  dos. Los pasos clave y las soluciones para realizar gráficos de datos en ASP.NET:

  Hay dos pasos clave para dibujar un gráfico en una página ASP.NET: uno es crear un objeto de imagen (mapa de bits). Luego, use los métodos proporcionados por .Net FrameWork SDK para dibujar los gráficos que desee en este objeto de imagen, como dibujar líneas, dibujar puntos, etc. En segundo lugar, para que sea más adecuado para la transmisión, guarde este objeto de imagen en formato "Jpeg" y muéstrelo. Echemos un vistazo al método de implementación específico de estos dos pasos.

  (1) Primero, echemos un vistazo a cómo crear una imagen dinámica en la página ASP.NET y mostrarla.

  En realidad, es muy fácil crear un objeto de imagen. Se puede realizar utilizando la clase "Bitmap" en el espacio de nombres "System.drawing". La siguiente declaración puede crear un objeto de mapa de bits:

// Crear un objeto "Mapa de bits" Imagen de mapa de bits = nuevo mapa de bits (400, 400);

  Modifique los dos parámetros del objeto "Mapa de bits" para cambiar la longitud y el ancho del objeto de mapa de bits creado. El objeto Bitmap que se ha creado se puede mostrar mediante el método Save de la clase Bitmap. Dado que los archivos de mapa de bits ocupan mucho espacio, para facilitar la transmisión de red, generalmente se convierten en archivos "Jpeg" o "Gif" para guardar. La siguiente declaración convierte el objeto de mapa de bits creado en un archivo "Jpeg" para su visualización:

// Guarde este objeto de imagen en formato "Jpeg" y muéstrelo en la imagen del lado del cliente Guardar (Response. OutputStream, ImageFormat. Jpeg); 

  Con una pequeña modificación, el objeto de mapa de bits se puede mostrar como un archivo "GIF", de la siguiente manera:

// Guardar este objeto de imagen en formato "Jpeg" y mostrarlo en la imagen del lado del cliente Guardar (Response. OutputStream, ImageFormat. Gif);

  La función del siguiente código (chart3.aspx) es que ASP.NET crea dinámicamente una imagen y la muestra:

<% @ Page Language = "C #" ContentType = "image / jpeg"% > <% @ Import Namespace = "System"% > <% @ Import Namespace = "System.Drawing"% > <% @ Import Namespace = "System .Drawing.Drawing2D "% > <% @ Import Namespace =" System.Drawing.Imaging "% > < html > < head > < script language =" C # "runat =" server "> void Page_Load (remitente del objeto, EventArgs e) {// Crear un objeto de "mapa de bits" Imagen de mapa de bits = nuevo mapa de bits (400, 400); // Guardar este objeto de imagen en formato "Jpeg" y mostrarlo en la imagen del cliente. Guardar (Response. OutputStream, ImageFormat. Jpeg) ;} < / script > < / head > < body > < / body > < / html >

  La siguiente es la interfaz después de que se ejecuta este código:


        Figura 01: Use ASP.NET para crear imágenes dinámicamente 

  Lo que se produce es una imagen negra, que es muy fea. Coloreemos la imagen y dibujemos líneas y escribamos en la imagen.

(2) .Cómo colorear las imágenes generadas:

  De hecho, es relativamente fácil colorear la imagen generada. Primero, cree un objeto "Gráfico" basado en el objeto "Mapa de bits" y luego determine el tipo de gráficos que se colorearán de acuerdo con el método del objeto "Gráfico" ( por ejemplo, la imagen mostrada es una elipse o un cuadrado Espere). La función del siguiente código (chart4.aspx) es agregar verde claro a la imagen generada por el código chart3.aspx:

<% @ Page Language = "C #" ContentType = "image / jpeg"% > <% @ Import Namespace = "System"% > <% @ Import Namespace = "System.Drawing"% > <% @ Import Namespace = "System .Drawing.Drawing2D "% > <% @ Import Namespace =" System.Drawing.Imaging "% > < html > < head > < script language =" C # "runat =" server "> void Page_Load (remitente del objeto, EventArgs e) {// 创建 一个 "Mapa de bits" 对象 Imagen de mapa de bits = nuevo mapa de bits (400, 400); Gráficos g = Gráficos. FromImage (imagen); g. FillRectangle (new SolidBrush (Color. LightGreen), 0, 0, 400, 400); // 以 "Jpeg" 格式 保存 此 图片 对象 , 在 客户 端 显示 出来 image. Guardar (Respuesta. OutputStream, ImageFormat. Jpeg); } < / script > < / head > < body > < / body > < / html >

  La siguiente figura es la interfaz de chart4.aspx en ejecución:


        Figura 02: Colorea la imagen generada


  Por supuesto, no solo puede personalizar el color de la imagen generada, sino también personalizar la forma de la imagen generada. La función del siguiente fragmento de código es personalizar la forma de la imagen como una elipse:

<% @ Page Language = "C #" ContentType = "image / jpeg"% > <% @ Import Namespace = "System"% > <% @ Import Namespace = "System.Drawing"% > <% @ Import Namespace = "System .Drawing.Drawing2D "% > <% @ Import Namespace =" System.Drawing.Imaging "% > < html > < head > < script language =" C # "runat =" server "> void Page_Load (remitente del objeto, EventArgs e) {// 创建 一个 "Mapa de bits" 对象 Imagen de mapa de bits = nuevo mapa de bits (400, 400); Gráficos g = Gráficos. FromImage (imagen); g. FillRectangle (new SolidBrush (Color. LightGreen), 0, 0, 400, 400); // 以 "Jpeg" 格式 保存 此 图片 对象 , 在 客户 端 显示 出来 image. Guardar (Respuesta. OutputStream, ImageFormat. Jpeg); } < / script > < / head > < body > < / body > < / html >

  La siguiente figura es la interfaz de ejecución de este código:


        Figura 03: Personaliza la forma de la imagen

  Por supuesto, también puede utilizar otros métodos del objeto "Gráfico" para personalizar la imagen en otras formas, que no se introducirán una por una.

(3). Cómo dibujar líneas y escribir en la imagen:

  La escritura en una imagen se logra mediante el método DrawString () del objeto "Gráfico" generado. Antes de llamar a este método, se deben establecer la fuente y el pincel. El método de llamada específico es:

public void DrawString (string s, Font font, Brush brush, float x, float y);

"s" es la cadena que se va a generar, "fuente" es la fuente de la cadena, "pincel" es la definición del pincel y los dos parámetros siguientes son las coordenadas de la posición donde se genera la cadena. Las declaraciones específicas para generar cadenas en el programa son las siguientes:

Font axesFont = new Font ("arial ", 10); Brush blackBrush = new SolidBrush (Color Red.) ;. G DrawString (" imagen escribiendo texto arriba, Oh", axesFont, blackBrush, 90,  20);
 
  Para Para dibujar un línea en una imagen, utilice el método DrawLine () del objeto "Gráfico". La sintaxis de uso específica es la siguiente:

DrawLines vacíos públicos (Bolígrafo, Point [] puntos);

  Entre ellos, "puntos" es para definir la posición del punto. Por supuesto, también puedes usar el método usado en este artículo para llamarlo, que es definir cada línea trazada, así que me siento más metódico. A continuación se muestran tres líneas dibujadas en la imagen generada:

Pen redPen = new Pen (Color. Red, 1); Pen blackPen = new Pen (Color. Blue, 2); // La siguiente oración es para dibujar varias líneas en este objeto de imagen, puede definir el grosor de la línea, el punto de inicio, punto final, etc. g. DrawLine (blackPen, 0, 2, 210, 250); g. DrawLine (blackPen, 210, 250, 310, 50); g. DrawLine (redPen, 310, 50, 210 , 350);

  Conociendo estos conocimientos básicos, es más fácil personalizar la forma de la imagen, colorear la imagen, escribir en la imagen y dibujar líneas. La función del siguiente código (chart2.aspx) es personalizar una imagen cuadrada y dibujar líneas en la imagen, escritura y pintura, de la siguiente manera:

<% @ Page Language = "C #" ContentType = "image / jpeg"% > <% @ Import Namespace = "System"% > <% @ Import Namespace = "System.Drawing"% > <% @ Import Namespace = "System .Drawing.Drawing2D "% > <% @ Import Namespace =" System.Drawing.Imaging "% > < html > < head > < script language =" C # "runat =" server "> void Page_Load (remitente del objeto, EventArgs e) {Imagen de mapa de bits = nuevo mapa de bits (400, 400); Fuente axesFont = nueva fuente ("arial", 10); Pincel blackBrush = nuevo SolidBrush (Color. Rojo); Pluma redPen = nueva Pluma (Color. Rojo, 1); Pluma blackPen = nuevo lápiz (Color. Azul, 2); Gráficos g = Gráficos. FromImage (imagen); g. Claro (Color. Blanco); g. FillRectangle (new SolidBrush (Color. LightGreen), 0, 0, 400, 400); // 在 此 图片 对象 中 画出 图片, 可以 定义 文字 大小 、 位置 、 色彩 等 g. Formato de imagen . Jpeg); } < / script > < / head > < body > < / body > < / html >Formato de imagen . Jpeg); } < / script > < / head > < body > < / body > < / html >


        Imagen 04: Termine de dibujar líneas, escribir y colorear en la imagen.


Tres. Obtenga el código fuente completo y la interfaz de ejecución del gráfico de datos en ASP.NET:

  Después de dominar las operaciones básicas como generar imágenes, colorear imágenes, generar caracteres en imágenes y dibujar líneas, y hacer un uso completo de varias operaciones básicas, puede obtener un programa completo para realizar gráficos de datos en ASP.NET. La siguiente figura es la interfaz de ejecución:

Figura 05: Implementación de la interfaz de ejecución del gráfico de datos en ASP.NET

  El siguiente es el código completo (chart1.aspx) para implementar el gráfico de datos en ASP.NET, como sigue:

<% @ Import Namespace = "System"% > <% @ Import Namespace = "System.Drawing"% > <% @ Import Namespace = "System.Drawing.Drawing2D"% > <% @ Import Namespace = "System.Drawing. Imágenes "% > < 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; Altura = myHeight; ScaleX = myWidth; ScaleY = myHeight; b = nuevo mapa de bits (myWidth, myHeight); g = Graphics. FromImage (b); p = myPage;} public void AddValue (int x, int y) {datapoint myPoint; myPoint. x = x; myPunto. y = y; myPoint. válido = verdadero; 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) ; Fuente axesFont = new Font ("arial", 10); // 首先 要 创建 图片 的 大小 p. Respuesta . ContentType = "imagen / 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 (nuevo Pen (Color. Negro, 1), ChartInset, ChartInset, ChartWidth, ChartHeight); // 写出 图片 上面 的 图片 内容 文字 g. DrawString (Título, nueva fuente ("arial", 14), blackBrush, Ancho / 3, 10); // 沿 X 坐标 写入 X 标签 para (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 标签 para (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 (bolígrafo negro, x + 2, y, x - 2, y);} g. RotarTransformar (180); g. TranslateTransform (0, - Altura); g. TranslateTransform (- ChartInset, ChartInset); g. ScaleTransform (- 1, 1); // 画出 图表 中 的 数据 punto de datos prevPoint = nuevo punto de datos (); prevPoint. válido = falso; AddValue (0, 150); c. AddValue (50, 50); c. AddValue (100, 700); c. Agregar valor (200, 150); c. Agregar valor (300, 450); c. Agregar valor (400, 75); c. Agregar valor (450, 450); c. AddValue (500, 250); c. Dibujar ();} < / script >

 

  cuatro. para resumir:

  La realización de gráficos es siempre un punto difícil en la programación de Internet. Este artículo presenta cómo implementar gráficos de datos en páginas ASP.NET. Bajo la premisa de que no hay buenos componentes para usar, utilice las diversas operaciones proporcionadas en .Net FrameWork SDK GDI + Graphical Aunque este proceso es un poco complicado, es muy útil para realizar gráficos complejos. Espero que este artículo no solo pueda ayudar a los lectores a resolver el problema de los diagramas en Internet, sino también a comprender el GDI + del lector.

Supongo que te gusta

Origin blog.csdn.net/jinzhengquanqq/article/details/5878258
Recomendado
Clasificación