WebMatrix 7장 - 차트(Chart)에 데이터 표시

[루돌프]

7 - 차트에 데이터 표시

이 장에서는 Chart에 데이터를 표시하는 방법을 설명합니다.

이전 챕터에서 수동으로 데이터를 표시하는 방법을 그리드에 배웠습니다. 이 장에서는 Chart Helper를 사용하여 데이터를 표시하는 방법을 설명합니다.

무엇을 배우는가:

1. Chart에 데이터를 표시하는 방법.
2. 스타일 Chart를 사용하여 기본 테마 구축.
3. Chart를 저장하고, 더 나은 성능을 위해 캐시하는 방법.

이들은 장에서 소개 ASP.NET 프로그래밍 기능입니다 :

• Chart Helper.

1. Chart Helper
당신은 그래픽 형태로 데이터를 표시하려는 경우 Chart Helper를 사용할 수 있습니다. Chart Helper가 Chart 종류의 다양한 데이터를 표시하는 이미지를 렌더링할 수 있습니다. 그것은 형식 및 라벨링에 대한 다양한 옵션을 지원합니다. Chart Helper는 Microsoft Excel 또는 다른 도구에서 잘 알고있을 Chart의 모든 유형을 포함 30 개 이상의 Chart  - 영역 Chart, 막대 Chart, 컬럼 Chart, 라인 Chart와 파이 Chart, 함께 주식 Chart 같은 전문적인 종류를 렌더링할 수 있는 Chart.

Area Chart	Bar Chart
Column Chart	Line Chart
Pie Chart	Stock Chart

2. Chart 요소
Chart는 데이터와 범례(Lengend), 축(Axis), 개별항(Series), 등등 같은 추가 요소를 표시합니다. 다음 그림은 당신이 Chart Helper를 사용하면 사용자 정의할 수있는 Chart 요소 중 많은 것들을 보여줍니다. 이 장에서는 이러한 요소 중 일부(모두 아님)를 설치하는 방법을 보여줍니다. 
 

3. 데이터에서 Chart 만들기
데이터베이스에서 반환된 결과 또는 XML 파일에 데이터, 배열의 데이터로부터 차트에 표시할 수 있습니다.

3-1. 배열을 사용하여
Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 입문의 제 2 장에 설명된대로 , 배열은 하나의 변수에 유사한 항목의 컬렉션을 저장할 수 있습니다. 당신은 Chart에 포함할 데이터를 포함하는 배열을 사용할 수 있습니다.

이 절차는 기본 Chart 유형을 사용하여 배열의 데이터에서 Chart를 만드는 방법을 보여줍니다. 또한 페이지 내에서 Chart를 표시하는 방법을 보여줍니다.

1. ChartArrayBasic.cshtml라는 새 파일을 만듭니다.
   
2. 다음과 같이 기존 코드를 교체합니다 :
   

   @{
       var myChart = new Chart(width: 600, height: 400)
           .AddTitle("실전 차트 만들기")
           .AddSeries(
               name: "종원원",
               xValue: new[] { "이부장", "이팀장", "장대리","조항연", "김희순", "이은자"},
               yValues: new[] {"2", "6", "3", "8", "4", "9"} )
            .Write();
   } 

   
   이 코드는 먼저 새 Chart를 만들 어서 그 넓이와 높이를 설정합니다. 당신은 AddTitle 메서드를 사용하여 Chart의 제목을 지정합니다. 데이터를 추가하려면, 당신은 AddSeries 메서드를 사용합니다. 이 예제에서는, 당신은 AddSeries 메서드의 매개 변수와 yValues​​, xValue, 이름을 사용합니다. 이름 매개 변수는 Chart의 범례에 표시됩니다. xValue 매개 변수는 Chart의 수평 축을 따라 표시되는 데이터의 배열을 포함하고 있습니다. yValues​​ 매개 변수는 Chart의 수직 포인트를 계획하는 데 사용의 데이터 배열을 포함하고 있습니다.
   
   Write(); 메서드는 실제로 Chart를 렌더링. 이 경우에 Chart 유형을 지정하지 않았기 때문에, Chart Helper 렌더링의 기본인 세로 막대형 Chart입니다.
   
3. 브라우저에서 실행한 페이지입니다. (페이지를 실행하기 전에 파일 작업 영역에서 선택되어 있는지 확인합니다.) 브라우저가 Chart를 표시합니다.
   
   
   

3-2. Chart 데이터에 데이터베이스 쿼리를 사용
Chart에 원하는 정보가 데이터베이스에 있으면, 당신은 데이터베이스 쿼리를 실행할 수 있습니다. Chart를 만들 결과에 데이터베이스를 사용합니다. 이 절차에서는 이전 예제에서 만든 데이터를 Chart로 보여줍니다.

1. 웹사이트의 루트에 Add App_Data 폴더에 데이터가가 아직 존재하지 않는 경우.
   
2. App_Data 폴더에 제 5 장에서 만든 SmallBakery.sdf라는 이름의 데이터베이스 파일을 추가합니다.
   
3. 웹루트에 ChartDataQuery.cshtml라는 새 파일을 만듭니다.
   
4.  다음과 같이 기존 코드를 교체합니다:
   

   @{
       var db = Database.Open("SmallBakery");
       var data = db.Query("SELECT Name, Price FROM Product");
       var myChart = new Chart(width: 600, height: 400)
           .AddTitle("판매 상품")
           .DataBindTable(dataSource: data, xField: "Name")
           .Write();
   } 

   
   이 코드는 먼저 SmallBakery 데이터베이스를 열고 dB라는 변수에 할당합니다. 이 변수에서 읽고 쓸 데이터베이스에 사용할 수있는 데이터베이스 개체를 나타냅니다. 그런 다음 코드는 이름과 각 제품의 가격을 가져오기 위해 SQL 쿼리를 실행합니다. 이 코드는 새로운 Chart를 생성하고 Chart의 DataBindTable 메서드를 호출하여 그것을 데이터베이스 쿼리를 전달합니다. 이 메서드는 두 가지 매개 변수를 사용: 데이터 소스 매개 변수는 쿼리에서 가져온 데이터, 그리고 xField 매개 변수에 사용되는 데이터 Column은 Chart의 X 축에 사용되도록 설정할 수 있습니다.
   
   DataBindTable 방법을 사용하여 대안으로, Chart Herper의 AddSeries 메서드를 사용할 수 있습니다. AddSeries 메서드는 xValue과 yValues​​ 매개 변수를 설정할 수 있습니다. 예를 들어, 대신 이렇게 DataBindTable 방법을 사용하여 :
   

   .DataBindTable(data, "Name") 

   
   이렇게 AddSeries 메서드를 사용할 수 있습니다 :
   

   .AddSeries("Default", 
       xValue: data, xField: "Name",  yValues: data, yFields: "Price") 

   
   모두 같은 결과를 렌더링합니다. 좀 더 명시적으로 Chart 종류와 데이터를 지정할 수 있기 때문에 AddSeries 방법이 있지만, 더 유연 DataBindTable 방법은 많은 유연성이 필요하지 않으면 사용하기 쉽습니다.
   
5. 브라우저에서 실행한 페이지입니다.
   
   

3-3. Chart에 XML 데이터를 사용
Chart에 대한 세 번째 옵션은 Chart의 데이터로 XML 파일을 사용하는 것입니다. 이것은 XML 파일은 XML 데이터 구조를 설명하는 스키마(Schema) 파일 (. XSD를 파일)을 가지고 있어야합니다. 이 절차는 어떻게 XML 파일에서 데이터를 읽는 방법을 보여줍니다.

1. App_Data 폴더 data.xml이라는 새 XML 파일을 만듭니다.
   
2. 가상의 회사에서 직원에 대한 XML 데이터는 다음과 기존 XML를 대체합니다.
   

   <?xml version="1.0" standalone="yes" ?>
   <NewDataSet xmlns="http://tempuri.org/data.xsd">
       <Employee>
           <Name>정연우</Name>
           <Sales>5000</Sales>
       </Employee>
       <Employee>
           <Name>정연일</Name>
           <Sales>4000</Sales>
       </Employee>
       <Employee>
           <Name>정연재</Name>
           <Sales>3000</Sales>
       </Employee>
       <Employee>
           <Name>정우화</Name>
           <Sales>6000</Sales>
       </Employee>
       <Employee>
           <Name>황진숙</Name>
           <Sales>4000</Sales>
       </Employee>
   </NewDataSet>
    

   
   
3. App_Data 폴더 data.xsd이라는 새 XML 파일을 만듭니다. (확장자 .xsd를사용합니다.)
   
4. 다음과 기존 XML을 교체합니다 :
   

   <?xml version="1.0" ?>
   <xs:schema>
       id="NewDataSet"
       targetNamespace="http://tempuri.org/data.xsd"
       xmlns:mstns="http://tempuri.org/data.xsd"
       xmlns="http://tempuri.org/data.xsd"
       xmlns:xs="http://www.w3.org/2001/XMLSchema"
       xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"
       attributeFormDefault="qualified"
       elementFormDefault="qualified">
       <xs:element name="NewDataSet">
           msdata:IsDataSet="true"
           msdata:EnforceConstraints="false">
          <xs:complexType>
               <xs:choice maxOccurs="unbounded">
                   <xs:element name="Employee">
                       <xs:complexType>
                           <xs:sequence>
                               <xs:element
                                   name = "Name"
                                   minOccurs="0: />
                           </xs:sequence>
                       </xs:complexType>
                   </xs:element>
               </xs:choice>
          </xs:complexType>
       </xs:element>
   </xs:schema>
    

   
   
5. 웹사이트의 루트에, ChartDataXML.cshtml라는 새 파일을 만듭니다.
   
6. 다음과 같이 기존 코드를 교체합니다:
   

   @using System.Data; 
   @{ 
       var dataSet = new DataSet(); 
       dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd")); 
       dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml")); 
       var dataView = new DataView(dataSet.Tables[0]); 
    
       var myChart = new Chart(width: 600, height: 400) 
           .AddTitle("Sales Per Employee") 
           .AddSeries("Default", chartType: "Pie", 
               xValue: dataView, xField: "Name", 
               yValues: dataView, yFields: "Sales") 
           .Write(); 
   } 

   
   이 코드는 먼저 DataSet 개체가 만들어집니다. 이 개체는 XML 파일에서 읽을 수 있고 스키마 파일의 정보에 따라 그것을 구성하는 데이터를 관리하는 데 사용됩니다. (코드의 맨 위에는 SystemData를 사용하는 문장을 포함합니다. 이것은 DataSet 개체와 함께 작동합니다.)
   
   다음 코드는 데이터 집합에 따라 DataView 개체를 만듭니다. 데이터 뷰는 차트가 읽고, 뛰우는바인드 할 수있는 개체를 공급합니다.  xValue과 yValues​​ 매개 변수가 DataView 개체에 설정된 것을 제외하고는 배열 데이터에서 Chart할 때 이전에 본대로, AddSeries 메서드를 사용하여 데이터에 바인딩합니다.
   
   이 예제는 또한 특정 Chart 유형을 지정하는 방법을 보여줍니다. 데이터가 AddSeries 메서드에 추가되면, chartType 매개 변수는 또한 원형 Chart를 표시하도록 설정되어 있습니다.
   
   
7. 브라우저에서 실행한  페이지입니다.
   
   
   

"Using" 문과 완전히 공인된 이름 

Razor 구문과 ASP.NET 웹 페이지의 기반이되는. NET Framework는 수천 구성 요소(클래스) 구성되어 있습니다. 그것은 모든 클래스에서 작동하도록 관리하려면, 라이브러리 같은 네임 스페이스로 구성됩니다. 예를 들어,

System.Web 네임 스페이스는 브라우저/서버와 통신합니다.

System.Xml 네임 스페이스는 생성 및 XML 파일을 읽는 데 사용되는 클래스가 들어있는 클래스를 포함합니다.

System.Data 네임 스페이스는 데이터와 함께 작업하는 클래스가 포함되어 있습니다.

. NET Framework에서 특정 클래스를 접근하기 위해서는 코드가 아니라 클래스 이름을뿐만 아니라, 클래스가 속해있는 네임 스페이스를 알아야합니다. Chart Helper를 사용하려면 클래스 이름(Chart)과 네임 스페이스(System.Web.Helpers)를 결합합니다. Web.Helpers.Chart 클래스. . NET Framework의 광대한 내용에 모호하지 않은 위치- 이것은 클래스의 정규화된 이름으로 알려져있다. 코드에서, 이것은 다음과 같이합니다 :

var myChart = new System.Web.Helpers.Chart(width: 600, height: 400)

그러나, 그것은 (그리고 오류가 발생하기 쉬운)이 긴, 정규화된 이름은 당신이 클래스 또는 Helper를 참조할 때마다 사용해야하는 성가신 일입니다. 따라서 쉽게 클래스 이름을 사용할 수 있도록, 당신은. NET Framework의 여러 네임 스페이스 중에서 단지 관심있는 네임 스페이스를 가져올 수 있습니다. 당신은 네임 스페이스를 가져온 적이있다면, 당신은 정규화된 이름 (System.Web.Helpers.Chart) 대신 단지 클래스 이름(Chart)을 사용할 수 있습니다. 귀하의 코드를 실행하면 클래스 이름을 만나면, 그것은 그 클래스를 찾기 위해 네임 스페이스에서 찾아볼 수 있습니다.

웹 페이지를 만들 Razor 구문으로 ASP.NET 웹 페이지를 사용하면 일반적으로 웹페이지 클래스, 다양한 헬퍼를 포함한 클래스를 사용합니다. 그것은 자동적으로 모든 웹 사이트에 대한 핵심적인 네임 스페이스의 집합을 가져옵니다. 그래서 당신에게 해당 네임 스페이스에 당신이 웹사이트를 만들 때마다 작업을 저장하면, ASP.NET은 자동으로 구성됩니다. 그것은 당신이 네임 스페이스를 처리하거나 지금까지 가져올 필요가 없었던 이유, 당신이 누려 왔던 모든 편리함은 이미 당신을 위해 가져온 네임 스페이스에 있습니다.

그러나, 가끔은 자동으로 네임 스페이스를 가져오지 않는 클래스와 함께 작업해야합니다. 이 경우, 당신도 그 클래스의 정규화된 이름을 사용하거나 수동으로 클래스를 포함하는 네임 스페이스를 가져올 수 있습니다. 당신은 이전 장에서 예제에서 본 것 같은 네임 스페이스를 가져오려면, 당신은, "Using" 문을사용합니다.

예를 들어, DataSet 클래스는 System.Data 네임 스페이스에 있습니다. System.Data 네임 스페이스가 자동으로 ASP.NET Razor 페이지를 사용할 수 없습니다. 따라서,이 같은 코드를 사용할 수의 정규화된 이름을 사용하여 DataSet 클래스와 함께 작업 :

var dataSet = new System.Data.DataSet();

당신이 반복적으로이 같은 네임 스페이스를 가져올 수있는 DataSet 클래스를 사용하여 다음 코드에서 단지 클래스 이름을 사용하는 경우 :

@using System.Data;
@{
    var dataSet = new DataSet();
    // etc.
}

.NET Framework의 네임 스페이스는 참조하려는 다른 Class에 "Using" 문을 추가할 수 있습니다. 당신이 할 수있는 Class는 대부분 사용하기 위해 ASP.NET에 의해 자동으로 가져온 네임 스페이스에 있기 때문에 자주 이렇게 할 필요가 없습니다.

4. 웹 페이지 내부에 Chart 표현
지금까지 본 예제에서, 당신은 Chart를 만든 다음 Chart는 그래픽으로 브라우저에 직접 표시됩니다. 대부분의 경우, 비록 그 자체 브라우저에 의해 페이지의 일부로 Chart를 표시하려면. 두 단계 프로세스를 필요로합니다. 첫 번째 단계는 이미 본 적이 있는 것으로 Chart를 생성하는 페이지를 작성하는 것입니다.

두 번째 단계는 다른 페이지에 나타나는 이미지를 표시하는 것입니다. 이미지를 표시하려면, 당신은 어떤 이미지를 표시한 방법으로 HTML <img> 요소 같은 것을 사용합니다. 그러나 . jpg 또는. PNG를 참조하는 대신에 <img> 요소는 차트를 만드는 Chart Helper를 포함하는 .csHtml 파일을 참조합니다. 디스플레이 페이지가 실행되면, <img> 요소는 Chart Helper의 출력을 얻고 Chart를 렌더링합니다.

1. ShowChart.cshtml라는 파일을 만듭니다.
   
2. 다음과 같이 기존 코드를 교체합니다:
   

   <!DOCTYPE html>
   <html>
     <head>
       <title>Chart Example</title>
     </head>
     <body>
       <h1>차트 샘플입니다</h1>
       <p>다음의 차는는  <em>ChartArrayBasic.cshtml</em> 파일에서 만들어진 것입니다. 그러나 이 페이지에서 보입니다..</p>
       <p><img src="ChartArrayBasic.cshtml" /> </p>
     </body>
   </html> 

   
   
   코드 ChartArrayBasic.cshtml 파일에서 이전에 만든 Chart를 표시하려면 <img> 요소를 사용합니다.
   
3. 브라우저에서 웹페이지를 실행합니다. ShowChart.cshtml 파일은 ChartArrayBasic.cshtml 파일에 포함된 코드를 기반으로 Chart 이미지가 표시됩니다.
   
   

5. Chart 스타일링

Chart Helper는 Chart의 모양을 사용자 정의할 수 있도록 옵션을 다수를 지원합니다. 당신은 색상, 글꼴, 테두리, 등을 설정할 수 있습니다. Chart의 모양을 사용자 정의하는 쉬운 방법은 테마를 사용하는 것입니다. 테마는 글꼴, 색상, 라벨, 팔레트, 테두리, 및 효과를 사용하여 Chart를 렌더링하는 방법을 지정하는 정보의 모음입니다. (Chart의 스타일이 Chart의 유형을 표시하지 않습니다.)

테마	설명
Vanilla	흰색 바탕에 붉은 기둥 표시
Blue	파란색으로 표시. 파란색 그라디언트 배경에 파란색 기둥
Green	녹색 표시. 녹색 그라디언트 배경에 파란색 기둥
Yello	노란 그라데이션 배경에 노란색 표시. 오렌지 열
Vanilla3D	흰색 배경에 3D 붉은 기둥

당신은 새로운 Chart를 만들 때 사용할 수있는 테마를 지정할 수 있습니다.

1. ChartStyleGreen.cshtml라는 새 파일을 만듭니다.
   
2. 기본 마크업과 코드를 다음과 같이 교체합니다:
   

   @{
       var db = Database.Open("SmallBakery");
       var data = db.Query("SELECT Name, Price FROM Product");
       var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
           .AddTitle("판매 상품")
           .DataBindTable(data, "Name")
           .Write();
   } 

   
   이 코드는 데이터에 대한 데이터베이스를 사용하여 이전 예제와 동일하지만 Chart 개체를 만들 때 테마 매개 변수를 추가합니다. 다음은 변경된 코드를 보여줍니다 :
   
3.  브라우저에서 페이지를 실행시킵니다. 이전과 같은 데이터를 볼 수있는 차트가 더 세련된 외모를 갖췄습니다:
   
   
   

6. Chart 저장
이 장에서 지금까지 본 대로 차트 Helper를 사용하면, Helper는 처음부터 그것은 호출의 때마다 다시 Chart를 만듭니다. 필요한 경우, 또한 Chart에 대한 코드를 다시 데이터베이스 또는 다시 데이터를 얻을 수있는 XML 파일을 읽고 쿼리합니다. 어떤 경우에는, 이 같은 경우 데이터베이스가 크거나 XML 파일의 데이터가 많이 포함되어있는 경우 같은 복잡한 작업이 될 수 있습니다. Chart의 데이터를 많이 포함하지 않더라도 많은 사람들이 페이지 또는 Chart를 표시할 페이지를 요청하면, 동적으로 이미지를 만드는 과정은 서버 리소스를 차지하고, 귀하의 웹사이트의 성능에 영향이있을 수 있습니다.

Chart를 만드는 잠재적인 성능 저하를 줄일 수 있도록, 당신은 Chart를 처음 만든 다음 그것을 저장합니다. Chart가 다시 필요하면 당신은 단지 저장된 버전을 렌더링하여 그것을 가져올 수 있습니다.

이런 방법으로 Chart를 저장할 수 있습니다:

• 컴퓨터 캐시 메모리 (서버)에있는 Chart.
• 이미지 파일로 Chart를 저장합니다.
• XML 파일로 Chart를 저장합니다. 이 옵션은 당신이 그것을 저장하기 전에 당신이 Chart를 수정할 수 있습니다.

6-1. Chart를 캐싱

Chart를 생성한 후, 캐시에 그것을 저장할 수 있습니다. Chart를 캐싱하여 다시 표시해야 할 경우 다시 만들 수 없다는 것을 의미합니다. 당신은 캐시에 Chart를 저장할 때 Chart에 대한 고유한 Key 값이 있어야 합니다.

서버가 메모리가 부족하면 캐시에 저장된 Chart를 제거될 수 있습니다. 또한, 캐시가 어떠한 이유로도 귀하의 응용 프로그램을 다시 시작하는 경우 지워집니다. 따라서 표준적인 방법은 Chart가 항상 캐시될 수 있는지, 아닌지 그리고 다시 차트를 만들수 있는지를 먼저 확인하는 것이 필요합니다.

1. 귀하의 웹사이트 루트에, ShowCachedChart.cshtml라는 파일을 만듭니다.
   
2. 다음과 같이 기존 코드를 교체합니다:
   

   <!DOCTYPE html>
   <html>
       <head>
           <title>Chart Example</title>
       </head>
   <body>
       <h1>캐쉬드 차트 샘플</h1>
       <img src="ChartSaveToCache.cshtml?Key=mychartKey" />
   </body>
   </html> 

   
   <img> 태그 ChartSaveToCache.cshtml 파일을 가리키는 및 쿼리 문자열로 페이지에 Key를 전달하는 src 특성을 포함합니다. 키 값 "myChartKey"를 포함하고 있습니다.
   ChartSaveToCache.cshtml 파일은 Chart를 만드는 Chart Helper가 포함되어 있습니다. 당신은 다음에이 페이지를 만들어드립니다.
   
3. 웹사이트 루트에, ChartSaveToCache.cshtml라는 새 파일을 만듭니다.
   
4. 다음과 같이 기존 코드를 교체합니다:
   

    @{
       var charKey = request["key"];
       if (chartkey != null){
           var cachedChart = Chart.GetFromCache(key: chartkey);
           if (cachedChart == null){
               cachedChart = new Chart(600, 400);
               cachedChart.AddTitle("Cached Chart --Cached at" + DateTime.Now);
               cachedChart.AddSeries(
                   name: "종업원",
                   axisLabel: "Name",
                   xValue: new[] {"우화", "춘자", "월화", "권화"}
                   yValues: new[] {"2", "6", "4", "3"}
               cachedChart.SaveToCache(key: chartkey,
                   minutesToCache: 2,
                   slidingExpiration: false;
                }
              Chart.WriteFromCache(chartkey);
           }
     }

   
   코드는 쿼리 문자열의 key value로 전달되었는지 여부를 첫번째 확인합니다. 그렇다면, 코드는 GetFromCache 메서드를 호출하고 key를 전달하여 캐시의 Chart를 읽으려고합니다. 그것은 키에 아무것도 없다는 것이 밝혀지면(Chart의 요청이 처음일 경우), 코드는 평소처럼 Chart를 만듭니다. Chart가 완료되면, 코드는 SaveToCache를 호출하여 캐시에 저장합니다. 그 방법은 Chart가(그래서 Chart는 나중에 요청되어질 수 있습니다) key 및 캐시에 저장해야되는 시간을 필요로합니다. SaveToCache 메서드는 slidingExpiration 매개 변수가 필요합니다 - 이것은 true로 설정되어있는 경우, 제한 시간 카운터 때마다 Chart를 다시 설정하기위해 액세스할 수 있습니다. 이 경우에는 그것은 Chart의 캐시 항목이 사람이 Chart를 액세스한 마지막 시간 2 분 후 만료되는 것을 의미합니다. (슬라이딩 만료는 그것이 캐시에 넣은 후에 얼마나 자주 읽혀는지 상관없이 정확히 2 분 만료 것을 의미, 절대 만료됩니다.)
   
   마지막으로, 코드를 페치하고 캐시에서 Chart를 렌더링에 WriteFromCache 메서드를 사용합니다. 이 Chart는 처음부터 만들어 졋는지 또는 캐시에 저장되어 있던 것이던지와는 상관없이 캐시에서 Chart를 얻을 것이기 때문에, 캐시를 검사하는 블록 밖에 위치합니다.
   
   공지 사항: 이 예제에서, AddTitle 메서드는 타임 스탬프를 포함합니다. (DateTime.Now - 그것은 현재의 날짜와 시간을 추가합니다.)
   
5. 브라우저에서 ShowCachedChart.cshtml 웹 페이지를 실행합니다. 페이지가 ChartSaveToCache.cshtml 파일에 포함된 코드를 기반으로 Chart 이미지가 표시됩니다. 타임 스탬프가 Chart 제목에 cache된 시간을 기록해 둡니다.
   
   
   
6. 브라우저를 닫습니다.
   
7. 다시 ShowCachedChart.cshtml을 실행합니다. 타임 스탬프가 이전처럼, 캐시된 시간이 동일합니다. Chart가 생성되지 않았음을 나타내며, 대신 캐시에서 읽을 수 있습니다.
   
8. WebMatrix의 리본에있는 홈 탭의 사이트 그룹에서, 다시 시작을 누릅니다. 중지하고 다음 웹 사이트 응용 프로그램을 재시작하는 효과를 가지고 IIS에서 Express를 다시 시작합니다.
   
9. ShowCachedChart.cshtml를 다시 시작합니다. 응용 프로그램은 또한 캐시를 지우는 다시 시작을 하기 때문에 이번에는 타임 스탬프가 변경되었습니다. 따라서 코드는 Chart를 다시 생성하고 캐시에 다시 넣어야 했습니다.

6.2. 이미지 파일로 Chart를 저장
당신은 또한 서버에 이미지(예를 들어,  파일을 .JPG) 파일로 Chart를 저장할 수 있습니다. 그런 다음 이미지는 모든 이미지 파일 방식으로로 사용할 수 있습니다. 장점은 파일이 아닌 저장된 임시 캐시에 저장됩니다. 당신은 다른 시간 (예를 들어, 매 시간마다)에 새로운 Chart 이미지를 저장하고 다음 시간이 지남에 발생하는 변경 사항을 영구적으로 기록을 유지할 수 있습니다. 귀하의 웹 응용 프로그램은 이미지 파일을 저장하고 싶은 서버의 폴더에 파일을 저장할 수있는 권한을 가지고 있는지 확인해야합니다.

1.  웹사이트 루트에, 그것은 이미 존재하지 않는 경우 _ChartFiles라는 이름의 폴더를 만듭니다.
   
2. 웹사이트 루트에, ChartSave.cshtml라는 새 파일을 만듭니다.
   
3. 다음과 같이 기존 코드를 교체합니다:
   

    @{
       var filePathName = "_ChartFiles/chart01.jpg";
       if (!File.Exists(Server.MapPath(filePathName))) {
           var chartImage = new Chart(600, 400);
           chartImage.AddTitle("차트를 화일에 저장");
           chartImage.AddSeries(
               name: "종업원",
                   axisLabel: "Name",
                   xValue: new[] {"우화", "춘자", "월화", "권화"},
                   yValues: new[] {"2", "6", "4", "3"});
           chartImage.Save(path: filePathName);
       }
   }

   <!DOCTYPE html>
   <html>
       <head>
           <title>Chart Example</title>
       </head>
       <body>
           <img src="@filePathName" />
       </body>
   </html>

   
   코드는 첫번째 File.Exists 메서드를 호출하여 .JPG 파일은 존재 여부를 확인할 수 있습니다. 파일이 존재하지 않는 경우, 코드는 배열에서 새 Chart를 만듭니다. 이번 코드는 저장 메서드를 호출하고 Chart를 저장하는 위치의 파일 경로와 파일 이름을 지정하는 경로 매개 변수를 전달합니다. 페이지의 본문에, <img> 요소가 표시됩니다. JPG 파일을 가리 키도록 경로를 사용합니다.
   
4. ChartSave.cshtml를 브라우저에서 실행합니다.
   
    

6-3. XML 파일로 Chart를 저장
마지막으로, 당신은 서버에서 XML 파일로서 Chart를 저장할 수 있습니다. 이 메서드를 사용하는 잇점은

Chart 캐싱을 통해 사용하거나 파일에 Chart를 저장하는 것에서 당신이 원한다면 Chart를 표시하기 전에 XML을 수정할 수 있습니다. 응용 프로그램에서 이미지 파일을 저장하는 서버의 폴더에 대한 읽기/쓰기 권한을 가지고 있어야합니다.

1. 웹사이트 루트에, ChartSaveXml.cshtml라는 새 파일을 만듭니다.
   
2.  다음과 같이 기존 코드를 교체합니다:
   

   @{
       Chart chartXml;
       var filePathName = "_ChartFiles/XmlChart.xml";
       if (File.Exists(Server.MapPath(filePathName))){
           chartXml = new Chart(600, 400, themePath: filePathName);
       }
       else{
           charXml = new Chart(600, 400);
           chartXml.AddTitle("차트 제목--저장 중  " + DateTime.Now);
           chartXml.Addseries(
                name: "종업원",
                axisLabel: "Name",
                xValue: new[] {"이부장", "황실장", "이팀장", "강차장"},
                yValues: new[] {"2", "6", "4", "3"});
           chartXml.SaveXml(path: filePathName);
       }
       chartXml.Write();
   } 

   
   이 코드는 당신이 본 코드와 유사한 것을 제외하고는 XML 파일을 사용하여 캐시에서 Chart를 저장합니다. 코드는 첫번째는 XML 파일 File.Exists 메서드를 호출하여 존재 여부를 확인할 수 있습니다. 파일이 존재하는 경우에는 코드가 새로운 Chart 개체를 생성하고 themePath 매개 변수로 파일 이름을 전달합니다. 이것은  XML 파일에 따라 Chart를 만듭니다. XML 파일이 이미 존재하지 않는 경우, 코드는 평상시처럼 Chart를 만든 다음 그것을 저장 SaveXml 호출합니다. Chart는 전에 본 적이 있듯이,이 방법을 쓰기를 사용하여 표시됩니다.
   
3. 캐싱을 보여주는 페이지와 마찬가지로,이 코드는 Chart 제목에 타임 스탬프를 포함합니다. ChartDisplayXMLChart.cshtml라는 새 페이지를 만들고 다음 마크업을 추가 :
   

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <title>Display chart from XML</title>
     </head>
     <body>
       <img src="ChartSaveXML.cshtml" />
     </body>
   </html> 

   
   
4. .Run ChartDisplayXMLChart.cshtml 페이지. Chart가 표시됩니다. Chart의 제목에있는 타임 스탬프 기록해 둡니다.
   
5. 브라우저를 닫습니다.
   
6. WebMatrix에 오른쪽 단추로 누르고 새로 고침, _ChartFiles 폴더를 누른 다음 폴더를 엽니다. 이 폴더에 XMLChart.xml 파일은 Chart Helper에서 만들어졌습니다.
   
7. 다시 ChartDisplayXMLChart.cshtml 페이지를 실행합니다. Chart는 페이지를 실행 처음과 동일한 타임 스탬프를 보여줍니다. Chart는 이전에 저장한 XML에서 생성되고 있기 때문입니다.
   
   
8. WebMatrix에 있는 _ChartFiles 폴더를 열고 XMLChart.xml 파일을 삭제합니다.
   
9. ChartDisplayXMLChart.cshtml 페이지를 한 번 더 실행합니다. Chart Helper는 XML 파일을 재현했기 때문에이 시간, 타임 스탬프가 업데이 트됩니다. 당신이 원한다면, XML 파일이 돌아가는 _ChartFiles 폴더와 화일을 확인하시기 바랍니다.