Chart Control 시작하기 2
ASP.NET / 2008. 12. 4. 13:01
Chart Control 에 속성 값을 줘서 디자인을 꾸미는 방법이다.
Chart 클래스에서 몇 가지의 속성을 나열 해보면
| BackColor | 배경색 지정 |
| BackGradientStyle | 배경의 변화도 |
| BackHatchStyle | 배경 무늬(?) (개인적인 생각으로는 이걸 설정하면 되게 안이쁘게 나옴) |
| BackImage | 배경 이미지 |
| BorderColor | 테두리 색깔 |
| BorderWidth | 테두리 두깨 |
| Height | 높이 |
| BackSecondaryColor | 배경색(2번째 색)(BackColor 와 함께 배경을 이룸) |
| ImageLocation | 렌더링 될 때 이미지 파일이 저장될 경로 |
| Palette | 말 그대로 빠레트(?) 어느 파레트에 그릴 것인가. |
| Width | 길이 |
훨씬 많지만 간단히 꾸밀 수 있는 속성 값은 이정도 이다.
실제 적용된 html 소스를 보면
| <asp:Chart ID="Chart1" runat="server" Palette="BrightPastel" BackColor="#F3DFC1" Width="412px" Height="296" BorderlineDashStyle="Solid" BackGradientStyle="TopBottom" BorderlineWidth="2" BorderlineColor="181, 64, 1"> <Titles> //차트에 타이틀을 설정한다. <asp:Title ShadowColor="32,0,0,0" Font="Trebuchet MS, 14.24pt, style=Bold" ShadowOffset="3" Text="Column Chart" Name="Title1" ForeColor="26, 59, 105"></asp:Title> </Titles> <Legends> //설명을 설정한다. <asp:Legend TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="false" Enabled="false" Name="Default"> </asp:Legend> </Legends> <BorderSkin SkinStyle="Emboss" /> //테두리에 스킨을 입혔다. <Series> //데이터를 입력하는 곳 : 기본적으로 Chart 컨트롤은 Series 를 만들어서 데이터를 입력한다 <asp:Series XValueType="DateTime" Name="Series1" BorderColor="180, 26, 59, 105"> <Points> //데이터를 임의로 넣었다. <asp:DataPoint XValue="36890" YValues="32" /> <asp:DataPoint XValue="36891" YValues="56" /> <asp:DataPoint XValue="36892" YValues="35" /> <asp:DataPoint XValue="36893" YValues="12" /> <asp:DataPoint XValue="36894" YValues="35" /> <asp:DataPoint XValue="36895" YValues="6" /> <asp:DataPoint XValue="36896" YValues="23" /> </Points> </asp:Series> <asp:Series XValueType="DateTime" Name="Series2" BorderColor="180,26,59,105"> <Points> <asp:DataPoint XValue="36890" YValues="67" /> <asp:DataPoint XValue="36891" YValues="24" /> <asp:DataPoint XValue="36892" YValues="12" /> <asp:DataPoint XValue="36893" YValues="8" /> <asp:DataPoint XValue="36894" YValues="46" /> <asp:DataPoint XValue="36895" YValues="14" /> <asp:DataPoint XValue="36896" YValues="76" /> </Points> </asp:Series> </Series> <ChartAreas> //차트를 뿌릴 공간 <asp:ChartArea Name="ChartArea1" BorderColor="64,64,64,64" BackSecondaryColor="White" BackColor="OldLace" ShadowColor="Transparent" BackGradientStyle="TopBottom"> <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="false" WallWidth="0" IsClustered="false" /> <AxisY LineColor="64,64,64,64" LabelAutoFitMaxFontSize="8"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" Format="C0" /> <MajorGrid LineColor="64,64,64,64" /> </AxisY> <AxisX LineColor="64,64,64,64" LabelAutoFitMaxFontSize="8"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" Format="MM-dd" /> <MajorGrid LineColor="64,64,64,64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart> |
CS 코드는 따로 작성하지 않았다.
적용된 디자인을 살펴보면
이렇게 적용 되었다. (예제 소스랑 똑같이 만든 차트임)