[ASP.NET] MS Chart簡易範例
使用條件：
- 需使用.Net Framework 3.5 SP1以上版本
- Visual Studio 2008版本以上開發工具
使用之套件(vs 2010以上版本就有內建了)：
- MSChart (Microsoft Chart Controls for Microsoft .NET Framework 3.5)
- MSChartLP_cht (Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件)
- MSChart_VisualStudioAddOn (Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008)
- DataVisChartControl (Microsoft Chart Controls for .NET Framework Documentation)
更新web.config加入MSChart的元件 .Net Framework 3.5
<system.webServer>
<handlers>
<remove name="ChartImageHandler" />
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.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=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</assemblies></compilation>
</system.web>
.Net Framework 4.0
<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>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies></compilation>
</system.web>
前台aspx
<div>
<asp:Chart ID="ColumnChart" runat="server" BackColor="#D3DFF0" Width="400px" Height="300px" BorderColor="26, 59, 105" Palette="BrightPastel" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2">
<%--圖表的標題文字--%>
<Titles>
<asp:Title ShadowColor="32,0,0,0" Font="Times New Roman, 14pt, style=Bold" ShadowOffset="3" Text="長條圖" ForeColor="26,59,105"></asp:Title>
</Titles>
<%--圖表的說明內容--%>
<Legends>
<asp:Legend Enabled="false" IsTextAutoFit="false" Name="Column" BackColor="Transparent" Font="Times New Roman, 10pt, style=Bold" ></asp:Legend>
</Legends>
<%--圖表的外觀--%>
<BorderSkin SkinStyle="Emboss">
</BorderSkin>
<%--圖表的資料數據--%>
<Series>
<asp:Series IsValueShownAsLabel="true" ChartArea="ColumnChartArea" Name="Column" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat=""></asp:Series>
</Series>
<%--圖表的顯示區域--%>
<ChartAreas>
<asp:ChartArea Name="ColumnChartArea" 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" />
<AxisY LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle">
<LabelStyle Font="Times New Roman, 10pt, style=Bold" Format="" />
<MajorGrid LineColor="64,64,64,64" />
</AxisY>
<AxisX LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle" Interval="1">
<LabelStyle Font="Times New Roman, 10pt, style=Bold" IsStaggered="true" />
<MajorGrid LineColor="64,64,64,64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
<div>
<asp:Chart ID="LineChart" runat="server" BackColor="#D3DFF0" Width="400px" Height="300px" BorderColor="26, 59, 105" Palette="BrightPastel" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2">
<Titles>
<asp:Title ShadowColor="32,0,0,0" Font="Times New Roman, 14pt, style=Bold" ShadowOffset="3" Text="折線圖" ForeColor="26,59,105"></asp:Title>
</Titles>
<Legends>
<asp:Legend LegendStyle="Column" IsTextAutoFit="false" DockedToChartArea="LineChartArea" Docking="Top" Name="Line" BackColor="Transparent" Font="Times New Roman, 10pt, style=Bold" ></asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss">
</BorderSkin>
<Series>
<asp:Series IsValueShownAsLabel="true" ChartArea="LineChartArea" Name="Line" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat=""></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="LineChartArea" 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" />
<AxisY LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle">
<LabelStyle Font="Times New Roman, 10pt, style=Bold"/>
<MajorGrid LineColor="64,64,64,64" />
</AxisY>
<AxisX LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle">
<LabelStyle Font="Times New Roman, 10pt, style=Bold" IsStaggered="true"/>
<MajorGrid LineColor="64,64,64,64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
<div>
<asp:Chart ID="PieChart" runat="server" BackColor="#D3DFF0" Width="400px" Height="300px" BorderColor="26, 59, 105" Palette="BrightPastel" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2">
<Titles>
<asp:Title ShadowColor="32,0,0,0" Font="Times New Roman, 14pt, style=Bold" ShadowOffset="3" Text="圓餅圖" ForeColor="26,59,105"></asp:Title>
</Titles>
<Legends>
<asp:Legend LegendStyle="Column" IsTextAutoFit="false" DockedToChartArea="PieChartArea" Docking="Right" Name="Pie" BackColor="Transparent" Font="Times New Roman, 10pt, style=Bold" ></asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss">
</BorderSkin>
<Series>
<asp:Series IsValueShownAsLabel="true" ChartArea="PieChartArea" Name="Pie" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat=""></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="PieChartArea" 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" />
<AxisY LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle">
<LabelStyle Font="Times New Roman, 10pt, style=Bold"/>
<MajorGrid LineColor="64,64,64,64" />
</AxisY>
<AxisX LineColor="64,64,64,64" IsLabelAutoFit="false" ArrowStyle="Triangle">
<LabelStyle Font="Times New Roman, 10pt, style=Bold" IsStaggered="true"/>
<MajorGrid LineColor="64,64,64,64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
後台cs
using System.Web.UI.DataVisualization.Charting; //Chart Web 伺服器控制項的方法和屬性
using System.Drawing; //繪圖功能的存取
//長條圖
private void CreateColumnChart()
{
//sqlstr = "SELECT DATEPART(month,OrderDate) as month,count(DATEPART(month,OrderDate)) as count FROM Orders WHERE DATEPART(year,OrderDate) ='1996' GROUP BY DATEPART(month,OrderDate) order by month";
SqlDataReader reader = null;
reader = GetDRConn(sqlstr);
//將讀取資料加入至繪圖圖表中
ColumnChart.Series["Column"].Points.DataBindXY(reader, "month", reader, "ordercount");
//圖形呈現樣式
ColumnChart.Series["Column"]["DrawingStyle"] = "Cylinder";
//圖形線條粗細
ColumnChart.Series["Column"]["PointWidth"] = "0.2";
//圖形樣式
ColumnChart.Series["Column"].ChartType = SeriesChartType.Column;
//坐標軸說明文字
ColumnChart.ChartAreas["ColumnChartArea"].AxisX.Title = "月份";
ColumnChart.ChartAreas["ColumnChartArea"].AxisY.Title = "訂單數";
//坐標軸說明文字格式
ColumnChart.ChartAreas["ColumnChartArea"].AxisX.TitleFont = new Font("細明體", 10f, FontStyle.Bold);
ColumnChart.ChartAreas["ColumnChartArea"].AxisY.TitleFont = new Font("細明體", 10f, FontStyle.Bold);
//坐標軸說明文字位置
ColumnChart.ChartAreas["ColumnChartArea"].AxisX.TitleAlignment = StringAlignment.Far;
ColumnChart.ChartAreas["ColumnChartArea"].AxisY.TitleAlignment = StringAlignment.Far;
//坐標尺規的間距
ColumnChart.ChartAreas["ColumnChartArea"].AxisY.Interval = 100;
}
//折線圖
private void CreateLineChart()
{
//sqlstr = "SELECT DATEPART(month,OrderDate) as month,count(DATEPART(month,OrderDate)) as count FROM Orders WHERE DATEPART(year,OrderDate) ='1996' GROUP BY DATEPART(month,OrderDate) order by month";
DataTableReader reader = GetDTConn(sqlstr).CreateDataReader();
//將讀取資料加入至繪圖圖表中
LineChart.Series["Line"].Points.DataBindXY(reader, "month", reader, "ordercount");
//設定圖形X軸的顯示文字
foreach (DataPoint dp in LineChart.Series["Line"].Points)
{
dp.AxisLabel = dp.XValue + "月";
}
//繪製的樣式
LineChart.Series["Line"]["DrawingStyle"] = "Cylinder";
//線條粗細
LineChart.Series["Line"]["PointWidth"] = "0.5";
//設定顯示圖形的樣式類別
LineChart.Series["Line"].ChartType = SeriesChartType.Line;
//設定圖例顯示的文字
LineChart.Series["Line"].LegendText = "訂單數";
}
//圓餅圖
private void CreatePieChart()
{
//sqlstr = "SELECT DATEPART(month,OrderDate) as month,count(DATEPART(month,OrderDate)) as count FROM Orders WHERE DATEPART(year,OrderDate) ='1996' GROUP BY DATEPART(month,OrderDate) order by month";
DataTableReader reader = GetDTConn(sqlstr).CreateDataReader();
//將讀取資料加入至繪圖圖表中
PieChart.Series["Pie"].Points.DataBindXY(reader, "month", reader, "ordercount");
//設定圖形X軸的顯示文字
foreach (DataPoint dp in PieChart.Series["Pie"].Points)
{
dp.AxisLabel = dp.XValue + "月";
}
//繪製樣式
PieChart.Series["Pie"]["DrawingStyle"] = "Cylinder";
//顯示圖形的樣式類別
PieChart.Series["Pie"].ChartType = SeriesChartType.Pie;
}
執行顯示
本次範例 下載
2014/3/18 下午 10:16:13
補充 Chart 的組成示意圖
另外，V 回復的問題，關於發布的設定，沒看到實際訊息，
猜測可能是暫存目錄的設定，這篇文章有提到。
這邊再仔細說明一下，除了上述的 config 設定外，在 server 發佈時，
由於 Chart 會產生圖表的暫存圖片，因此需要指定暫存路徑，所以
需要在 config 中設定路徑，預設的暫存目錄路徑是 c:\TempImageFiles\
圖表儲存方法(storage=file|memory|session)及目錄指定(dir|url)
<appSettings>
<!--不同儲存的格式設定與絕對路徑-->
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;"/>
<add key="ChartImageHandler" value="storage=memory;timeout=20;dir=c:\TempImageFiles\;"/>
<add key="ChartImageHandler" value="storage=session;timeout=20;dir=c:\TempImageFiles\;"/>
<!--相對路徑 ~表示是在網站路徑下-->
<add key="ChartImageHandler" value="storage=file;timeout=20;url=~\;"/>
<add key="ChartImageHandler" value="storage=file;timeout=20;url=~/TempImageFiles/;"/>
</appSettings>