2010-03-16 39 views
6

Estoy intentando crear un control de gráficos .net por completo en el código subyacente e insertar ese gráfico en una ubicación específica en la página web.¿Cómo agregar un gráfico creado en el código detrás de la página html representada?

Aquí está mi página HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!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"> 
    <div id="chart"></div> 
    </form> 
</body> 
</html> 

Aquí está el código subyacente:

using System; 
using System.Drawing; 
using System.Web.UI.DataVisualization.Charting; 

public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     //SET UP THE DATA TO PLOT 
     double[] yVal = { 80, 20 }; 
     string[] xName = { "Pass", "Fail" }; 

     //CREATE THE CHART 
     Chart Chart1 = new Chart(); 

     //BIND THE DATA TO THE CHART 
     Chart1.Series.Add(new Series()); 
     Chart1.Series[0].Points.DataBindXY(xName, yVal); 

     //SET THE CHART TYPE TO BE PIE 
     Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie; 
     Chart1.Series[0]["PieLabelStyle"] = "Outside"; 
     Chart1.Series[0]["PieStartAngle"] = "-90"; 

     //SET THE COLOR PALETTE FOR THE CHART TO BE A PRESET OF NONE 
     //DEFINE OUR OWN COLOR PALETTE FOR THE CHART 
     Chart1.Palette = System.Web.UI.DataVisualization.Charting.ChartColorPalette.None; 
     Chart1.PaletteCustomColors = new Color[] { Color.Blue, Color.Red }; 

     //SET THE IMAGE OUTPUT TYPE TO BE JPEG 
     Chart1.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Jpeg; 

     //ADD A PLACE HOLDER CHART AREA TO THE CHART 
     //SET THE CHART AREA TO BE 3D 
     Chart1.ChartAreas.Add(new ChartArea()); 
     Chart1.ChartAreas[0].Area3DStyle.Enable3D = true; 

     //ADD A PLACE HOLDER LEGEND TO THE CHART 
     //DISABLE THE LEGEND 
     Chart1.Legends.Add(new Legend()); 
     Chart1.Legends[0].Enabled = false; 
    } 
} 

Quiero representar el control de gráficos dentro del div con id = "Tabla"

¡Gracias por la ayuda!

Respuesta

5

Suponiendo que ha instalado el marco de gráficos de manera impecable: -

Vista: -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!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"> 
    <div id="chart"></div> 
     <asp:Chart id="Chart1" runat="server"/> 
    </form> 
</body> 
</html> 

Codebehind: -

using System; 
using System.Drawing; 
using System.Web.UI.DataVisualization.Charting; 

public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     //SET UP THE DATA TO PLOT 
     double[] yVal = { 80, 20 }; 
     string[] xName = { "Pass", "Fail" }; 

     //CREATE THE CHART 
     // Don't need to create the chart because it's a control! 

     //BIND THE DATA TO THE CHART 
     Chart1.Series.Add(new Series()); 
     Chart1.Series[0].Points.DataBindXY(xName, yVal); 

     //SET THE CHART TYPE TO BE PIE 
     Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie; 
     Chart1.Series[0]["PieLabelStyle"] = "Outside"; 
     Chart1.Series[0]["PieStartAngle"] = "-90"; 

     //SET THE COLOR PALETTE FOR THE CHART TO BE A PRESET OF NONE 
     //DEFINE OUR OWN COLOR PALETTE FOR THE CHART 
     Chart1.Palette = System.Web.UI.DataVisualization.Charting.ChartColorPalette.None; 
     Chart1.PaletteCustomColors = new Color[] { Color.Blue, Color.Red }; 

     //SET THE IMAGE OUTPUT TYPE TO BE JPEG 
     Chart1.ImageType = System.Web.UI.DataVisualization.Charting.ChartImageType.Jpeg; 

     //ADD A PLACE HOLDER CHART AREA TO THE CHART 
     //SET THE CHART AREA TO BE 3D 
     Chart1.ChartAreas.Add(new ChartArea()); 
     Chart1.ChartAreas[0].Area3DStyle.Enable3D = true; 

     //ADD A PLACE HOLDER LEGEND TO THE CHART 
     //DISABLE THE LEGEND 
     Chart1.Legends.Add(new Legend()); 
     Chart1.Legends[0].Enabled = false; 
    } 
} 

Salida http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

+0

@Iain: gracias por la respuesta. Intento hacerlo sin tener la etiqueta asp: chart en la página aspx. – Ryan

+0

@Ryan: si es realmente necesario, puedes usar un Literal en la página aspx y usar Chart.RenderControl para establecer su propiedad de texto, pero realmente no veo el punto. ¿Alguna razón particular por la que necesitas hacerlo todo en el código subyacente? –

+0

Eso es lo que terminé haciendo. – Ryan

2

¿Por qué el enfoque de representación dinámica? ¿Por qué no acaba de definir la etiqueta como:

y establecer los atributos del mando? Alternativamente, podría tratar de poner un y establecer el texto como la respuesta representada, que lo envolverá con un lapso. Puede probar otros controles para hacer esto si obtiene un error con eso, como LiteralControl.

+0

@Brian: ¿Cómo aplicaría la respuesta que especificó al código que tengo arriba? Soy bastante nuevo en el uso de .NET ... Intento entrenarme lentamente para usar .NET en lugar de ASP clásico. Es muy importante que pueda representar el gráfico en la ubicación específica de la página web. ¡Gracias! – Ryan

+0

Lo siento, estaba pensando que estabas hablando de MVC ... Me disculpo. Corregí mi respuesta. –

1

tratar puesto en aspx:

div id="chart" runat="server" 

en el código:

this.chart.Controls.Add(Chart1); 

mi caso que necesito crear más de una tabla de datos con datos de.

Cuestiones relacionadas