天天看點

c# web pie chart(包含美觀的樣式)

1)前台代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebChartDemo.Default" %>


<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="Chart1" runat="server" Palette="BrightPastel" BackColor="#D3DFF0"
            Height="296px" Width="412px" BorderlineDashStyle="Solid" BackGradientStyle="TopBottom"
            BorderWidth="2" BorderColor="26, 59, 105" IsSoftShadows="False" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)">
            <Titles>
                <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3"
                    Text="Money of student" Name="Title1" ForeColor="26, 59, 105">
                </asp:Title>
            </Titles>
            <Legends>
                <asp:Legend TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent"
                    IsEquallySpacedItems="True" Font="Trebuchet MS, 8pt, style=Bold" IsTextAutoFit="False"
                    Name="Default">
                </asp:Legend>
            </Legends>
            <BorderSkin SkinStyle="Emboss"></BorderSkin>
            <Series>
                <asp:Series ChartArea="Area1" XValueType="Double" Name="Series1" ChartType="pie"
                    Font="Trebuchet MS, 8.25pt, style=Bold" CustomProperties="DoughnutRadius=25, PieDrawingStyle=Concave, CollectedLabel=Other, MinimumRelativePieSize=20"
                    MarkerStyle="Circle" BorderColor="64, 64, 64, 64" Color="180, 65, 140, 240" YValueType="Double"
                    Label="#PERCENT{P1}">
                    <%--前台綁定資料--%>
                    <%--<Points>
                        <asp:DataPoint LegendText="RUS" YValues="1" />
                        <asp:DataPoint LegendText="CAN" YValues="2" />
                        <asp:DataPoint LegendText="USA" YValues="3" />
                        <asp:DataPoint LegendText="PRC" YValues="4" />
                    </Points>--%>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="Area1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent"
                    BackColor="Transparent" ShadowColor="Transparent" BackGradientStyle="TopBottom">
                    <AxisY2>
                        <MajorGrid Enabled="False" />
                        <MajorTickMark Enabled="False" />
                    </AxisY2>
                    <AxisX2>
                        <MajorGrid Enabled="False" />
                        <MajorTickMark Enabled="False" />
                    </AxisX2>
                    <Area3DStyle PointGapDepth="900" Rotation="162" IsRightAngleAxes="False" WallWidth="25"
                        IsClustered="False" />
                    <AxisY LineColor="64, 64, 64, 64">
                        <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                        <MajorGrid LineColor="64, 64, 64, 64" Enabled="False" />
                        <MajorTickMark Enabled="False" />
                    </AxisY>
                    <AxisX LineColor="64, 64, 64, 64">
                        <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                        <MajorGrid LineColor="64, 64, 64, 64" Enabled="False" />
                        <MajorTickMark Enabled="False" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>
    </form>
</body>
</html>
           

2)背景代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;


namespace WebChartDemo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindStudent();
            }
        }
        /// <summary>
        /// 背景綁定
        /// </summary>
        private void BindStudent()
        {
            List<Student> items = GetStudents();
            Series series = Chart1.Series[0];
            foreach (Student item in items)
            {
                DataPoint dataPoint = new DataPoint();
                dataPoint.LegendText = item.Name;
                dataPoint.SetValueY(item.Money);
                series.Points.Add(dataPoint);
            }
        }
        private List<Student> GetStudents()
        {
            List<Student> items = new List<Student>();
            items.Add(new Student("Chad", 1));
            items.Add(new Student("Catherine", 2));
            items.Add(new Student("Amamda", 3));
            items.Add(new Student("Emily", 4));
            return items;
        }
    }
    public class Student
    {
        public Student() { }
        public Student(string _name, decimal _money)
        {
            this.Name = _name;
            this.Money = _money;
        }
        public string Name { set; get; }
        public decimal Money { set; get; }
    }
}
           

3)錯誤解決方法

錯誤:Error executing child request for ChartImg.axd.

解決方法:在web.config 的<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>