웹(Web)에서 닷넷 차트(.net Chart)를 그려보자! - Getting started

Web examples 2009. 3. 27. 16:53

히포차트로 웹(Web)에서 차트를 그려보자!

[적용 버전]

베타 2.0 이상

[시나리오]

1. 웹에서 컬럼차트와 파이차트를 그린다.
2. 각 차트의 이미지 지정 경로는 images 폴더 하위로 한다.
3. 각 차트의 Alt 를 설정한다.
4. "수치 보여주기/안보여주기" 옵션 버튼을 삽입한다.
5. 컬럼 차트는 쉐도우 효과를 주고 파이 차트는 투명 효과를 준다.

(1) 디자인 타임 설정

위 그림과 같이 히포차트 웹 컨트롤 2개를 끌어다 놓고 아래 보이는 속성창의 Designer 를 통해 BackColor 를 조절해 두번재 차트를 녹색계열로 디자인합니다.

속성창에서 Alt 를 설정하고, 아래와 같이 images 폴더 생성 후 imageURL을 수정합니다.

(2) 중요 코드 설명

1. 페이지 로드와 유지해야할 속성
- 포스트백 이후에도 설정을 유지할 수치표시여부 bool 타입 속성을 뷰스테이트를 이용해 만듭니다. 페이지 로드에서는 페이지 첫 로드시에만 차트를 그리도록 수정하고 수치 표시 여부의 기본값으로 false 를 넘깁니다.

2. 차트 그리기
- 예제로 첫번째 차트인 컬럼 차트 샘플입니다. 컬럼 디자인타입을 쉐도우 형태, 넓이타입을 꽉차게(Tight) 주고 있고 해당 값은 랜덤으로 생성하고 있습니다.

3. "수치 보여주기 옵션 버튼" 이벤트 핸들러
- 버튼 클릭 시 수치보여주기 일 경우 안보이게 처리하고 안보일 경우 다시 보여주게 처리하는 로직입니다.

html 보기

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebBeta20Test._Default" %>
<%@ Register Assembly="HippoWebChart3" Namespace="Hippo" TagPrefix="Hippo" %>
<!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>
        <Hippo:wHippoChart ID="WHippoChart1" runat="server" DesignType="Simple" Alt="컬럼 차트!" ImageURL="images/chart1.Png">
            <LegendBox DivideLineColor="Gray" FigureFormat="Number" Height="213.239578" IsAutoSetting="True"
                IsDivideLine="True" IsShowHeader="False" IsVerticalLine="False" LegendFormat="Icon_Name"
                Location="Default" PercentDecimalPoint="0" ValueDecimalPoint="-2147483648" ValueType="Average"
                VerticalLineColor="Gray" Visible="True" Width="67.54643" />
            <Titles TitleAlign="Near">
                <Label Font="Tahoma, 10pt" ForeColor="White" Text="HippoChart Title Text" />
            </Titles>
            <Logo LogoAlign="Center">
                <Label Font="Tahoma, 8pt" ForeColor="SteelBlue" Text="www.HippoChart.com" />
            </Logo>
            <Designer BackColor="113, 171, 220" BackLineColor="Black" InnerBackColor="White"
                IsGradation="True" IsShowBorder="True" />
        </Hippo:wHippoChart>
        <br />
        <Hippo:wHippoChart ID="WHippoChart2" runat="server" DesignType="Simple" ImageURL="images/chart2.Png" Alt="파이 그래프!">
            <LegendBox DivideLineColor="Gray" FigureFormat="Number" Height="213.239578" IsAutoSetting="True"
                IsDivideLine="True" IsShowHeader="False" IsVerticalLine="False" LegendFormat="Icon_Name"
                Location="Default" PercentDecimalPoint="0" ValueDecimalPoint="-2147483648" ValueType="Average"
                VerticalLineColor="Gray" Visible="True" Width="67.54643" />
            <Titles TitleAlign="Near">
                <Label Font="Tahoma, 10pt" ForeColor="White" Text="HippoChart Title Text" />
            </Titles>
            <Logo LogoAlign="Center">
                <Label Font="Tahoma, 8pt" ForeColor="SteelBlue" Text="www.HippoChart.com" />
            </Logo>
            <Designer BackColor="YellowGreen" BackLineColor="Black" InnerBackColor="White" IsGradation="True"
                IsShowBorder="True" />
        </Hippo:wHippoChart>
        <br />
        <br />
        <asp:Button ID="btnShowFigures" runat="server" OnClick="btnShowFigures_Click" Text="수치 보이기" /> </div>
    </form>
</body>
</html>

C# 전체 코드 보기

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using Hippo;

namespace WebBeta20Test
{
    public partial class _Default : System.Web.UI.Page
    {
        /// <summary>
        /// 현재 수치 보여주기 상태값 관리 프로퍼티
        /// </summary>
        public bool ShowFigures
        {
            get
            {
                return (bool)this.ViewState["ShowFigures"];
            }
            set
            {
                this.ViewState["ShowFigures"] = value;
            }
        }

        /// <summary>
        /// 페이지 로드
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.Draw1(false);
                this.Draw2(false);

                // 수치표시여부 속성 초기값
                this.ShowFigures = false;
            }
        }

        /// <summary>
        /// 첫번재 차트 그리기
        /// </summary>
        /// <param name="isFigures">수치표시여부</param>
        private void Draw1(bool isFigures)
        {
            SeriesList sList = new SeriesList();
            sList.ChartType = ChartType.Column;

            Random r = new Random();
            for (int i = 0; i < 4; i++)
            {
                Series sr = new Series();
                sr.Column.DesignType = AreaDesignType.Shadow;
                sr.Column.WidthType = ColumnWidthType.Tight;

                for (int x = 0; x < 4; x++)
                {
                    SeriesItem item = new SeriesItem();
                    item.YValue = r.Next(100);
                    item.IsShowFigureText = isFigures;

                    sr.items.Add(item);
                }
                sList.SeriesCollection.Add(sr);
            }

this.WHippoChart1.Titles.Label.Text = "웹에서 컬럼차트를 그려보자";
this.WHippoChart1.Titles.Label.ForeColor = Color.SteelBlue;

            this.WHippoChart1.SeriesListDictionary.Add(sList);
            this.WHippoChart1.DrawChart();
        }

        /// <summary>
        /// 두번째 차트 그리기
        /// </summary>
        /// <param name="isFigures">수치표시여부</param>
        private void Draw2(bool isFigures)
        {
            SeriesList sList = new SeriesList();
            sList.ChartType = ChartType.Pie;
            sList.IsShow3D = true;
            sList.Transparency = 50;

            Random r = new Random();
            for (int i = 0; i < 1; i++)
            {
                Series sr = new Series();

                for (int x = 0; x < 4; x++)
                {
                    SeriesItem item = new SeriesItem();
                    item.YValue = r.Next(100);
                    item.Name = "item" + x.ToString();
                    item.IsShowFigureText = isFigures;

                    sr.items.Add(item);
                }
                sList.SeriesCollection.Add(sr);
            }

            this.WHippoChart2.Titles.Label.Text = "웹에서 파이그래프를 그려보자";
            this.WHippoChart2.Titles.Label.ForeColor = Color.YellowGreen;
            this.WHippoChart2.Logo.Label.ForeColor = Color.YellowGreen;
            this.WHippoChart2.Designer.BackColor = Color.YellowGreen;

            this.WHippoChart2.SeriesListDictionary.Add(sList);
            this.WHippoChart2.DrawChart();
        }

        /// <summary>
        /// 수치 보이기 이벤트 핸들러
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnShowFigures_Click(object sender, EventArgs e)
        {
            this.ShowFigures = !this.ShowFigures;

this.Draw1(this.ShowFigures);
this.Draw2(this.ShowFigures);

            if (this.ShowFigures)
            {
                this.btnShowFigures.Text = "수치 안보이게";
            }
            else
            {
                this.btnShowFigures.Text = "수치 보이게";
            }
        }
    }
}

VB 전체 코드 보기

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Drawing
Imports Hippo

Namespace WebBeta20Test
    Public Partial Class _Default
        Inherits System.Web.UI.Page
        ''' <summary>
        ''' 현재 수치 보여주기 상태값 관리 프로퍼티
        ''' </summary>
        Public Property ShowFigures() As Boolean
            Get
                Return CBool(Me.ViewState("ShowFigures"))
            End Get
            Set(ByVal value As Boolean)
                Me.ViewState("ShowFigures") = value
            End Set
        End Property

        ''' <summary>
        ''' 페이지 로드
        ''' </summary>
        ''' <param name="sender"></param>
        ''' <param name="e"></param>
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not IsPostBack Then
                Me.Draw1(False)
                Me.Draw2(False)

                ' 수치표시여부 속성 초기값
                Me.ShowFigures = False
            End If
        End Sub

        ''' <summary>
        ''' 첫번재 차트 그리기
        ''' </summary>
        ''' <param name="isFigures">수치표시여부</param>
        Private Sub Draw1(ByVal isFigures As Boolean)
            Dim sList As New SeriesList()
            sList.ChartType = ChartType.Column

            Dim r As New Random()
            For i As Integer = 0 To 3
                Dim sr As New Series()
                sr.Column.DesignType = AreaDesignType.Shadow
                sr.Column.WidthType = ColumnWidthType.Tight

                For x As Integer = 0 To 3
                    Dim item As New SeriesItem()
                    item.YValue = r.[Next](100)
                    item.IsShowFigureText = isFigures

                    sr.items.Add(item)
                Next
                sList.SeriesCollection.Add(sr)
            Next

            Me.WHippoChart1.Titles.Label.Text = "웹에서 컬럼차트를 그려보자"
            Me.WHippoChart1.Titles.Label.ForeColor = Color.SteelBlue

            Me.WHippoChart1.SeriesListDictionary.Add(sList)
            Me.WHippoChart1.DrawChart()
        End Sub

        ''' <summary>
        ''' 두번째 차트 그리기
        ''' </summary>
        ''' <param name="isFigures">수치표시여부</param>
        Private Sub Draw2(ByVal isFigures As Boolean)
            Dim sList As New SeriesList()
            sList.ChartType = ChartType.Pie
            sList.IsShow3D = True
            sList.Transparency = 50

            Dim r As New Random()
            For i As Integer = 0 To 0
                Dim sr As New Series()

                For x As Integer = 0 To 3
                    Dim item As New SeriesItem()
                    item.YValue = r.[Next](100)
                    item.Name = "item" & x.ToString()
                    item.IsShowFigureText = isFigures

                    sr.items.Add(item)
                Next
                sList.SeriesCollection.Add(sr)
            Next

            Me.WHippoChart2.Titles.Label.Text = "웹에서 파이그래프를 그려보자"
            Me.WHippoChart2.Titles.Label.ForeColor = Color.YellowGreen
            Me.WHippoChart2.Logo.Label.ForeColor = Color.YellowGreen
            Me.WHippoChart2.Designer.BackColor = Color.YellowGreen

            Me.WHippoChart2.SeriesListDictionary.Add(sList)
            Me.WHippoChart2.DrawChart()
        End Sub

        ''' <summary>
        ''' 수치 보이기 이벤트 핸들러
        ''' </summary>
        ''' <param name="sender"></param>
        ''' <param name="e"></param>
        Protected Sub btnShowFigures_Click(ByVal sender As Object, ByVal e As EventArgs)
            Me.ShowFigures = Not Me.ShowFigures

            Me.Draw1(Me.ShowFigures)
            Me.Draw2(Me.ShowFigures)

            If Me.ShowFigures Then
                Me.btnShowFigures.Text = "수치 안보이게"
            Else
                Me.btnShowFigures.Text = "수치 보이게"
            End If
        End Sub
    End Class
End Namespace

저작자표시 비영리 변경금지

사업자 정보 표시

'Web examples' 카테고리의 다른 글

홈페이지의 웹로그(Weblog) 분석 그래프를 그려보자! (0)	2009.03.29

Posted by 리바이 병장

웹(Web)에서 닷넷 차트(.net Chart)를 그려보자! - Getting started

'Web examples' 카테고리의 다른 글

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

티스토리툴바


	닷넷 차트 컨트롤 히포차트의 개발 방법과 다양한 사용 예를 알아봅니다. 문의 사항은 hippochart@gmail.com by 리바이 병장