Asp. NET in the production of various 3D charts method _ Practical Skills

Source: Internet
Author: User

Objective

As we all know, through the chart controls, we can represent the data and compare the data to the various graphs, such as comparing revenue from last year and this year. There are also many types of charts, such as histogram, line, bar, combo, and so on.

First, I'll show you how to draw a simple diagram.

Steps for simple charts

Step 1

Create a new "asp.net Empty Web Site."

Step 2

Add a new item to the solution Explorer and add the form.

Step 3

Toolbars-standard-items. We will see that there are two chart options in the. NET Framework Component. The. NET Framework 4.0 and above integrates the chart control into the Toolbox toolbox, and this step is required in 3.5 and earlier versions.

Step 4

Go to the toolbar-data-chart, drag from the toolbar to the page.

Step 5

After you drag the chart control onto the page, the IDE automatically adds the following 4 tags to the web.config file, and a normal chart is visible on the designer page of Default.aspx.

<appSettings> 
    <add key= "Chartimagehandler" value= "storage=file;timeout=20;dir=c:\tempimagefiles\;" > 
   
  
 
 <controls>  
    <add tagprefix= "asp" namespace= "System.Web.UI.DataVisualization.Charting"  
     assembly= " System.Web.DataVisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35 "/>  
   
 <assemblies>  
    <add assembly= "System.Web.DataVisualization, version=4.0.0.0, Culture=neutral, Publickeytoken=31bf3856ad364e35 "/>  
   

Step 6

Right-click the chart and enter the property. Property window to select and add a data source. Of course, we can also use code to bind the data to the diagram, the following 3D chart code I have adopted the binding method.

Step 7

After the data source is successfully added, return to the Properties window, click the series, we will see such a window.

Step 8

Set the x-axis and Y-entries in the series's data source, where I set the value of the corresponding item on the x-axis to the name, and the value of the corresponding item on the y-axis to age. If you want to name the x and y axes in the chart, then return to the Properties window and click the chart area and you'll see a axes attribute.

Step 9

Run the program, the output of the results shown below.

Type of chart

If you want various types of charts, it's easy, right-click the chart-show Smart tags, and you can choose from a variety of chart types.

3D Chart

The advantage of a 3D chart is that it looks clearer and more intuitive than other charts. Now let's talk about how to make a 3D chart.

First create a new Web site and drag the chart to the ASPX page. As I said above, the code is automatically added to the Web.config file. Then there is only one chart area label in the ASPX page. Let's change the 3D to true. We can also use the wizard, right-click the chart-Properties-chart Area property, and then change 3D to True in the 3D chart settings and false by default.

Code:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "ExamChart.aspx.cs" inherits= "Examchart"%> <%@ 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 ">  

Then create a new class:

public class run
{public
  string Name {get; set;}
  public int point {get; set;}
}

To create a data source and bind the data source to a diagram, the code for the binding method is as follows:

Using System;
Using System.Collections.Generic;
Using System.Web.UI;

Using System.Web.UI.DataVisualization.Charting; Public partial class ExamChart:System.Web.UI.Page {protected void Page_Load (object sender, EventArgs e) {if (!)

    Page.IsPostBack) {binddata ();  } private void Binddata () {var runs = new list<run> () {new run () {Name = "Wang Li", point = =, new run () {name = "Zhang Ming", point = n}, new run () {name = "Sun Chao", point = +}, new Run ( {name = "Plum", point = +}, new Run () {name = "Zhao Yue", point = x}, new Run () {name = "Wang", point = 1

    New Run () {Name = "Song Wei", point = 22}};

    var series = scorechart.series["Runseries"];
      foreach (var exam in runs) {var point = new DataPoint (); Point. Setvaluexy (Exam. Name, exam.

      Point); Point. Label = Exam.
      Point.tostring (); Series.
    Points.Add (point); } Scorechart.datasource = RunS
  Scorechart.databind (); } protected void Scorechart_load (object sender, EventArgs e) {}}

Run the program, Effect diagram:

We know that after 3D we can create a 3D chart that is a Boolean type that can be true or false, and is usually false by default. In addition, in asp.net, the angle of the 3D chart can be adjusted, between 90 degrees to 90 degrees. -90 degrees will make the chart completely in the bottom, 90 degrees will be completely top. A property called the "is clustered" property is a Boolean value that can show good view effects even with multiple graphs of the same type and nature.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, if there is doubt you can message exchange, thank you for the cloud Habitat Community support.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.