SonMan's IT BBS: C# WebForm : MS Chart 사용하기

원래는 .Net 으로 웹에서 차트를 구현하기 위해서는 별도의 컴포넌트를 사용해야만 차트를 구현할 수 있었지만, 2012 버젼 부터인가... 그 때 부터는 MSChart 를 별도로 설치 해서 사용 할 수 있었으며, 2013 부터는 아예 패키지에 포함이 되어 있다.

별로 사용하지 않는것인지... 별로 쓴걸 본적은 없다.
사실 기능이 좀 상용 툴에 비해서 좀 떨어지기도 하고...
하지만, 간단한 그래프 정도라면 사용하는데 별 무리 없다.

2013 Express 이상에선 그냥 사용하면 된다.

도구상자에서 "Chart" 라는 항목을 끌어다 쓰면 된다.
이렇게 소스에 삽입하면...

이렇게 자동으로 html 영역에 소스가 추가 된다.
하지만, 이걸 웹브라우져로 보면...

이런 오류가 뜬다.
하여간 뭔가 추가될때 마다 쉽게 쓰게 해주질 않는다...

요건 Web.config 를 수정해 주어야 한다.

<?xml version="1.0"?>
<configuration>
 
  <system.web>
    <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        validate="false" />
    </httpHandlers>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
    </pages>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
  </system.web>

  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;" />
  </appSettings>

  <system.webServer>
    <handlers>
      <add name="ChartImg" verb="*" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
    <validation validateIntegratedModeConfiguration="false" />
  </system.webServer>
 
</configuration>

어떤건 자동으로 등록되고 어떤건 자동으로 등록되지 않아서 골치 아프다.
암튼 이렇게 Web.config 까지 수정하고 페이지를 다시 열어 보면...

이렇게 빈 페이지가 표시됨.
사실은 차트 이미지가 있지만, 데이터가 없어 아무것도 안나오고 있는 것.

소스를 보면 저렿게 차트 이미지가 있음.
이제 데이터만 등록하면 됨.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Drawing;
using System.Web.UI.DataVisualization.Charting;

public partial class web_Tmp_Chart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Chart1.Legends.Add("Legend");
        Chart1.Width = 1000;
        Chart1.Height = 300;

        Chart1.ChartAreas[0].AxisX.IsStartedFromZero = true;

        Title chartTitle = new Title("Son10001 Chart Test", Docking.Top, new Font("", 12, FontStyle.Bold), Color.FromArgb(26, 59, 105));
        Chart1.Titles.Add(chartTitle);

        Chart1.Series[0].Points.AddXY(0, 5);
        Chart1.Series[0].Points.AddXY(10, 80);
        Chart1.Series[0].Points.AddXY(20, 80);
        Chart1.Series[0].Points.AddXY(30, 10);
        Chart1.Series[0].Points.AddXY(40, 90);

        Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
        Chart1.BorderColor = Color.FromArgb(26, 59, 105);
        Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
        Chart1.BorderWidth = 1;
    }
}

데이터는 요렇게 등록.
이렇게 샘플 데이터를 등록하면...