asp.net微软图表控件使用示例代码分享
<configuration>
<system.webserver>
<handlers>
<remove name="chartimagehandler" />
<add name="chartimagehandler" precondition="integratedmode" verb="get,head,post"
path="chartimg.axd" type="system.web.ui.datavisualization.charting.charthttphandler, system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" />
</handlers>
</system.webserver>
<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>
</system.web>
</configuration>
<%@ page language="c#" autoeventwireup="true" codefile="chart.aspx.cs" inherits="chart" %>
<%@ 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>mschart图表控件</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:chart id="chart1" runat="server" width="500px" borderdashstyle="solid" palette="brightpastel" imagetype="png" backsecondarycolor="white" backgradientstyle="topbottom" borderwidth="2" backcolor="#d3dff0" bordercolor="26, 59, 105">
<titles>
<asp:title font="微软雅黑, 16pt" name="title1" text="统计表">
</asp:title>
</titles>
<borderskin skinstyle="emboss"></borderskin>
<series>
<asp:series name="series1" charttype="bubble" markersize="8" markerstyle="circle">
</asp:series>
</series>
<chartareas>
<asp:chartarea name="chartarea1" bordercolor="64, 64, 64, 64" backsecondarycolor="transparent" backcolor="64, 165, 191, 228" shadowcolor="transparent" backgradientstyle="topbottom">
</asp:chartarea>
</chartareas>
</asp:chart>
<asp:chart id="chart2" runat="server">
<series>
<asp:series name="series1">
</asp:series>
</series>
<chartareas>
<asp:chartarea name="chartarea1">
</asp:chartarea>
</chartareas>
</asp:chart>
<br/>
<asp:chart id="chart3" runat="server">
<series>
<asp:series name="series1">
</asp:series>
</series>
<chartareas>
<asp:chartarea name="chartarea1">
</asp:chartarea>
</chartareas>
</asp:chart>
<asp:chart id="chart4" runat="server">
<legends>
<asp:legend title="金牌榜"></asp:legend>
</legends>
<series>
<asp:series name="series1">
</asp:series>
</series>
<chartareas>
<asp:chartarea name="chartarea1">
</asp:chartarea>
</chartareas>
</asp:chart>
</div>
</form>
</body>
</html>
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.data;
using system.web.ui;
using system.web.ui.webcontrols;
//add
using system.drawing;
public partial class chart : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
datatable dt = creatdata();
getstyle1(dt);
getstyle2(dt);
getstyle3(dt);
getstyle4(dt);
}
protected void getstyle1(datatable dt)
{
#region 折线图
chart1.datasource = dt;//绑定数据
chart1.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.line;//设置图表类型
chart1.series[0].xvaluemember = "country";//x轴数据成员列
chart1.series[0].yvaluemembers = "score";//y轴数据成员列
chart1.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
chart1.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart1.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
chart1.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart1.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
chart1.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
chart1.series[0].isvalueshownaslabel = true;//显示坐标值
#endregion
}
protected void getstyle2(datatable dt)
{
#region 样条图（平滑曲线）
chart2.datasource = dt;//绑定数据
chart2.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.spline;//设置图表类型
chart2.series["series1"].markerstyle = system.web.ui.datavisualization.charting.markerstyle.cross;//设置点的样式，十字形
chart2.series[0].xvaluemember = "country";//x轴数据成员列
chart2.series[0].yvaluemembers = "score";//y轴数据成员列
chart2.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
chart2.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart2.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
chart2.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart2.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
chart2.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
chart2.series[0].isvalueshownaslabel = true;//显示坐标值
#endregion
}
protected void getstyle3(datatable dt)
{
#region 条形图
chart3.datasource = dt;//绑定数据
chart3.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.bar;//设置图表类型
chart3.series[0].xvaluemember = "country";//x轴数据成员列
chart3.series[0].yvaluemembers = "score";//y轴数据成员列
chart3.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
chart3.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart3.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
chart3.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
chart3.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
chart3.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
chart3.series[0].isvalueshownaslabel = true;//显示坐标值
#endregion
}
protected void getstyle4(datatable dt)
{
#region 饼形图
chart4.datasource = dt;//绑定数据
chart4.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.pie;//设置图表类型
chart4.series[0].xvaluemember = "country";//x轴数据成员列
chart4.series[0].yvaluemembers = "score";//y轴数据成员列
chart4.series[0].legendmapareaattributes = "country"; //显示国家
chart4.series[0].isvalueshownaslabel = true;//显示坐标值
#endregion
}
/// <summary>
/// 创建一张二维数据表
/// </summary>
/// <returns>datatable类型的数据表</returns>
protected datatable creatdata()
{
datatable dt = new datatable();
dt.columns.add("country", system.type.gettype("system.string"));
dt.columns.add("score", system.type.gettype("system.string"));
string[] n = new string[] { "中国","美国", "俄罗斯", "英国" };
string[] c = new string[] { "85","80", "50", "35" };
for (int i = 0; i < 4; i++)
{
datarow dr = dt.newrow();
dr["country"] = n[i];
dr["score"] = c[i];
dt.rows.add(dr);
}
return dt;
}
}