近來客戶需要將前段時間開發的統計信息用圖表展示出來，還要多個圖表類型，例如：柱狀圖、餅圖、曲線圖、三維圖等等。在網上google了一下，發現了三個（也許更多）可以使用的控件。下面我們一起看看這三個控件。
1、OWC11
這個控件全稱是：Office Web Component 11，是office2003中的一個組件，可惜的是office2007中沒有了它的身影。不過安裝office2003之后可以引用，然后使用。使用過的人都知道，就是它的效果要差一點。
2、dotnetCharting
http://www.dotnetcharting.com/
dotnetcharting是國外的一個產品，是要收費的。具體還沒有使用，后面在我嘗試之后，我會添加一些使用范例。大家也可以上網搜索一下，很多的列子。
3、MSChart
微軟發布了.NET 3.5框架下的圖表控件，發覺功能很強勁，基本上能想到的圖表都可以使用它繪制出來，給圖形統計和報表圖形顯示提供了很好的解決辦法，同時支持Web和WinForm兩種方式，不過缺點也比較明顯，只能在最新的開發環境中使用，需要.Net 3.5 Sp1以及VS 2008的開發環境。
MSChart在ASP.NET中的使用，需要設置web.config文件，可以參看下面的鏈接：
http://www.cnblogs.com/carysun/archive/2009/03/15/MSChart.html
http://www.cnblogs.com/bluetiger/archive/2009/03/02/1401457.html
MSChart在SharePoint2007中的使用，同樣也需要設置web.config文件，可以參看下面的鏈接：
http://social.msdn.microsoft.com/Forums/en/MSWinWebChart/thread/6eed0b12-9334-4ef5-9d1e-6da1c43d791a
下面是下載地址：
控件：Microsoft .NET Framework 3.5 的 Microsoft 圖表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5)–
包含英文版，中文版。上面提供的鏈接是中文版的，可以更改為英文版。
語言包：Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack
Microsoft .NET Framework 3.5 的Microsoft 圖表控件 的語言包，包含23中語言。
Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
這個只有英文的，沒找到中文的。
文檔 （Microsoft Chart Controls for .NET Framework Documentation）
這個只有英文的，沒找到中文的。
WinForm 和 Asp.net的例子（Samples Environment for Microsoft Chart Controls） –
這個只有英文的，沒找到中文的。
Demo 下載：http://code.msdn.microsoft.com/mschart
頁面代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="BeautyCode.SharePoint.MVPDemo.Pages.Chart" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.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>
<fieldset>
<legend>ddd</legend>
<asp:Chart ID="Chart1" runat="server">
<Titles>
<asp:Title Name="Title" Text="Title1">
</asp:Title>
</Titles>
<Annotations >
<asp:TextAnnotation Text=""></asp:TextAnnotation>
</Annotations>
<Legends>
<asp:Legend Title =""></asp:Legend>
</Legends>
<MapAreas>
</MapAreas>
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartAreas1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</fieldset>
</div>
<div>
<asp:Chart ID="Chart2" runat="server">
<Series>
</Series>
<Legends>
<asp:Legend Title =""></asp:Legend>
</Legends>
<ChartAreas>
<asp:ChartArea Name="ChartAreas1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.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>
<fieldset>
<legend>ddd</legend>
<asp:Chart ID="Chart1" runat="server">
<Titles>
<asp:Title Name="Title" Text="Title1">
</asp:Title>
</Titles>
<Annotations >
<asp:TextAnnotation Text=""></asp:TextAnnotation>
</Annotations>
<Legends>
<asp:Legend Title =""></asp:Legend>
</Legends>
<MapAreas>
</MapAreas>
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartAreas1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</fieldset>
</div>
<div>
<asp:Chart ID="Chart2" runat="server">
<Series>
</Series>
<Legends>
<asp:Legend Title =""></asp:Legend>
</Legends>
<ChartAreas>
<asp:ChartArea Name="ChartAreas1">
</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;
using Microsoft.Office.Core;
using Microsoft.Office.Interop.Owc11;
using Microsoft.Office.Interop;
using System.Web.UI.DataVisualization.Charting;
namespace BeautyCode.SharePoint.MVPDemo.Pages
{
public partial class Chart : System.Web.UI.Page
{
private DataTable _SampleDataTable;
private DataTable _InSchool;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PaintChart1();
PaintChart2();
}
}
private void CreateDataTable()
{
_SampleDataTable = new DataTable();
_SampleDataTable.Columns.Add("jx");
_SampleDataTable.Columns.Add("count");
DataRow row;
row = _SampleDataTable.NewRow();
row[0] = "上將";
row[1] = 100;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "准將";
row[1] = 400;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "大校";
row[1] = 1000;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "上校";
row[1] = 800;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "上尉";
row[1] = 600;
_SampleDataTable.Rows.Add(row);
}
private void PaintChart1()
{
CreateDataTable();
this.Chart1.Titles["Title"].Text = "1000-8000年度總冠軍";
this.Chart1.Series.Add(new Series("軍銜"));
this.Chart1.Width = 500;
#region MSChart manual add data
//this.Chart1.Series["軍銜"].Points.AddXY("上將", 20);
//this.Chart1.Series["軍銜"].Points.AddXY("中將", 200);
//this.Chart1.Series["軍銜"].Points.AddXY("准將", 40);
//this.Chart1.Series["軍銜"].Points.AddXY("中校", 60);
//this.Chart1.Series["軍銜"].Points.AddXY("少校", 100);
//this.Chart1.Series["軍銜"].Points.AddXY("上尉", 48);
#endregion
#region MSChart DataSource Array
//int xy = _SampleDataTable.Rows.Count;
//List<string> jx = new List<string>();
//List<int> count = new List<int>();
//DataRowCollection rows = _SampleDataTable.Rows;
//foreach (DataRow row in rows)
//{
// jx.Add(row["jx"].ToString());
// count.Add(int.Parse(row["count"].ToString()));
//}
//this.Chart1.Series["軍銜"].Points.DataBindXY(jx,count );
#endregion
#region MSChart DataSource DataTable
this.Chart1.DataSource = _SampleDataTable;
this.Chart1.Series["軍銜"].XValueMember = "jx";
this.Chart1.Series["軍銜"].XValueType = ChartValueType.String;
this.Chart1.Series["軍銜"].XAxisType = AxisType.Primary;
this.Chart1.Series["軍銜"].YValueMembers = "count";
this.Chart1.Series["軍銜"].YValueType = ChartValueType.Int32;
this.Chart1.Series["軍銜"].YAxisType = AxisType.Primary;
#endregion
#region
this.Chart1.Series["軍銜"].ChartType = SeriesChartType.Column;
this.Chart1.Series["軍銜"].BorderWidth = 1;
this.Chart1.Series["軍銜"].IsVisibleInLegend = true;
this.Chart1.Series["軍銜"].IsValueShownAsLabel = true;
#endregion
#region
this.Chart1.ChartAreas["ChartAreas1"].AxisX.Title = "軍銜種類";
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Title = "學員總數";
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart1.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart1.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart1.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
}
private void CreateInSchool()
{
_InSchool = new DataTable();
_InSchool.Columns.Add("year");
_InSchool.Columns.Add("allyear");
_InSchool.Columns.Add("new");
_InSchool.Rows.Add("2001", 20, 29);
_InSchool.Rows.Add("2002", 60, 69);
_InSchool.Rows.Add("2003", 200, 290);
_InSchool.Rows.Add("2004", 400, 490);
_InSchool.Rows.Add("2005", 0, 9);
_InSchool.Rows.Add("2006", 150, 180);
_InSchool.Rows.Add("2007", 190, 246);
}
private void PaintChart2()
{
CreateInSchool();
this.Chart2.Titles.Add("2001-2009年度總亞軍");
this.Chart2.Width = 800;
this.Chart2.Series.Add(new Series("新增學員總數"));
this.Chart2.Series["新增學員總數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["新增學員總數"].BorderWidth = 1;
this.Chart2.Series["新增學員總數"].IsVisibleInLegend = true;
this.Chart2.Series["新增學員總數"].IsValueShownAsLabel = true;
#region
this.Chart2.Series["新增學員總數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["新增學員總數"].BorderWidth = 1;
this.Chart2.Series["新增學員總數"].IsVisibleInLegend = true;
this.Chart2.Series["新增學員總數"].IsValueShownAsLabel = true;
this.Chart2.Series["新增學員總數"].ChartArea = "ChartAreas1";
#endregion
#region
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart2.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart2.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart2.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
this.Chart2.Series.Add(new Series("全年在校學員數"));
this.Chart2.Series["全年在校學員數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["全年在校學員數"].BorderWidth = 1;
this.Chart2.Series["全年在校學員數"].IsVisibleInLegend = true;
this.Chart2.Series["全年在校學員數"].IsValueShownAsLabel = true;
#region
this.Chart2.Series["全年在校學員數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["全年在校學員數"].BorderWidth = 1;
this.Chart2.Series["全年在校學員數"].IsVisibleInLegend = true;
this.Chart2.Series["全年在校學員數"].IsValueShownAsLabel = true;
this.Chart2.Series["全年在校學員數"].ChartArea = "ChartAreas1";
#endregion
#region
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart2.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart2.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart2.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
this.Chart2.DataSource = _InSchool;
this.Chart2.Series["新增學員總數"].XValueMember = "year";
this.Chart2.Series["新增學員總數"].XValueType = ChartValueType.Int32;
this.Chart2.Series["新增學員總數"].XAxisType = AxisType.Primary;
this.Chart2.Series["新增學員總數"].YValueMembers = "allyear";
this.Chart2.Series["新增學員總數"].YValueType = ChartValueType.Int32;
this.Chart2.Series["新增學員總數"].YAxisType = AxisType.Primary;
this.Chart2.Series["全年在校學員數"].XValueMember = "year";
this.Chart2.Series["全年在校學員數"].XValueType = ChartValueType.Int32;
this.Chart2.Series["全年在校學員數"].XAxisType = AxisType.Primary;
this.Chart2.Series["全年在校學員數"].YValueMembers = "new";
this.Chart2.Series["全年在校學員數"].YValueType = ChartValueType.Int32;
this.Chart2.Series["全年在校學員數"].YAxisType = AxisType.Primary;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Office.Core;
using Microsoft.Office.Interop.Owc11;
using Microsoft.Office.Interop;
using System.Web.UI.DataVisualization.Charting;
namespace BeautyCode.SharePoint.MVPDemo.Pages
{
public partial class Chart : System.Web.UI.Page
{
private DataTable _SampleDataTable;
private DataTable _InSchool;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PaintChart1();
PaintChart2();
}
}
private void CreateDataTable()
{
_SampleDataTable = new DataTable();
_SampleDataTable.Columns.Add("jx");
_SampleDataTable.Columns.Add("count");
DataRow row;
row = _SampleDataTable.NewRow();
row[0] = "上將";
row[1] = 100;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "准將";
row[1] = 400;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "大校";
row[1] = 1000;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "上校";
row[1] = 800;
_SampleDataTable.Rows.Add(row);
row = _SampleDataTable.NewRow();
row[0] = "上尉";
row[1] = 600;
_SampleDataTable.Rows.Add(row);
}
private void PaintChart1()
{
CreateDataTable();
this.Chart1.Titles["Title"].Text = "1000-8000年度總冠軍";
this.Chart1.Series.Add(new Series("軍銜"));
this.Chart1.Width = 500;
#region MSChart manual add data
//this.Chart1.Series["軍銜"].Points.AddXY("上將", 20);
//this.Chart1.Series["軍銜"].Points.AddXY("中將", 200);
//this.Chart1.Series["軍銜"].Points.AddXY("准將", 40);
//this.Chart1.Series["軍銜"].Points.AddXY("中校", 60);
//this.Chart1.Series["軍銜"].Points.AddXY("少校", 100);
//this.Chart1.Series["軍銜"].Points.AddXY("上尉", 48);
#endregion
#region MSChart DataSource Array
//int xy = _SampleDataTable.Rows.Count;
//List<string> jx = new List<string>();
//List<int> count = new List<int>();
//DataRowCollection rows = _SampleDataTable.Rows;
//foreach (DataRow row in rows)
//{
// jx.Add(row["jx"].ToString());
// count.Add(int.Parse(row["count"].ToString()));
//}
//this.Chart1.Series["軍銜"].Points.DataBindXY(jx,count );
#endregion
#region MSChart DataSource DataTable
this.Chart1.DataSource = _SampleDataTable;
this.Chart1.Series["軍銜"].XValueMember = "jx";
this.Chart1.Series["軍銜"].XValueType = ChartValueType.String;
this.Chart1.Series["軍銜"].XAxisType = AxisType.Primary;
this.Chart1.Series["軍銜"].YValueMembers = "count";
this.Chart1.Series["軍銜"].YValueType = ChartValueType.Int32;
this.Chart1.Series["軍銜"].YAxisType = AxisType.Primary;
#endregion
#region
this.Chart1.Series["軍銜"].ChartType = SeriesChartType.Column;
this.Chart1.Series["軍銜"].BorderWidth = 1;
this.Chart1.Series["軍銜"].IsVisibleInLegend = true;
this.Chart1.Series["軍銜"].IsValueShownAsLabel = true;
#endregion
#region
this.Chart1.ChartAreas["ChartAreas1"].AxisX.Title = "軍銜種類";
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Title = "學員總數";
this.Chart1.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart1.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart1.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart1.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
}
private void CreateInSchool()
{
_InSchool = new DataTable();
_InSchool.Columns.Add("year");
_InSchool.Columns.Add("allyear");
_InSchool.Columns.Add("new");
_InSchool.Rows.Add("2001", 20, 29);
_InSchool.Rows.Add("2002", 60, 69);
_InSchool.Rows.Add("2003", 200, 290);
_InSchool.Rows.Add("2004", 400, 490);
_InSchool.Rows.Add("2005", 0, 9);
_InSchool.Rows.Add("2006", 150, 180);
_InSchool.Rows.Add("2007", 190, 246);
}
private void PaintChart2()
{
CreateInSchool();
this.Chart2.Titles.Add("2001-2009年度總亞軍");
this.Chart2.Width = 800;
this.Chart2.Series.Add(new Series("新增學員總數"));
this.Chart2.Series["新增學員總數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["新增學員總數"].BorderWidth = 1;
this.Chart2.Series["新增學員總數"].IsVisibleInLegend = true;
this.Chart2.Series["新增學員總數"].IsValueShownAsLabel = true;
#region
this.Chart2.Series["新增學員總數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["新增學員總數"].BorderWidth = 1;
this.Chart2.Series["新增學員總數"].IsVisibleInLegend = true;
this.Chart2.Series["新增學員總數"].IsValueShownAsLabel = true;
this.Chart2.Series["新增學員總數"].ChartArea = "ChartAreas1";
#endregion
#region
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart2.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart2.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart2.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
this.Chart2.Series.Add(new Series("全年在校學員數"));
this.Chart2.Series["全年在校學員數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["全年在校學員數"].BorderWidth = 1;
this.Chart2.Series["全年在校學員數"].IsVisibleInLegend = true;
this.Chart2.Series["全年在校學員數"].IsValueShownAsLabel = true;
#region
this.Chart2.Series["全年在校學員數"].ChartType = SeriesChartType.Column;
this.Chart2.Series["全年在校學員數"].BorderWidth = 1;
this.Chart2.Series["全年在校學員數"].IsVisibleInLegend = true;
this.Chart2.Series["全年在校學員數"].IsValueShownAsLabel = true;
this.Chart2.Series["全年在校學員數"].ChartArea = "ChartAreas1";
#endregion
#region
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Interval = 200;
this.Chart2.ChartAreas["ChartAreas1"].AxisY.Maximum = 1000;
this.Chart2.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
this.Chart2.ChartAreas["ChartAreas1"].BorderWidth = 1;
this.Chart2.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineWidth = 0;
#endregion
this.Chart2.DataSource = _InSchool;
this.Chart2.Series["新增學員總數"].XValueMember = "year";
this.Chart2.Series["新增學員總數"].XValueType = ChartValueType.Int32;
this.Chart2.Series["新增學員總數"].XAxisType = AxisType.Primary;
this.Chart2.Series["新增學員總數"].YValueMembers = "allyear";
this.Chart2.Series["新增學員總數"].YValueType = ChartValueType.Int32;
this.Chart2.Series["新增學員總數"].YAxisType = AxisType.Primary;
this.Chart2.Series["全年在校學員數"].XValueMember = "year";
this.Chart2.Series["全年在校學員數"].XValueType = ChartValueType.Int32;
this.Chart2.Series["全年在校學員數"].XAxisType = AxisType.Primary;
this.Chart2.Series["全年在校學員數"].YValueMembers = "new";
this.Chart2.Series["全年在校學員數"].YValueType = ChartValueType.Int32;
this.Chart2.Series["全年在校學員數"].YAxisType = AxisType.Primary;
}
}
}