如何将代码中创建的图表添加到渲染的html页面？

Question

如何将代码中创建的图表添加到渲染的html页面？

我正在尝试在后面的代码中完全创建一个.net图表控件,并将该图表插入到网页上的特定位置.

这是我的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>

Run Code Online (Sandbox Code Playgroud)

这是后面的代码:

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;
    }
}

Run Code Online (Sandbox Code Playgroud)

我想在div中使用id ="chart"渲染图表控件

谢谢您的帮助!

Answer 1

Iai*_*way 5

假设您没有任何障碍地安装了图表框架: -

视图:-

<%@ 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>

Run Code Online (Sandbox Code Playgroud)

代码隐藏: -

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;
    }
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	15 年，11 月前
查看次数：	19141 次
最近记录：	11 年，4 月前