花了两天时间研究微软的mschart。下面是一段asp.net(VS2008)+sql2005用mschart画图的实例代码:
界面Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Admin_Chart_Chart" %>
<%@ Register Assembly="CustomeControls" Namespace="CustomeControls" TagPrefix="cc2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="PageSplit" Namespace="WebControls" TagPrefix="cc1" %>
<!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>
<link href="../../../CSS/Admin.css" type="text/css" rel="stylesheet" />
<link href="../../../CSS/AjaxCalendar.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table height="100" border="0" align="center" width="700">
<tr>
<th colspan="4">版块访问量统计</th>
</tr>
<tr>
<td style="width: 56px; height: 70px;">图形显示:</td>
<td colspan="3" style="height: 70px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownListShowChatStyle" runat="server" Width="187px" AutoPostBack="True" OnSelectedIndexChanged="DropDownListShowChatStyle_SelectedIndexChanged"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="4" style="height: 21px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Chart ID="chartShow" runat="server" Width="700px" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderlineWidth="2" BackColor="211, 223, 240" BorderlineColor="26, 59, 105" EnableViewState="True">
<Legends>
<asp:Legend Name="Legend1">
</asp:Legend>
</Legends>
<Series>
<asp:Series ChartType="Pie" Name="Series1" Legend="Legend1" ChartArea="ChartArea1">
<Points>
<asp:DataPoint YValues="0" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
后台Code(将datatable中的数据放入到数组上绑定):
public partial class Admin_Chart_Chart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//this.DropDownListShowChatStyle.Items.Add("请选择");
this.DropDownListShowChatStyle.Items.Add("柱状");
this.DropDownListShowChatStyle.Items.Add("饼图");
// this.chartShow.Visible = false;
//第一次加载的时候显示柱形
showChartDataSoure();
}
BLL.BBSBoardStatisticsClass bbs = new BBSBoardStatisticsClass();
DataTable dt = bbs.GetListFromBBSBoardAndBBSBoardstatics();
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}
/// <summary>
/// 给msChart绑定数据源并让它显示柱形
/// </summary>
private void showChartDataSoure()
{
BLL.BBSBoardStatisticsClass bBSBoardStatisticsObject = new BBSBoardStatisticsClass();
DataTable dataTable = bBSBoardStatisticsObject.GetListFromBBSBoardAndBBSBoardstatics();
//this.chartShow.DataSource = dataTable;
//chartShow.DataBind();
int[] ids = new int[dataTable.Rows.Count];
string[] names = new string[dataTable.Rows.Count];
for (int i = 0; i < dataTable.Rows.Count; i++)
{
ids[i] = int.Parse(dataTable.Rows[i][0].ToString());
names[i] = dataTable.Rows[i][1].ToString();
//Response.Write(ids[i] + " ");
//Response.Write(names[i]);
}
//给xy轴绑定数据
chartShow.Series["Series1"].Points.DataBindXY(names, ids);
//设置mschart显示类型:柱形
chartShow.Series["Series1"].ChartType = SeriesChartType.Bar;
chartShow.Series["Series1"]["PieLabelStyle"] = "Outside";
chartShow.Series["Series1"]["DoughnutRadius"] = "99";
//chartShow.Series["Series1"].Points[dataTable.Rows.Count - 1]["Exploded"] = "true";
chartShow.Series["Series1"].IsValueShownAsLabel = true;
chartShow.Series["Series1"]["BarLabelStyle"] = "Center";
chartShow.Series["Series1"]["PointWidth"] = "0.5";
//是否是3D显示
chartShow.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
//chartShow.Series["Series1"]["DrawingStyle"] = "Cylinder";
}
protected void DropDownListShowChatStyle_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.DropDownListShowChatStyle.SelectedItem.Text == "饼图")
{
this.maChartClounm();
}
else
{
showChartDataSoure();
}
}
/// <summary>
/// 改变machart的显示方式为饼图
/// </summary>
private void maChartClounm()
{
BLL.BBSBoardStatisticsClass bBSBoardStatisticsObject = new BBSBoardStatisticsClass();
DataTable dataTable = bBSBoardStatisticsObject.GetListFromBBSBoardAndBBSBoardstatics();
int[] ids = new int[dataTable.Rows.Count];
string[] names = new string[dataTable.Rows.Count];
for (int i = 0; i < dataTable.Rows.Count; i++)
{
ids[i] = int.Parse(dataTable.Rows[i][0].ToString());
names[i] = dataTable.Rows[i][1].ToString();
//Response.Write(ids[i] + " ");
//Response.Write(names[i]);
}
chartShow.Series["Series1"].Points.DataBindXY(names,ids);
//设置显示形式为饼图
chartShow.Series["Series1"].ChartType = SeriesChartType.Pie;
//参数是否在图类显示(Inside内,Outside 外)
chartShow.Series["Series1"]["PieLabelStyle"] = "Inside";
//chartShow.Series["Series1"]["DoughnutRadius"] = "90";
chartShow.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
}
}
或者
后台Code(给mschart直接绑定数据源):
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.UI.DataVisualization.Charting;
using BLL;
public partial class Admin_Chart_OtherChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BLL.BBSBoardStatisticsClass bBSBoardStatisticsObject = new BBSBoardStatisticsClass();
DataTable dataTable = bBSBoardStatisticsObject.GetListFromBBSBoardAndBBSBoardstatics();
//int[] ids = new int[dataTable.Rows.Count];
//string[] names = new string[dataTable.Rows.Count];
//for (int i = 0; i < dataTable.Rows.Count; i++)
//{
// ids[i] = int.Parse(dataTable.Rows[i][0].ToString());
// names[i] = dataTable.Rows[i][1].ToString();
//}
//ChartNewShow.Series[0].Points.DataBindXY(names, ids);
ChartNewShow.DataSource = dataTable;
ChartNewShow.Series[0].XValueMember = "版块名";
ChartNewShow.Series[0].YValueMembers = "点击率";
ChartNewShow.DataBind();
//设置显示形式线形
ChartNewShow.Series[0].ChartType = SeriesChartType.Spline;
ChartNewShow.Series[0]["ShowMarkerLines"] = "true";
//参数是否在图类显示(Inside内,Outside 外)
// chartShow.Series["Series1"]["PieLabelStyle"] = "Inside";
//chartShow.Series["Series1"]["DoughnutRadius"] = "90";
ChartNewShow.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
}
}
安装完mschart之后要对web.config进行配置
具体如下:
需要在"<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"/>
在"<httpHandlers>"中添加如下部分:
<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"/>
OK,这回该差不多了,应该可以运行出效果啦····需要显示多条曲线的时候只需要添加series并对它进行绑定就好了。
解决 ASP.NET Chart 控件出错 为 ChartImg.axd 执行子请求时出错。
http://hi.baidu.com/hlicon/blog/item/4c138ddcc258b13e5982dd3c.html
http://www.dotblogs.com.tw/chhuang/archive/2008/11/04/5869.aspx
供大家参考