[ASP.NET] MS Chart簡易範例

[ASP.NET] MS Chart簡易範例

使用條件:

  1. 需使用.Net Framework 3.5 SP1以上版本
  2. Visual Studio 2008版本以上開發工具

使用之套件(vs 2010以上版本就有內建了):

  1. MSChart (Microsoft Chart Controls for Microsoft .NET Framework 3.5)
  2. MSChartLP_cht (Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件)
  3. MSChart_VisualStudioAddOn (Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008)
  4. 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;
    }

 

 

執行顯示

image

 

 

本次範例 下載

 

MSDN超多範例連結


2014/3/18 下午 10:16:13

補充 Chart 的組成示意圖

image

另外,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>

 

 

Dotblogs 的標籤: ,,,