Copy codeThe Code is as follows:
<Configuration>
<System. webServer>
<Handlers>
<Remove name = "ChartImageHandler"/>
<Add name = "ChartImageHandler" preCondition = "integratedMode" verb = "GET, HEAD, POST"
Path = "ChartImg. axd "type =" System. web. UI. dataVisualization. charting. chartHttpHandler, System. web. dataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "/>
</Handlers>
</System. webServer>
<System. web>
<HttpHandlers>
<Add path = "ChartImg. axd "verb =" GET, HEAD, POST "type =" System. web. UI. dataVisualization. charting. chartHttpHandler, System. web. dataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35"
Validate = "false"/>
</HttpHandlers>
</System. web>
</Configuration>
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "chart. aspx. cs" Inherits = "chart" %>
<% @ Register Assembly = "System. Web. DataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35"
Namespace = "System. Web. UI. DataVisualization. Charting" TagPrefix = "asp" %>
<! 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> MsChart Chart Control </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: chart ID = "Chart1" runat = "server" Width = "500px" BorderDashStyle = "Solid" Palette = "BrightPastel" imagetype = "Png" BackSecondaryColor = "White" BackGradientStyle = "TopBottom "BorderWidth =" 2 "backcolor =" # D3DFF0 "BorderColor =" 26, 59,105 ">
<Titles>
<Asp: Title Font = ", 16pt" Name = "Title1" Text = "">
</Asp: Title>
</Titles>
<Borderskin skinstyle = "Emboss"> </borderskin>
<Series>
<Asp: Series Name = "Series1" ChartType = "Bubble" MarkerSize = "8" MarkerStyle = "Circle">
</Asp: Series>
</Series>
<ChartAreas>
<Asp: ChartArea Name = "ChartArea1" BorderColor = "64, 64, 64, 64 "BackSecondaryColor =" Transparent "BackColor =" 64,165,191,228 "ShadowColor =" Transparent "BackGradientStyle =" TopBottom ">
</Asp: ChartArea>
</ChartAreas>
</Asp: Chart>
<Asp: Chart ID = "Chart2" runat = "server">
<Series>
<Asp: Series Name = "Series1">
</Asp: Series>
</Series>
<ChartAreas>
<Asp: ChartArea Name = "ChartArea1">
</Asp: ChartArea>
</ChartAreas>
</Asp: Chart>
<Br/>
<Asp: Chart ID = "Chart3" runat = "server">
<Series>
<Asp: Series Name = "Series1">
</Asp: Series>
</Series>
<ChartAreas>
<Asp: ChartArea Name = "ChartArea1">
</Asp: ChartArea>
</ChartAreas>
</Asp: Chart>
<Asp: Chart ID = "Chart4" runat = "server">
<Legends>
<Asp: Legend Title = "Gold Medal List"> </asp: Legend>
</Legends>
<Series>
<Asp: Series Name = "Series1">
</Asp: Series>
</Series>
<ChartAreas>
<Asp: ChartArea Name = "ChartArea1">
</Asp: ChartArea>
</ChartAreas>
</Asp: Chart>
</Div>
</Form>
</Body>
</Html>
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Data;
Using System. Web. UI;
Using System. Web. UI. WebControls;
// Add
Using System. Drawing;
Public partial class chart: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
DataTable dt = CreatData ();
GetStyle1 (dt );
GetStyle2 (dt );
GetStyle3 (dt );
GetStyle4 (dt );
}
Protected void GetStyle1 (DataTable dt)
{
# Region line chart
Chart1.DataSource = dt; // bind data
Chart1.Series ["Series1"]. ChartType = System. Web. UI. DataVisualization. Charting. SeriesChartType. Line; // you can specify the chart type.
Chart1.Series [0]. XValueMember = "Country"; // X-axis data member Column
Chart1.Series [0]. YValueMembers = "Score"; // y-axis data member Column
Chart1.ChartAreas ["ChartArea1"]. AxisX. Title = "country"; // X axis Title
Chart1.ChartAreas ["ChartArea1"]. AxisX. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart1.ChartAreas ["ChartArea1"]. AxisY. Title = "Gold Medal"; // X axis Title
Chart1.ChartAreas ["ChartArea1"]. AxisY. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart1.ChartAreas ["ChartArea1"]. AxisX. Interval = 1; // spacing of X axis data
Chart1.ChartAreas ["ChartArea1"]. AxisX. MajorGrid. Enabled = false; // The vertical split line is not displayed.
Chart1.Series [0]. IsValueShownAsLabel = true; // display coordinate values
# Endregion
}
Protected void GetStyle2 (DataTable dt)
{
# Region spline (smoothing curve)
Chart2.DataSource = dt; // bind data
Chart2.Series ["Series1"]. ChartType = System. Web. UI. DataVisualization. Charting. SeriesChartType. Spline; // you can specify the chart type.
Chart2.Series ["Series1"]. MarkerStyle = System. Web. UI. DataVisualization. Charting. MarkerStyle. Cross; // set the dot style and Cross
Chart2.Series [0]. XValueMember = "Country"; // X-axis data member Column
Chart2.Series [0]. YValueMembers = "Score"; // y-axis data member Column
Chart2.ChartAreas ["ChartArea1"]. AxisX. Title = "country"; // X axis Title
Chart2.ChartAreas ["ChartArea1"]. AxisX. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart2.ChartAreas ["ChartArea1"]. AxisY. Title = "Gold Medal"; // X axis Title
Chart2.ChartAreas ["ChartArea1"]. AxisY. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart2.ChartAreas ["ChartArea1"]. AxisX. Interval = 1; // spacing of X axis data
Chart2.ChartAreas ["ChartArea1"]. AxisX. MajorGrid. Enabled = false; // The vertical split line is not displayed.
Chart2.Series [0]. IsValueShownAsLabel = true; // display coordinate values
# Endregion
}
Protected void GetStyle3 (DataTable dt)
{
# Region Bar Chart
Chart3.DataSource = dt; // bind data
Chart3.Series ["Series1"]. ChartType = System. Web. UI. DataVisualization. Charting. SeriesChartType. Bar; // set the chart type
Chart3.Series [0]. XValueMember = "Country"; // X-axis data member Column
Chart3.Series [0]. YValueMembers = "Score"; // y-axis data member Column
Chart3.ChartAreas ["ChartArea1"]. AxisX. Title = "country"; // X axis Title
Chart3.ChartAreas ["ChartArea1"]. AxisX. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart3.ChartAreas ["ChartArea1"]. AxisY. Title = "Gold Medal"; // X axis Title
Chart3.ChartAreas ["ChartArea1"]. AxisY. TitleAlignment = StringAlignment. Far; // you can specify the location of the title of the Y axis.
Chart3.ChartAreas ["ChartArea1"]. AxisX. Interval = 1; // spacing of X axis data
Chart3.ChartAreas ["ChartArea1"]. AxisX. MajorGrid. Enabled = false; // The vertical split line is not displayed.
Chart3.Series [0]. IsValueShownAsLabel = true; // display coordinate values
# Endregion
}
Protected void GetStyle4 (DataTable dt)
{
# Region pie chart
Chart4.DataSource = dt; // bind data
Chart4.Series ["Series1"]. ChartType = System. Web. UI. DataVisualization. Charting. SeriesChartType. Pie; // you can specify the chart type.
Chart4.Series [0]. XValueMember = "Country"; // X axis data member Column
Chart4.Series [0]. YValueMembers = "Score"; // y-axis data member Column
Chart4.Series [0]. LegendMapAreaAttributes = "Country"; // display Country
Chart4.Series [0]. IsValueShownAsLabel = true; // display coordinate values
# Endregion
}
/// <Summary>
/// Create a two-dimensional data table
/// </Summary>
/// <Returns> data table of the able type </returns>
Protected DataTable CreatData ()
{
DataTable dt = new DataTable ();
Dt. Columns. Add ("Country", System. Type. GetType ("System. String "));
Dt. Columns. Add ("Score", System. Type. GetType ("System. String "));
String [] n = new string [] {"China", "USA", "Russia", "UK "};
String [] c = new string [] {"85", "80", "50", "35 "};
For (int I = 0; I <4; I ++)
{
DataRow dr = dt. NewRow ();
Dr ["Country"] = n [I];
Dr ["Score"] = c [I];
Dt. Rows. Add (dr );
}
Return dt;
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
