Chart Control 시작하기 3
ASP.NET / 2008. 12. 4. 14:24
Chart Control을 조금 더 뽀대나가 3D 로 만들어 보기다.(별로 이쁘진 않은것 같음)
Chart Control의 3D 설정은 2가지 방법이 있는데 cs 에서 하는 방법과 html 에서 하는 방법이 있다.
먼저 cs 에서 하는 방법은
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;
--> 차트컨트롤ID.CharAreas[Name 또는 인덱스].Area3DStyle.Enable3D = boolean;
html 에서 하는 방법은
<Area3DStyle Enable3D=true />
3D의 속성은 현재 10가지가 있다.
아래 표는 ChartArea3DStyle class의 10가지 속성이다.
실제 적용된 소스를 보면
다음과 같은 3D 차트가 나오게 된다.
Chart Control의 3D 설정은 2가지 방법이 있는데 cs 에서 하는 방법과 html 에서 하는 방법이 있다.
먼저 cs 에서 하는 방법은
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;
--> 차트컨트롤ID.CharAreas[Name 또는 인덱스].Area3DStyle.Enable3D = boolean;
html 에서 하는 방법은
<Area3DStyle Enable3D=true />
3D의 속성은 현재 10가지가 있다.
아래 표는 ChartArea3DStyle class의 10가지 속성이다.
| Enable3D | 3D 를 사용 할 것인지(Bool) |
| Inclination | Y축 회전(int) |
| Rotation | X축 회전(int) |
| IsClustered | 같은 종류의 컬럼끼리 묶기 |
| IsRightAngleAxes | 잘 모름(bool) |
| LightStyle | 조명 정하기(LightStyle) |
| Perspective | 원근감(int) |
| PointDepth | 얼마나 3D 효과를 줄 것인지?(int) |
| PointGapDepth | 앞 뒤 막대들 사이의 거리(int) |
| WallWidth | 벽 두께. 차트를 약간 기울이고 보면 벽이 생기는걸 확인 할 수 있음(int) |
실제 적용된 소스를 보면
| <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> <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"> //3D 스타일 설정하는 부분 <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="false" Enable3D="true" WallWidth="0" PointDepth="100" IsClustered="false" PointGapDepth="300" /> <AxisY> <LabelStyle Format="C0" /> <MajorGrid LineColor="64,64,64,64" /> </AxisY> <AxisX> <LabelStyle Format="MM-dd" /> <MajorGrid LineColor="64,64,64,64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart> |
다음과 같은 3D 차트가 나오게 된다.