Use of the mschart Chart Control

Source: Internet
Author: User

Recently, mschart has made several charts. In the example provided by Microsoft, the usage of this chart control has been described in detail. I will record some notes here.

1.ChartChart Elements

To use this chart, you must first understand the composition of the chart elements,

Charts mainly include:

Annotations (Graphic annotation set)
Chartareas (chart area set)
Legends (legend set)
A series chart sequence set is a set of chart data objects)
Title (Set of icons)

For more information, see the char features section in samples.

2.In ASP. NET MVCUse chartWidget

. You need to add the following in "<system. Web> <pages> <controls>:

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, 
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

2. In "

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, 
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

2.3. You can test the above Configuration:

2.3.1.view:

<asp:chart id="Chart1" runat="server" Height="296px" Width="412px" Palette="BrightPastel" imagetype="Png" BorderDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" 
BorderColor="26, 59, 105"><Titles><asp:Title Text="With datasource in code behind" /></Titles><legends><asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">
</asp:Legend></legends><borderskin skinstyle="Emboss"></borderskin><series><asp:Series Name="Column" BorderColor="180, 26, 59, 105"></asp:Series></series><chartareas><asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White"
BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom"><area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0"
IsClustered="False">
</area3dstyle><axisy linecolor="64, 64, 64, 64"><labelstyle font="Trebuchet MS, 8.25pt, style=Bold" /><majorgrid linecolor="64, 64, 64, 64" /></axisy><axisx linecolor="64, 64, 64, 64"><labelstyle font="Trebuchet MS, 8.25pt, style=Bold" /><majorgrid linecolor="64, 64, 64, 64" /></axisx></asp:ChartArea></chartareas></asp:chart>

2.3.2.index.aspx.cs

protected void Page_Load(object sender, System.EventArgs e){    foreach (int value in (List<int>)this.ViewData["Chart"])    {    this.Chart1.Series["Column"].Points.Add(value);    }}

2.3.3.controller:

public ActionResult Index(){    ViewData["Title"] = "Home Page";    ViewData["Message"] = "Welcome to ASP.NET MVC!";    List<int> chartList = new List<int>();    chartList.Add(1);    chartList.Add(2);    chartList.Add(6);    chartList.Add(5);    chartList.Add(4);    ViewData["Chart"] = chartList;    return View();}

2.3.4. Add system. Web. UI. datavisualization reference

3.TooltipUse

Tooltip is used in key points, such as labels, graphic key points, titles, etc. When you move the mouse up, you are prompted for relevant details or instructions. We can set it using the following code:

Chart1.series ["Series1"]. tooltip = "# Valy ";
The main purpose here is to say that the system has provided a lot of keyword for us to use, such:

4. "error executing child request for chartimg. axd"Processing

<Add name = "chartimagehandler" precondition = "integratedmode" verb = "post, get, head" Path = "chartimg. axd "and <add Path =" chartimg. axd "verb =" post, get, head "type =" system. web. UI. datavisualization. charting. charthttphandler,

Add post in both of the two places.

5.Chart presentation

The imagestoragemode attribute of the chartk control determines the storage mode of slice.

5. 1. When chart. imagestoragemode = usehttphandler

The configuration in Web. config is used. That is, the HTTP processing program is used to store graphical files. The configuration of Web. config is as follows:

<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;deleteAfterServicing=false; 
webDevServerUseConfigSettings=false" />

5.1.1. Where c: \ tempimagefiles \ is the directory where the HTTP handler stores graphical files.

5.1.2.deleteafterservicing: After the image is successfully downloaded by the browser, check whether the server slice is deleted. The default value is false. If deleteafterservicing is not specified, the image is not
It is stored as a file and should only be saved in the memory.

5.1.3.webdevserveruseconfigsettings: When the vs development server runs in the full trust level environment, it determines whether the generated image is saved in the memory.

5.1.4storage: storage = file, storage = session, storage = memory.

5.2. When chart. imagestoragemode = useimagelocation

Charts are stored in the specified folder. You can also specify the naming rules for Image Generation.

5.2.1. The chart. imagetype indicates the format of the generated image file, which can be BMG, JPEG, PNG, and EMF.

5.2.2. Chart. rendertype

This attribute determines how the image generated by mschart is sent to the client. There are three options:

  • Imagetag: The image is saved as a temporary file on the server, and the URL of the temporary file is used as the src attribute value of the label in HTML. The URL rules of the temporary file and the generation of the temporary file can be determined by the imagelocation attribute.
  • Binarystreaming, which does not generate a graphical file on the server. The src attribute value of the label points to another. ASPX page for generating the image.
  • Imagemap, which does not display the actual image. Only the image hotspot is created ).

The default value is imagetag, which is to generate a temporary file on the server.

5.2.3. As long as a graphical file is generated on the server, the ASP. Net account must have the write permission for this Directory No matter which directory the file is stored in.

Below is a chart of mine:

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.