TAEYO.NET

비록 지금은 난데없이 온 꽃샘추위 때문에 엉망인 날씨 속에서 글을 쓰고 있지만 이 글이 포스팅 된 시점에는 벛꽃이 완연한 봄이 아닐까 싶네요. 그.러.나. 프로그래머 여러분들은 날이 좋을수록 벛꽃 따위 버리고 공부에 열중해야 합니다. 특히 커플들이 많을 벛꽃 축제 따위 인정 못합니다. 솔로 프로그래머의 살길은 공부뿐....

괜히 쓸데없는 소리로 글을 시작했습니다만. 이번 글에서 살펴볼 내용이 적기 때문은 아닙니다. 흠흠...

아무튼 이번 글에서 살펴볼 내용은 방사형 차트입니다. 소위 말하는 5각형, 6각형, 8각형 그래프 등등등 입니다. 방사형 차트가 무엇인지 모르더라도 위닝일레븐 같은 스포츠 게임이나 각종 시뮬레이션 게임에서 선수나 유닛의 능력 등을 보여주는 데 많이 쓰이는 차트 형태이므로 그 모습을 한 번쯤은 보셨으리라 생각합니다. 이처럼 방사형 차트는 어떠한 하나의 대상의 여러 가지 정보를 한눈에 보여주는 데 많이 사용됩니다. 그럼 방사형 차트가 어떻게 생긴 차트인지 살펴보겠습니다.

<asp:Chart ID="Chart1" runat="server">
  <series>
    <asp:Series ChartType="Radar" Name="Series1" />
  </series>
  <chartareas>
    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
  </chartareas>
</asp:Chart>

protected void Page_Load(object sender, EventArgs e)

{

Random rand = new Random();

for (int i = 0; i < 10; i++)

{

Chart1.Series[0].Points.AddY(rand.Next(100));

}

출력된 결과가 그리 보기 좋진 않지만 어떠한 형태의 차트인지 아는 데는 부족함이 없는 결과가 나왔습니다. 우선 방사형 차트는 ChartType을 Radar로 설정함으로써 사용이 가능합니다. 그리고 다른 차트 처럼 Series에 Y값을 채워 줌으로서 필요한 모든 작업이 완료됩니다. 몇 각형 몇 각형 하는 방사형 그래프의 위치 설정은 컨트롤에서 모두 해 주기 때문에 이를 고려해야 할 필요성은 없습니다. 일단 기본 골격이라고 할만한 코드는 이것으로 끝입니다. 하지만 이것으로 실제 사용하기에는 그 모습이 너무 안타깝네요. 이번에는 그 모양을 좀 더 다듬어 보겠습니다.

<asp:Chart ID="Chart1" runat="server" ImageType="Png">
  <series>
    <asp:Series ChartType="Radar" BorderColor="120, 30, 30, 30"
       ShadowOffset="1" Name="Series1"></asp:Series>
    <asp:Series ChartType="Radar" BorderColor="120, 30, 30, 30"
       ShadowOffset="1" Name="Series2"></asp:Series>
  </series>
  <chartareas>
    <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderWidth="0">
      <axisy LineColor="64, 64, 64, 64">
        <LabelStyle Font="맑은 고딕, style=Bold" />
        <MajorGrid LineColor="64, 64, 64, 64" />
      </axisy>
      <axisx LineColor="64, 64, 64, 64">
        <LabelStyle Font="맑은 고딕, style=Bold" />
        <MajorGrid LineColor="64, 64, 64, 64" />
      </axisx>
    </asp:ChartArea>
  </chartareas>
</asp:Chart>

protected void Page_Load(object sender, EventArgs e)

{

Random rand = new Random();

string[] valueX = { "Str", "Int", "Dex", "Luk", "Def", "Exp" };

for (int i = 0; i < 6; i++)

{

Chart1.Series[0].Points.AddXY(valueX[i], rand.Next(100));

Chart1.Series[1].Points.AddXY(valueX[i], rand.Next(100));

}

Chart1.Series[0].Color = Color.FromArgb(220, Color.DodgerBlue);

Chart1.Series[1].Color = Color.FromArgb(220, Color.Tomato);

}

어설프게 나마 롤플레잉 게임의 캐릭터 상태를 보여주는 방사형 그래프를 만들어 보았습니다. 방금 전의 그래프보다는 보기가 좀 더 낫지만 뭔가 부족하긴 하네요. 아무튼 이번 코드에서 확인할 수 있는 점을 하나하나 살펴보도록 하겠습니다.

우선 방사형 차트는 Series의 ChartType을 Radar로 설정해 주면 사용이 가능합니다. 그리고 ChartType의 이름처럼 비행기 계기판의 레이더처럼 생긴 격자 선을 XY좌표계에서 사용한 것 처럼 X축과 Y축을 변경해주면 이 역시 동일하게 적용이 가능함을 확인할 수 있습니다. 또 하나 그래프에서 알파 값을 120으로 주어 투명한 색을 사용한 부분을 주목해 봅시다. 보통 2차원의 그래프는 투명한 색보다는 불투명한 색을 사용하는 것이 효과적이지만 방사형 그래프의 경우 복수의 Series를 사용하게 되면 필연적으로 두 Series의 겹치는 영역이 많아지게 됩니다. 그러한 경우를 고려해 투명한 색상의 사용을 고려하는 것이 좋겠네요.

그렇다면 단순히 투명한 색을 사용해서 겹쳐지는 상황을 타개할 수 있을까요? 당연히 도 여러 가지 형태의 방사형 그래프를 제공하기 때문에 다른 방식을 취하면 여러 Series를 사용하는 방사형 그래프에서 겹쳐질 때의 문제를 해결할 수 있습니다. 다음에 살펴볼 예제에서는 다양한 방사형 그래프를 살펴 보겠습니다.

<asp:Chart ID="Chart1" runat="server" ImageType="Png">
  <series>
    <asp:Series ChartType="Radar" BorderColor="120, 30, 30, 30"
       ShadowOffset="1" Name="Series1"></asp:Series>
    <asp:Series ChartType="Radar" BorderWidth="4" BorderColor="120, 30, 30, 30"
       ShadowOffset="1" Name="Series2"></asp:Series>
    <asp:Series ChartType="Radar" MarkerSize="15" BorderWidth="2"
       MarkerStyle="Diamond" BorderColor="120, 30, 30, 30" ShadowOffset="1"
        Name="Series3" />
   </series>
   <chartareas>
     <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderWidth="0">
       <area3dstyle Rotation="10" perspective="10" Inclination="15"
         IsRightAngleAxes="False" wallwidth="0" IsClustered="False" />
       <axisy LineColor="64, 64, 64, 64">
         <LabelStyle Font="aaaaa, style=Bold" />
         <MajorGrid LineColor="64, 64, 64, 64" />
       </axisy>
       <axisx LineColor="64, 64, 64, 64">
         <LabelStyle Font="aaaaa, style=Bold" />
         <MajorGrid LineColor="64, 64, 64, 64" />
       </axisx>
    </asp:ChartArea>
  </chartareas>
</asp:Chart>

protected void Page_Load(object sender, EventArgs e)

{

Random rand = new Random();

string[] valueX = { "Str", "Int", "Dex", "Luk", "Def", "Exp" };

for (int i = 0; i < 6; i++)

{

Chart1.Series[0].Points.AddXY(valueX[i], rand.Next(100));

Chart1.Series[1].Points.AddXY(valueX[i], rand.Next(100));

Chart1.Series[2].Points.AddXY(valueX[i], rand.Next(100));

}

Chart1.Series[0].Color = Color.FromArgb(220, Color.DodgerBlue);

Chart1.Series[1].Color = Color.FromArgb(220, Color.Tomato);

Chart1.Series[2].Color = Color.FromArgb(220, Color.Violet);

Chart1.Series[0]["RadarDrawingStyle"] = "Area";

Chart1.Series[1]["RadarDrawingStyle"] = "Line";

Chart1.Series[2]["RadarDrawingStyle"] = "Marker";

Chart1.Series[0]["AreaDrawingStyle"] = "Polygon";

Chart1.Series[0]["CircularLabelsStyle"] = "Circular";

}

쓸데없이 이런 저런 요소를 우겨 넣은 까닭인지 별로 보기엔 좋지 않지만 세 개의 Series의 값 분포를 확인하는 데는 별 무리가 없습니다. 그럼 이번 예제에서 사용된 부분에 대해서 살펴보죠.

위의 코드를 이용해 방사형 차트에서 제공하는 그리기 방법을 모두 써 보았습니다. 애트리뷰트의 이름처럼 영역, 선, 마커를 사용해 방사형 그래프에서 표현하고자 하는 값을 표현합니다. HTML 코드를 보면 각각의 형태를 꾸며주는 값의 사용이 있으니 이를 참고 하시기 바랍니다. HTML 코드의 내용은 그다지 어려운 부분이 없으니 제 도움이 없더라도 이해하시리라 믿습니다. 마커의 경우에는 선형 그래프에서 사용했던 것 처럼 여러가지 형태의 마커를 사용할 수 있습니다. 이번 예제에서는 다이아몬드형의 마커를 사용했습니다.(MarkerStyle="Diamond")

그리고 이 코드를 사용하여 격자선의 모양을 원형에서 육각형의 벌집 모양으로 변경했습니다. "Circle"로 설정하면 원래의 형태로도 가능하지만 기본값이 원형이므로 이 값을 쓸 경우는 그다지 많지 않겠네요.(윈도우즈 응용프로그램에서 차트 컨트롤을 사용한다면 유용할지도 모르겠지만요.)

그리고 이 코드를 사용해 외곽에 표시되는 Label을 원형으로 배치했습니다. 어떤 의미인지 모르시겠다면 두 번째 예제의 Label과 세 번째 예제의 Label을 비교해서 살펴보시기 바랍니다. 두 번째 예제에서는 위치에 관계없이 수평으로 Label을 표시하고(Horizontal) 세 번째 예제에서는 원을 기준으로 90도 각도로(Circular) Label을 표시합니다. 이 밖에도 Radial이라는 값도 있으니 사용해 보시기 바랍니다. Radial은 Label을 원의 중심과 직선으로 표시합니다. 단순히 특성 값을 바꾸기만 하는 부분이므로 특성 값을 바꾸어 확인해 보시기 바랍니다.

이것으로 다른 글보다는 조금 짧은 내용으로 방사형 차트에 관한 글을 마치겠습니다. 방사형 차트에도 3차원 형태가 지원된다면 조금 더 쓸 거리가 생기겠지만 방사형 차트는 차트의 특성상 3차원 형태의 그래프는 지원하지 않습니다. 그 핑계로 방사형 차트에 대한 글은 이 정도로 마무리 하겠습니다.