How to create various 3D charts in ASP

Source: Internet
Author: User

As we all know, charts are a particularly popular and important tool in asp. A chart is a graphic representing data that typically contains X and y two Axes. We can use polyline, columnar, block to represent the Data. With the chart control, we can represent the data and compare the data of various charts, such as comparing last Year's and this year's Revenue. There are also many types of charts, such as histograms, line charts, bar charts, combo charts, and so On.

This article will explain how to make 3D charts in asp. first, i'll Show you how to draw a simple chart.

Steps for a simple chart

Step 1

Create a new asp. net Empty Web Site.

Step 2

Add a new project to the Solution Explorer and add the Form.

Step 3

Toolbars-standard-project. We will see two chart options in The. NET Framework Component. NET Framework 4.0 and later, the chart control is integrated into Toolbox toolboxes, and this step is required in 3.5 and earlier Versions.

Step 4

Go to the Toolbar-data-chart and drag it from the toolbar to the Page.

Step 5

When you drag the chart control to the page, the IDE automatically adds the following 4 tags to the Web. config file, and you can see a normal chart on the Default.aspx designer Page.

<appSettings>          <add key= "chartimagehandler" value= "storage=file;timeout=20;dir=c:\tempimagefiles\;"/ >        </appSettings>  

<controls>            <add tagprefix= "asp" namespace= "System.Web.UI.DataVisualization.Charting"              assembly= " System.Web.DataVisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35 "/>          </ Controls>  

<assemblies>            <add assembly= "System.Web.DataVisualization, version=4.0.0.0, culture=neutral, Publickeytoken=31bf3856ad364e35 "/>          </assemblies>   

Step 6

Right-click the chart and enter Properties. The Properties window selects and adds a data source. Of course, We can also use code to bind data to the chart, the following 3D chart code I used the binding method.

Step 7

After successfully adding the data source, return to the Properties window and click on the series and we will see a window like This.

Step 8

Set the x-axis and Y equivalents in the data source for the series, where I set the value of the corresponding item of the x-axis to the name, and the value of the corresponding item in the y-axis is set to Age. If you want to name the x and y axes separately in the chart, then return to the Properties window and click on the chart area and you will see a axes Property.

Step 9

Run the program, output the results such AS.

Type of chart

If you want all types of charts, this is simple, right-click on the Chart-show smart tags, You can select a variety of chart Types.

3D Chart

Compared to other charts, the advantage of a 3D chart is that it looks clearer and more Intuitive. Now let's talk about how to make 3D charts.

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 to right-click on the Chart-properties-chart area properties and then change 3D to True in the 3D chart settings, which is 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 the data source, bind the data source to the chart, and 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) {i F (!        Page.ispostback) {binddata (); }} private void Binddata () {var runs = new list<run> () {new run () {Nam E = "wangli", point = $, new run () {name = "zhang ming", point = +}, new run () {name = "sun chao", Po                 int = +, new run () {name = "li fei", point = a, new run () {name = "zhao yue", point = 32},         New run () {name = ' Wang Hong ', point = 155}, 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:

We know that after the effective 3D we can create a 3D chart, which is a Boolean type that may be true or false, which is usually false by Default. In addition, in asp. 3D, the angle of the chart can be adjusted from 90 degrees to 90 degrees. -90 degrees will make the chart completely at the bottom and 90 degrees will be fully pinned. One property known as the is clustered property is a Boolean value that can show good view effects even when using multiple charts of the same type and nature. Temporarily share here, Thank you for browsing, I hope you have some reference!

How to create various 3D charts in ASP

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.