Hello Microsoft asp.net chart

by Neon Quach 9. October 2010 19:39

Gần đây mình có 1 task là xây dựng biểu đồ thống kê tỷ lệ lợi nhuận khi đặc cá cược, sau đó mình liên tưởng tới MS Chart, MSChart chỉ support .net 3.5 SP1 và .net 4.0.

Nếu bạn dùng visual studio 2008 thì chúng ta phải cài thêm MS chart, có thể tải tại đây và phải upgrade lên .net 3.5 sp1. Nhưng nếu chúng ta dùng Visual Studio 2010 thì không cần phải cài thêm component gì khác.

Trong bài blog này mình sẽ hướng dẫn chúng ta cách xây dựng biểu đồ sử dụng asp.net chart control.

Đầu tiên mình tạo 1 empty asp.net website, sau đó mình add trang Default.aspx
Từ Toolbox kéo Chart Control từ danh mục Data.

<asp:Chart ID="Chart1" runat="server">
    <Series>
        <asp:Series Name="Series1">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>


Để chart hiển thị dữ liệu chúng ta cần có giá trị X và Y.

<Series>
    <asp:Series Name="Series1>
        <Points>
            <asp:DataPoint XValue="10" YValues="4000" AxisLabel="Google" />
            <asp:DataPoint XValue="20" YValues="2000" AxisLabel="Yahoo" />
            <asp:DataPoint XValue="30" YValues="10000" AxisLabel="Microsoft" />
        </Points>
    </asp:Series>
</Series>

Chú ý: XValue là dữ liệu cột nằm ngang, Yvalue là dữ liệu cột đứng và AxisLabel là nhãn cho giá trị X.

Ở biểu đồ chart bên trên chúng ta thấy dòng Top US User from the Search Companies, đó gọi là title và Users bên tay phải là Legend

<Titles>
    <asp:Title Font="Microsoft Sans Serif, 11pt, style=Bold" Name="Title1" 
Text="Top US User from the Search Companies">
    </asp:Title>
</Titles>


và

<asp:Series Name="Series1" Legend="Legend1" LegendText="Users">

Để làm cho Chart hấp dẫn lên và sinh động hơn, mình set hiệu ứng 3D cho Chart

<ChartAreas>
    <asp:ChartArea Name="ChartArea1" AlignmentOrientation="All" ShadowColor="Transparent"
        BorderDashStyle="Solid" BackSecondaryColor="Transparent" AlignmentStyle="AxesView"
        BackColor="Transparent" BackGradientStyle="TopBottom">
        <Area3DStyle Enable3D="True" LightStyle="None" />
    </asp:ChartArea>
</ChartAreas>

Và đây là full makeup code:

<%@ 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">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="Chart1" runat="server" Height="375px" Width="474px">
            <Series>
                <asp:Series Name="Series1" Legend="Legend1" LegendText="Users">
                    <Points>
                        <asp:DataPoint XValue="10" YValues="4000" AxisLabel="Google" />
                        <asp:DataPoint XValue="20" YValues="2000" AxisLabel="Yahoo" />
                        <asp:DataPoint XValue="30" YValues="10000" AxisLabel="Microsoft" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" AlignmentOrientation="All" ShadowColor="Transparent"
                    BorderDashStyle="Solid" BackSecondaryColor="Transparent" AlignmentStyle="AxesView"
                    BackColor="Transparent" BackGradientStyle="TopBottom">
                    <Area3DStyle Enable3D="True" LightStyle="None" />
                </asp:ChartArea>
            </ChartAreas>
            <Legends>
                <asp:Legend Name="Legend1">
                </asp:Legend>
            </Legends>
            <Titles>
                <asp:Title Font="Microsoft Sans Serif, 11pt, style=Bold" Name="Title1" Text="Top US User from the Search Companies">
                </asp:Title>
            </Titles>
        </asp:Chart>
    </div>
    </form>
</body>
</html>