ASP.NET 에서 실시 간 도표 의 실현 방법 공유

대량의 데 이 터 를 분석 하고 비교 할 때 가장 자주 사용 되 는 것 도 가장 직관 적 이 고 명료 한 표현 방법 은 바로 추세 도 표를 그 리 는 것 이다.일반적인 상황 에서 우 리 는 EXCEL 을 이용 하여 각종 유형의 트 렌 드 도 표를 만 들 지만 모두 정적 데 이 터 를 바탕 으로 한다.즉,데 이 터 는 동적 으로 생 성 되 는 것 이 아니 라 미리 정 리 된 것 이다.인터넷 에 게시 되면 그 려 진 도 표를 정적 GIF 이미지 로 만 게시 할 수 있 기 때문에 사용자 별로 데이터 에 대한 수 요 를 근본적으로 만족 시 킬 수 없습니다.ASP 는 서버 쪽 의 웹 프로 그래 밍 에 능 하고 배경 데이터 베 이 스 를 조작 하 는 것 이 강점 입 니 다.그러나 ASP 로 실시 간 데이터베이스 도 표를 만 드 는 것 은 어 려 운 일이 다.ASP 자체 가 도표 기능 을 지원 하지 않 기 때문에 VB 와 같은 제3자 컨트롤 을 통 해 개발 할 수 밖 에 없다.마이크로소프트 가 내 놓 은.NET Framework 는 이 문 제 를 비교적 잘 해결 했다.마이크로소프트 는.NET 플랫폼 에 실시 간 데이터베이스 도표 제작 구성 요소 인 OWC(Microsoft Office Web Components)를 통합 했다.ASP.NET 페이지 에서 OWC 를 호출 하면 다양한 유형의 실시 간 도 표를 쉽게 그 릴 수 있 습 니 다.OWC 는 곡선 도,접선 도,막대 그래프,면적 도,K 선도 등 50 가지 에 가 까 운 도표 유형 을 지원 합 니 다.MSChart 에 비해 OWC 는 기능 이 강하 고 조작 이 간단 하 다.또한,MWC 는 서버 기반 이 고 MSChart 는 클 라 이언 트 에 만 적 용 될 수 있 기 때문에 서버 측의 웹 개발 에서 MSChart 는 OWC 보다 훨씬 뒤떨어진다.
다음 에 필 자 는 사례 를 결합 하여 OWC 가 ASP.NET 페이지 에서 의 응용 을 구체 적 으로 논술 할 것 이다.이 사례 는 필자 가 개발 한 프로젝트 인 중의 서브 시스템 이다.필 자 는 이 프로젝트 에서 OWC 를 사용 하여 OWC 의 강력 한 기능 이 개발 업무 에 가 져 온 편 의 를 충분히 누 렸 다.
삼층 구조
시스템 의 전체적인 구 조 는 B/S 3 층 구조 모델 을 사용 하여 시스템 을 사용자 인터페이스 층(표현 층 이 라 고도 함),업무 논리 층(기능 층 이 라 고도 함)과 데이터 베이스 서비스 층(데이터 층 이 라 고도 함)으로 나 누 었 고 개발 플랫폼 은.NET Framework 를 사용 하여 시스템 이 클 라 이언 트 기기 에 대한 요 구 를 효과적으로 낮 추 었 다.클 라 이언 트 기기 에서 응용 프로그램 과 버 전 관리 에 어려움 을 피 했다.
●사용자 인터페이스 층:사용자 인터페이스 는 ASP.NET 기술 을 사용 합 니 다.ASP.NET 기술 의 응용 은 시스템 의 유 니 버 설 성 을 향상 시 켰 습 니 다.클 라 이언 트 는 IE 나 Netscape 등 모든 브 라 우 저 를 설치 하고 구성 요 소 를 불 러 올 필요 가 없습니다.
●비 즈 니스 논리 층:.NET Framework 에서 OWC 를 호출 하 는 기술 을 사용 하여 사용자 의 요구 에 따라 데이터베이스 에 있 는 데이터 동적 생 성 도 표를 신속하게 얻 을 수 있 습 니 다.시스템 은 복잡 한 검색 조건 을 지원 할 수 있 고 검색 속도 가 빠 르 며 응답 시간 이 짧다.
●데이터베이스 서비스 층:데이터베이스 서비스 층 은 어떠한 관계 형 데이터 베 이 스 를 사용 할 수 있 습 니 다.이 프로젝트 에서 필 자 는 SQL Server 를 사용 하여.NET Framework 와 빈 틈 없 이 통합 할 수 있 습 니 다.데이터베이스 액세스 기술 은 ADO.NET 을 채택 했다.
다음 글 에서 우 리 는 업무 논리 층 의 실현 방법 을 중점적으로 소개 할 것 이다.
도표 요소 소개
완전한 도 표 는 여러 가지 요소 로 구성 되 어 있 기 때문에 우 리 는 그들 에 대해 알 아야 만 마음대로 도 표를 전방위 적 으로 통제 할 수 있 고 이 절 차 를 잘 이해 할 수 있다.필 자 는 간단 하고 간단 한 도 표를 만 들 었 고 그림 에 프로그램 이 관련 된 주요 부위 와 요소 의 이름 을 표시 하여 독자 들 이 OWC 를 파악 하고 본 고 에서 인용 한 코드 를 이해 하도록 도와 주 었 다
OWC 구성 요소 사용 하기
이 절 에서 언급 된 소스 코드 는 에서 발췌 되 었 는데 이 시스템 은 Window 2000/XP 간 체 중국어 전문 판,.NET Framewrok 1.0 환경 에서 통과 되 었 다.OWC 구성 요 소 를 사용 하 는 절 차 는 다음 과 같 습 니 다.
1.현재 디 렉 터 리 에 도표 파일 을 저장 하 는 하위 디 렉 터 리 chart 를 새로 만 들 고 이 디 렉 터 리 에 대한'수정'권한 을 ASP.NET 계 정 에 부여 합 니 다.구체 적 인 절 차 는 다음 과 같다.chart 디 렉 터 리 이름 을 마우스 우 클릭 으로 클릭 하고'속성'메뉴 항목 을 선택 하 며 팝 업 된'Chart'속성 대화 상자 에서'안전'옵션 을 클릭 하고'추가'단 추 를 누 르 면 ASP.NET 계 정 을 찾 아'수정'권한 을 부여 하고'확인'단 추 를 누 르 면 끝난다.이렇게 하면 ASP.NET 은 chart 디 렉 터 리 에 도표 파일 을 쓸 수 있 습 니 다.
2.서버 쪽 의 Image 이미지 컨트롤 을 정의 합 니 다.이 이미지 의 속성 imageURL 은 프로그램 끝 에 동적 으로 생 성 된 도표 파일 을 가리 키 기 때문에 값 을 부여 할 필요 가 없습니다.

< asp:image id=“imgChart” Width=“500” Height=“300” Visible=“False” Runat=“server”>< /asp:image>

3.OWC 인용 추가.
OWC 를 사용 하기 전에 먼저 OWC 의 인용 을'솔 루 션 자원 관리자'에 넣 어야 합 니 다.구체 적 인 절 차 는 다음 과 같다.'솔 루 션 자원 관리자'패 널 을 열 고 마우스 오른쪽 단 추 를 누 르 고'인용 추가'메뉴 를 선택 하고 팝 업 된'인용 추가'대화 상자 에서'COM'카드 를 누 르 면'Microsoft Office Web Components 9.0'을 찾 고'선택'과'확인'단 추 를 누 르 면 OWC 가 인용 에 추가 된다.
4.OWC 공간 을 정의 하고 이 공간 에 OWC 도표 owcChart 를 추가 합 니 다.

Dim owcChartSpace As OWC.ChartSpace = New OWC.ChartSpace()

Dim owcChart As OWC.WCChart = owcChartSpace.Charts.Add

5.SQL 검색 조건 으로 데이터베이스 검색 을 하고 검색 결 과 를 RecordSet 데이터 세트 로 owcChart 에 부여 합 니 다.
OWC 는 RecordSet 데이터 세트 만 지원 하고 DataSet 데이터 세트 는 지원 되 지 않 기 때문에 검색 시 sqlCommand,sqlDataAdapter 등 대상 을 사용 할 수 없고 RecordSet 대상 만 검색 할 수 있 습 니 다.

' connection

ConnADO.Open(connectionString)

RecordsetADO.ActiveConnection = ConnADO

'

RecordsetADO.CursorType = ADODB.CursorTypeEnum.adOpenStatic

RecordsetADO.CursorLocation = ADODB.CursorLocationEnum.adUseClient

' strSQL SQL

RecordsetADO.Open(strSQL)

그리고 RecordSet 데이터 세트 를 OWC 대상 에 게 부여 합 니 다.

owcChartSpace.DataSource = RecordsetADO

이 예 에서 우 리 는 SQL 구문 으로 검색 한 데 이 터 는 모두 세 개의 필드 가 있다 고 가정 합 니 다.제품,날짜 와 가격 입 니 다.이 세 필드 의 값 은 도표 의 곡선,분류(X)축 과 수치(Y)축의 데이터 와 일일이 대응한다.
6.곡선 유형 을 확정 하고 서로 다른 곡선 을 구별 하 는 필드 이름 을 확인한다.
우선 곡선 유형 을 부 드 러 운 곡선 으로 확정 합 니 다.

owcChart.Type = OWC.ChartChartTypeEnum.chChartTypeSmoothLine

OWC 는 같은 도표 에 두 개 이상 의 곡선 을 표시 하 는 것 을 지원 합 니 다.따라서 우 리 는 서로 다른 곡선 을 구별 하 는 근 거 를 제시 해 야 한다.이 근 거 는 바로'제품'필드 의 수치 이다.구체 적 으로 말 하면'제품'필드 에 몇 개의 서로 다른 수치 가 있 으 면 몇 개의 서로 다른 곡선 을 생 성 할 수 있다.

owcChart.SetData(OWC.ChartDimensionsEnum.chDimSeriesNames, 0, “ ”)

7.분류(X)축 라벨 과 수치(Y)축 라벨 에 대응 하 는 필드 를 확인 합 니 다.
먼저 owc Series 를 OWC 의 곡선 집합 으로 정의 한 다음 도표 의 모든 곡선 을 옮 겨 다 니 며'날짜'필드 의 값 을 분류(X)축 에 부여 하고'가격'필드 의 값 을 Y 축 눈금 라벨 로 부여 합 니 다.도표 에 곡선 이 하나 밖 에 없다 는 것 을 확인 할 수 있다 면 옮 겨 다 니 는 과정 도 생략 할 수 있 지만 프로그램의 유 니 버 설 성 을 떨 어 뜨 릴 수 밖 에 없다.

Dim owcSeries As OWC.WCSeries

For Each owcSeries In owcChart.SeriesCollection

owcSeries.SetData(OWC.ChartDimensionsEnum.chDimCategories, 0, “ ”)

owcSeries.SetData(OWC.ChartDimensionsEnum.chDimValues, 0, “ ”)

Next

8.좌표 축의 속성 을 설정 합 니 다.
이 부분 코드 는 좌표 축 제목 의 문자 내용,색상,크기,주요 및 부차적인 눈금 선과 그 라벨,주요 및 부차적인 네트워크 라인 등에 대한 설정 을 통 해 도 표를 미화 합 니 다.독자 가 만약 이 단락 코드 중의 개념 에 대해 약간 모호 하 다 면 앞부분 에서 제공 한 그 도 표를 참고 할 수 있다.구체 적 인 설정 방법 은 다음 코드 를 참조 하 시기 바 랍 니 다.

' axis

Dim axis As OWC.WCAxis

'

For Each axis In owcChart.Axes

'

axis.HasTitle = True

' (X)

If axis.Type=OWC.ChartAxisTypeEnum.

chCategoryAxis Then

axis.HasTickLabels = True

' X

axis.Position = OWC.ChartAxisPositionEnum.chAxisPositionBottom

'

axis.Title.Font.Color =”blue”

'X

axis.Title.Font.Size = “9”

'X

axis.Title.Caption = “ ”

'X

Else

' (Y)

axis.MajorGridlines.Line.Color = “silver”

'Y

axis.MajorTickMarks = OWC.ChartTickMarkEnum.chTickMarkNone

' Y

axis.HasTickLabels = True

' Y

axis.Title.Font.Color = “blue”

'Y

axis.Title.Font.Size = “9”

'Y

axis.Title.Caption=“ ( / )”

'Y

End If

Next

9.GIF 이미지 형식 으로 도 표를 출력 하고 이미지 파일 이름 을 Image 컨트롤 에 부여 합 니 다.

'

Randomize()

Dim nFileNameSuffix As Integer

Dim sFileNameSuffix As String

nFileNameSuffix = 100000 * Rnd()

sFileNameSuffix = System.Convert.ToString(nFileNameSuffix)

' GIF , 500*300, :polyesterprice_ .gif, chart

owcChartSpace.ExportPicture(MapPath(“chart/PolyesterPrice_”) + sFileNameSuffix + “.gif”, “gif”, 500, 300)

' Image URL

imgChart.ImageUrl=“chart/PolyesterPrice_” + sFileNameSuffix + “.gif”

상기 9 단 계 를 통 해 우 리 는 실시 간 데이터 베이스 도표 의 생 성과 표 시 를 완성 했다.여기 서 지적 해 야 할 것 은 상기 9 가지 절 차 는 도표 한 장 을 생 성 하 는 데 없어 서 는 안 될 기본 적 인 과정 일 뿐 이 고 OWC 의 다른 속성 을 설정 함으로써 도표 의 생 성과 표시 방식 을 더욱 정확 하고 정확하게 제어 할 수 있다 는 것 이다.예 를 들 어 그림,선의 굵기 와 색채,좌표 축 눈금 선과 라벨 의 표시 빈도,네트워크 라인 등 이다.이 부분 은 필자 가 더 이상 소개 하지 않 으 니 본 고의 네 번 째 부분의 소스 코드 를 참조 하 시기 바 랍 니 다.
본 논문 코드 가 생 성 된 도표 효 과 는 다음 그림 을 보십시오.

최적화 하 다.
위의 글 에서 실시 간 으로 생 성 된 도표 파일 은 모두 chart 폴 더 에 저장 되 어 있 으 며,무 작위 파일 이름 을 사용 하기 때문에 이 파일 들 은 서로 덮어 쓰 지 않 습 니 다.그러나 이렇게 쌓 이면 서 점점 더 많은 파일 들 이 하 드 디스크 공간 을 차지 할 뿐만 아니 라 관리 도 방해 하고 성능 도 떨 어 졌 다.우 리 는 프로그램 에서 이전의 도표 파일 을 자동 으로 삭제 할 수 있 습 니까?답 은 긍정 적 이다.우 리 는 코드 파일 의 PageLoad()함수 에 다음 코드 를 설치 하면 프로그램 이 실 행 될 때 당일 이전 파일 이 자동 으로 삭 제 됩 니 다.이렇게 해서 chart 폴 더 에 저 장 된 것 은 항상 당일 에 생 성 된 도표 파일 로 파일 쓰레기 를 효과적으로 피 할 수 있 습 니 다.

' chart

Dim fileEntries() As String = System.IO.Directory.GetFiles(MapPath(“chart”))

Dim sFile As String

'

For Each sFile In fileEntries

' , ,

If DateTime.Compare(System.IO.File.GetCreationTime(sFile).AddDays(1), DateTime.Now) < 0 Then

System.IO.File.Delete(sFile)

End If

Next

OWC 로 생 성 된 도표 의 기능 이 완비 되 고 인터페이스 가 아름 답지 만 결함 도 적지 않다.우선,OWC 는 DataSet 데이터 세트 를 지원 하지 않 습 니 다.그러면 우 리 는 도 표를 만 드 는 동시에 DataGrid 를 사용 하여 데이터 시트 를 표시 할 수 없습니다.Recordset 기록 이 집 중 된 모든 데 이 터 를 순환 적 으로 추출 하여 수 동 으로 표를 만 들 거나 같은 검색 조건 으로 데이터 베 이 스 를 2 차 검색 하지 않 는 한 서버 의 부담 을 증가 시 켜 야 합 니 다.그 다음으로 같은 도표 에서 그 려 진 곡선 은 같은 유형 일 수 있 거나 같은 평활 곡선 도 일 수 있 으 며 같은 막대 그래프 일 수 있 으 며 같은 도표 에서 서로 다른 유형의 곡선 을 표시 할 수 없다.마지막 으로 분류(X)축의 설정 과 같은 세부 적 인 부분 에서 OWC 는 더욱 상세 하고 인성 화 된 설정 경 로 를 제공 할 수 없다.만약 에 독자 가 더욱 강력 한 기능 과 더 좋 은 디 스 플레이 효 과 를 추구 하려 면 필 자 는 두 가지 전문 적 인.NET 기반 도표 컨트롤 을 추천 합 니 다.이 두 가지 컨트롤 은 각각 Dundas 와 Softwarefx 회사 에서 제작 되 고 모두 웹 Form 과 Win Form 개발 을 지원 합 니 다.다만 이 두 가지 컨트롤 은 모두 비용 을 지불 합 니 다.독자 가 관심 이 있 으 면 그들의 사이트 에 가서 DEMO 버 전 을 다운로드 하여 전문 도표 컨트롤 이 가 져 온 강력 한 기능 을 직접 체험 할 수 있다.

좋은 웹페이지 즐겨찾기