ASP.NET 웹 페이지 사용하여 차트에 데이터 표시(Razor)

아티클
07/13/2023

이 문서에서는 도우미를 사용하여 Chart 차트를 사용하여 ASP.NET 웹 페이지(Razor) 웹 사이트에 데이터를 표시하는 방법을 설명합니다.

학습할 내용:

차트에 데이터를 표시하는 방법입니다.

기본 제공 테마를 사용하여 차트의 스타일을 지정하는 방법

차트를 저장하는 방법과 더 나은 성능을 위해 차트를 캐시하는 방법입니다.

다음은 문서에 도입된 ASP.NET 프로그래밍 기능입니다.

도우미입니다 Chart .

참고

이 문서의 정보는 ASP.NET 웹 페이지 1.0 및 웹 페이지 2에 적용됩니다.

차트 도우미

데이터를 그래픽 형식으로 표시하려는 경우 도우미를 사용할 Chart 수 있습니다. 도우미는 Chart 다양한 차트 형식으로 데이터를 표시하는 이미지를 렌더링할 수 있습니다. 서식 지정 및 레이블 지정을 위한 다양한 옵션을 지원합니다. 도우미는 Chart Microsoft Excel 또는 기타 도구(영역 차트, 가로 막대형 차트, 세로 막대형 차트, 꺾은선형 차트 및 원형 차트)와 주식형 차트와 같은 보다 특수한 차트 등 익숙한 모든 유형의 차트를 포함하여 30가지 이상의 차트를 렌더링할 수 있습니다.

영역형 차트	가로 막대형 차트
세로 막대형 차트	꺾은선형 차트
원형 차트	주식형 차트

차트 요소

차트에는 범례, 축, 계열 등과 같은 데이터 및 추가 요소가 표시됩니다. 다음 그림에서는 도우미를 사용할 Chart 때 사용자 지정할 수 있는 많은 차트 요소를 보여줍니다. 이 문서에서는 이러한 요소의 일부(전부는 아님)를 설정하는 방법을 보여 줍니다.

설명: 차트 요소를 보여 주는 그림

데이터에서 차트 만들기

차트에 표시하는 데이터는 배열, 데이터베이스에서 반환된 결과 또는 XML 파일에 있는 데이터에서 가져올 수 있습니다.

배열 사용

Razor 구문을 사용하여 ASP.NET 웹 페이지 프로그래밍 소개에 설명된 대로 배열을 사용하면 유사한 항목의 컬렉션을 단일 변수에 저장할 수 있습니다. 배열을 사용하여 차트에 포함하려는 데이터를 포함할 수 있습니다.

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

ChartArrayBasic.cshtml이라는 새 파일을 만듭니다.
기존 콘텐츠를 다음으로 바꿉다.
```
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}
```
코드는 먼저 새 차트를 만들고 너비와 높이를 설정합니다. 메서드를 사용하여 차트 제목을 지정합니다 AddTitle . 데이터를 추가하려면 메서드를 AddSeries 사용합니다. 이 예제에서는 메서드의 name, xValue및 yValues 매개 변수를 AddSeries 사용합니다. name 매개 변수는 차트 범례에 표시됩니다. 매개 변수에는 xValue 차트의 가로 축을 따라 표시되는 데이터 배열이 포함되어 있습니다. 매개 변수에는 yValues 차트의 세로 점을 그리는 데 사용되는 데이터 배열이 포함되어 있습니다.

메서드는 Write 실제로 차트를 렌더링합니다. 이 경우 차트 종류를 지정하지 않았기 때문에 도우미는 Chart 기본 차트인 세로 막대형 차트를 렌더링합니다.
브라우저에서 페이지를 실행합니다. 브라우저에 차트가 표시됩니다.

차트 데이터에 데이터베이스 쿼리 사용

차트하려는 정보가 데이터베이스에 있는 경우 데이터베이스 쿼리를 실행한 다음, 결과의 데이터를 사용하여 차트를 만들 수 있습니다. 이 절차에서는 ASP.NET 웹 페이지 사이트에서 데이터베이스 작업 소개 문서에서 만든 데이터베이스의 데이터를 읽고 표시하는 방법을 보여줍니다.

폴더가 아직 없는 경우 웹 사이트의 루트에 App_Data 폴더를 추가합니다.
App_Data 폴더에 ASP.NET 웹 페이지 사이트에서 데이터베이스 작업 소개에 설명된 SmallBakery.sdf라는 데이터베이스 파일을 추가합니다.
ChartDataQuery.cshtml이라는 새 파일을 만듭니다.
기존 콘텐츠를 다음으로 바꿉다.
```
@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "Name")
        .Write();
}
```
코드는 먼저 SmallBakery 데이터베이스를 열고 라는 db변수에 할당합니다. 이 변수는 Database 데이터베이스에서 읽고 데이터베이스에 쓰는 데 사용할 수 있는 개체를 나타냅니다. 다음으로, 코드는 SQL 쿼리를 실행하여 각 제품의 이름과 가격을 가져옵니다. 코드는 새 차트를 만들고 차트의 DataBindTable 메서드를 호출하여 데이터베이스 쿼리를 전달합니다. 이 메서드는 두 개의 매개 변수 dataSource 를 사용합니다. 매개 변수는 쿼리의 데이터에 대한 것이며 xField 매개 변수를 사용하면 차트의 x축에 사용되는 데이터 열을 설정할 수 있습니다.

메서드를 사용하는 DataBindTable 대신 도우미의 메서드를 AddSeriesChart 사용할 수 있습니다. 메서드를 AddSeries 사용하면 및 yValues 매개 변수를 xValue 설정할 수 있습니다. 예를 들어 다음과 같이 메서드를 사용하는 대신 다음을 DataBindTable 수행합니다.
```
.DataBindTable(data, "Name")
```
다음과 같은 메서드를 AddSeries 사용할 수 있습니다.
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
둘 다 동일한 결과를 렌더링합니다. AddSeries 차트 종류와 데이터를 보다 명시적으로 지정할 수 있으므로 메서드가 더 유연하지만 DataBindTable 추가 유연성이 필요하지 않은 경우 메서드를 사용하기가 더 쉽습니다.
브라우저에서 페이지를 실행합니다.

XML 데이터 사용

차트에 대한 세 번째 옵션은 XML 파일을 차트의 데이터로 사용하는 것입니다. 이렇게 하려면 XML 파일에 XML 구조를 설명하는 스키마 파일(.xsd 파일)도 있어야 합니다. 이 절차에서는 XML 파일에서 데이터를 읽는 방법을 보여줍니다.

App_Data 폴더에서 data.xml이라는 새 XML 파일을 만듭니다.

기존 XML을 가상 회사의 직원에 대한 일부 XML 데이터인 다음으로 바꿉니다.

<?xml version="1.0" standalone="yes" ?>
<NewDataSet xmlns="http://tempuri.org/data.xsd">
    <Employee>
        <Name>Erin</Name>
        <Sales>10440</Sales>
    </Employee>
    <Employee>
        <Name>Kim</Name>
        <Sales>17772</Sales>
    </Employee>
    <Employee>
        <Name>Dean</Name>
        <Sales>23880</Sales>
    </Employee>
    <Employee>
        <Name>David</Name>
        <Sales>7663</Sales>
    </Employee>
    <Employee>
        <Name>Sanjay</Name>
        <Sales>21773</Sales>
    </Employee>
    <Employee>
        <Name>Michelle</Name>
        <Sales>32294</Sales>
    </Employee>
</NewDataSet>

App_Data 폴더에서 data.xsd라는 새 XML 파일을 만듭니다. (이번에는 확장이 .xsd입니다.)

기존 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"
                                type="xs:string"
                                minOccurs="0" />
                            <xs:element
                                name="Sales"
                                    type="xs:double"
                                    minOccurs="0" />
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:choice>
        </xs:complexType>
    </xs:element>
</xs:schema>

웹 사이트의 루트에서 ChartDataXML.cshtml이라는 새 파일을 만듭니다.
기존 콘텐츠를 다음으로 바꿉다.
```
@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 파일에서 읽은 데이터를 관리하고 스키마 파일의 정보에 따라 구성하는 데 사용됩니다. (코드의 맨 위에는 문이 using SystemData포함됩니다. 개체로 작업 DataSet 하려면 이 작업이 필요합니다. 자세한 내용은 이 문서의 뒷부 분에 있는 "Using" 문 및 정규화된 이름을 참조하세요.)

다음으로, 코드는 데이터 세트를 기반으로 개체를 만듭니다 DataView . 데이터 뷰는 차트가 바인딩할 수 있는 개체, 즉 읽기 및 플롯을 제공합니다. 차트는 배열 데이터를 차트로 작성할 때 앞에서 보았듯이 메서드를 사용하여 AddSeries 데이터에 바인딩됩니다. 이번에는 xValue 및 yValues 매개 변수가 개체로 설정된다는 점을 제외하면 DataView 입니다.

이 예제에서는 특정 차트 종류를 지정하는 방법도 보여줍니다. 메서드 chartType 에 데이터가 추가 AddSeries 되면 매개 변수도 원형 차트를 표시하도록 설정됩니다.
브라우저에서 페이지를 실행합니다.

팁

"Using" 문 및 정규화된 이름

Razor 구문을 사용하여 ASP.NET 웹 페이지 .NET Framework 수천 개의 구성 요소(클래스)로 구성됩니다. 이러한 모든 클래스를 관리하기 위해 라이브러리와 다소 유사한 네임스페이스로 구성됩니다. 예를 들어 System.Web 네임스페이스에는 브라우저/서버 통신을 지원하는 클래스가 포함되고, System.Xml 네임스페이스에는 XML 파일을 만들고 읽는 데 사용되는 클래스가 포함되며 System.Data , 네임스페이스에는 데이터로 작업할 수 있는 클래스가 포함되어 있습니다.

.NET Framework 지정된 클래스에 액세스하려면 코드에서 클래스 이름뿐만 아니라 클래스가 있는 네임스페이스도 알아야 합니다. 예를 들어 도우미를 Chart 사용하려면 코드에서 네임스페이 System.Web.Helpers.Chart 스()와 클래스 이름Chart(System.Web.Helpers)을 결합하는 클래스를 찾아야 합니다. 이를 클래스의 정규화된 이름이라고 하며, .NET Framework 범위 내에서 완전하고 명확한 위치라고 합니다. 코드에서는 다음과 같이 표시됩니다.

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

그러나 클래스 또는 도우미를 참조할 때마다 이러한 길고 정규화된 이름을 사용해야 하는 것은 번거롭고 오류가 발생하기 쉽습니다. 따라서 클래스 이름을 더 쉽게 사용하려면 관심 있는 네임스페이스를 가져올 수 있습니다. 일반적으로 .NET Framework 여러 네임스페이스 중에서 소수에 불과합니다. 네임스페이스를 가져온 경우 정규화된 이름() 대신 클래스 이름(ChartSystem.Web.Helpers.Chart)만 사용할 수 있습니다. 코드가 실행되고 클래스 이름이 발견되면 가져온 네임스페이스에서만 해당 클래스를 찾을 수 있습니다.

Razor 구문과 함께 ASP.NET 웹 페이지 사용하여 웹 페이지를 만드는 경우 일반적으로 클래스, 다양한 도우미 등을 포함하여 WebPage 매번 동일한 클래스 집합을 사용합니다. 웹 사이트를 만들 때마다 관련 네임스페이스를 가져오는 작업을 저장하려면 모든 웹 사이트에 대한 핵심 네임스페이스 집합을 자동으로 가져오도록 ASP.NET 구성됩니다. 따라서 네임스페이스를 처리하거나 지금까지 가져올 필요가 없었습니다. 작업한 모든 클래스는 이미 가져온 네임스페이스에 있습니다.

그러나 자동으로 가져오는 네임스페이스에 없는 클래스로 작업해야 하는 경우도 있습니다. 이 경우 해당 클래스의 정규화된 이름을 사용하거나 클래스가 포함된 네임스페이스를 수동으로 가져올 수 있습니다. 네임스페이스를 가져오려면 앞의 using 문서 예제에서 보았듯이 문(import Visual Basic의 경우)을 사용합니다.

예를 들어 클래스는 DataSet 네임스페이스에 있습니다 System.Data . System.Data 네임스페이스는 Razor 페이지를 ASP.NET 자동으로 사용할 수 없습니다. 따라서 정규화된 이름을 사용하여 클래스를 DataSet 사용하려면 다음과 같은 코드를 사용할 수 있습니다.

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

클래스를 DataSet 반복적으로 사용해야 하는 경우 다음과 같이 네임스페이스를 가져온 다음 코드에서 클래스 이름만 사용할 수 있습니다.

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

참조하려는 다른 .NET Framework 네임스페이스에 대한 문을 추가할 using 수 있습니다. 그러나 설명한 대로 작업할 대부분의 클래스는 .cshtml 및 .vbhtml 페이지에서 사용하기 위해 ASP.NET 자동으로 가져오는 네임스페이스에 있으므로 이 작업을 자주 수행할 필요가 없습니다.

웹 페이지 내부에 차트 표시

지금까지 본 예제에서는 차트를 만든 다음 차트를 그래픽으로 브라우저에 직접 렌더링합니다. 하지만 대부분의 경우 브라우저에서 단독으로만 차트를 표시하는 것이 아니라 페이지의 일부로 표시하려고 합니다. 이렇게 하려면 2단계 프로세스가 필요합니다. 첫 번째 단계는 이미 본 것처럼 차트를 생성하는 페이지를 만드는 것입니다.

두 번째 단계는 결과 이미지를 다른 페이지에 표시하는 것입니다. 이미지를 표시하려면 모든 이미지를 표시하는 것과 동일한 방식으로 HTML <img> 요소를 사용합니다. 그러나 요소는 .jpg 또는 .png 파일을 <img> 참조하는 대신 차트를 만드는 도우미가 포함된 .cshtml 파일을 참조합니다 Chart . 표시 페이지가 실행되면 <img> 요소는 도우미의 출력을 Chart 가져오고 차트를 렌더링합니다.

웹 페이지 내에 표시되는 차트의 스크린샷.

ShowChart.cshtml이라는 파일을 만듭니다.

기존 콘텐츠를 다음으로 바꿉다.

<!DOCTYPE html>
<html>
  <head>
    <title>Chart Example</title>
  </head>
  <body>
    <h1>Chart Example</h1>
    <p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
       in this page.</p>
    <p><img src="ChartArrayBasic.cshtml" /> </p>
  </body>
</html>

코드는 요소를 사용하여 <img>ChartArrayBasic.cshtml 파일의 앞부분에서 만든 차트를 표시합니다.

브라우저에서 웹 페이지를 실행합니다. ShowChart.cshtml 파일은 ChartArrayBasic.cshtml 파일에 포함된 코드를 기반으로 차트 이미지를 표시합니다.

차트 스타일 지정

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

다음 표에는 기본 제공 테마가 나와 있습니다.

테마	설명
`Vanilla`	흰색 배경에 빨간색 열을 표시합니다.
`Blue`	파란색 그라데이션 배경에 파란색 열을 표시합니다.
`Green`	녹색 그라데이션 배경에 파란색 열을 표시합니다.
`Yellow`	노란색 그라데이션 배경에 주황색 열을 표시합니다.
`Vanilla3D`	흰색 배경에 3D 빨간색 열을 표시합니다.

새 차트를 만들 때 사용할 테마를 지정할 수 있습니다.

ChartStyleGreen.cshtml이라는 새 파일을 만듭니다.

페이지의 기존 콘텐츠를 다음으로 바꿉다.

@{
    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("Product Sales")
        .DataBindTable(data, "Name")
        .Write();
}

이 코드는 데이터에 데이터베이스를 사용하는 이전 예제와 동일하지만 개체를 theme 만들 때 매개 변수를 Chart 추가합니다. 다음은 변경된 코드를 보여줍니다.

var myChart = new Chart(width: 600,
                    height: 400,
                    theme: ChartTheme.Green)

브라우저에서 페이지를 실행합니다. 이전과 동일한 데이터가 표시되지만 차트는 더 세련됩니다.

차트 저장

이 문서에서 지금까지 살펴본 것처럼 도우미를 사용하면 Chart 도우미가 호출될 때마다 처음부터 차트를 다시 만듭니다. 필요한 경우 차트의 코드는 데이터베이스를 다시 쿼리하거나 XML 파일을 다시 읽어 데이터를 가져옵니다. 경우에 따라 쿼리하는 데이터베이스가 크거나 XML 파일에 많은 데이터가 포함된 경우와 같이 복잡한 작업이 될 수 있습니다. 차트에 많은 데이터가 포함되지 않더라도 이미지를 동적으로 만드는 프로세스는 서버 리소스를 차지하며, 많은 사람들이 차트를 표시하는 페이지 또는 페이지를 요청하는 경우 웹 사이트의 성능에 영향을 미칠 수 있습니다.

차트 만들기의 잠재적 성능 영향을 줄이기 위해 차트를 처음 필요할 때 만든 다음 저장할 수 있습니다. 차트를 다시 생성하는 대신 다시 필요한 경우 저장된 버전을 가져와서 렌더링할 수 있습니다.

다음과 같은 방법으로 차트를 저장할 수 있습니다.

서버의 컴퓨터 메모리에 차트를 캐시합니다.
차트를 이미지 파일로 저장합니다.
차트를 XML 파일로 저장합니다. 이 옵션을 사용하면 차트를 저장하기 전에 수정할 수 있습니다.

차트 캐싱

차트를 만든 후에는 차트를 캐시할 수 있습니다. 차트를 캐시하면 차트를 다시 표시해야 하는 경우 다시 만들 필요가 없습니다. 캐시에 차트를 저장할 때 해당 차트에 고유해야 하는 키를 제공합니다.

서버의 메모리가 부족하면 캐시에 저장된 차트가 제거될 수 있습니다. 또한 어떤 이유로든 애플리케이션을 다시 시작하면 캐시가 지워집니다. 따라서 캐시된 차트를 사용하는 표준 방법은 캐시에서 사용할 수 있는지 여부를 항상 먼저 검사 다음, 그렇지 않은 경우 만들거나 다시 만드는 것입니다.

웹 사이트의 루트에서 ShowCachedChart.cshtml이라는 파일을 만듭니다.
기존 콘텐츠를 다음으로 바꿉다.
```
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
<body>
    <h1>Chart Example</h1>
    <img src="ChartSaveToCache.cshtml?key=myChartKey" />
    <p><a href="ClearCache.cshtml">Clear cache</a></p>
</body>
</html>
```
태그에는 <img>ChartSaveToCache.cshtml 파일을 가리키고 키를 쿼리 문자열로 페이지에 전달하는 특성이 포함 src 됩니다. 키에는 "myChartKey" 값이 포함됩니다. ChartSaveToCache.cshtml 파일에는 차트를 Chart 만드는 도우미가 포함되어 있습니다. 잠시 후에 이 페이지를 만듭니다.

페이지 끝에 ClearCache.cshtml이라는 페이지에 대한 링크가 있습니다. 곧 만들 페이지입니다. 이 예제에 대한 캐싱을 테스트하기 위해서만 ClearCache.cshtml 이 필요합니다. 캐시된 차트로 작업할 때 일반적으로 포함할 링크나 페이지가 아닙니다.
웹 사이트의 루트에서 ChartSaveToCache.cshtml이라는 새 파일을 만듭니다.
기존 콘텐츠를 다음으로 바꿉다.
```
@{
    var chartKey = 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: "Employee",
               axisLabel: "Name",
               xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
               yValues: new[] { "2", "6", "4", "5", "3" });
            cachedChart.SaveToCache(key: chartKey,
               minutesToCache: 2,
               slidingExpiration: false);
        }
        Chart.WriteFromCache(chartKey);
    }
}
```
코드는 먼저 쿼리 문자열의 키 값으로 전달된 항목이 있는지 여부를 확인합니다. 이 경우 코드는 메서드를 호출하고 키를 전달하여 캐시에서 차트를 GetFromCache 읽으려고 합니다. 해당 키 아래의 캐시에 아무것도 없는 것으로 확인되면(차트가 처음 요청될 때 발생함) 코드는 평소와 같이 차트를 만듭니다. 차트가 완료되면 코드는 를 호출 SaveToCache하여 캐시에 저장합니다. 이 메서드에는 키(나중에 차트를 요청할 수 있음)와 차트를 캐시에 저장해야 하는 시간이 필요합니다. (차트를 캐시하는 정확한 시간은 차트가 나타내는 데이터가 변경될 수 있다고 생각한 빈도에 따라 달라집니다.) 메서드에는 SaveToCache 매개 변수도 필요합니다 slidingExpiration . true로 설정하면 차트에 액세스할 때마다 시간 제한 카운터가 다시 설정됩니다. 이 경우 실제로 누군가가 차트에 마지막으로 액세스한 후 2분 후에 차트의 캐시 항목이 만료됩니다. (슬라이딩 만료의 대안은 절대 만료입니다. 즉, 캐시 항목은 액세스 빈도에 관계없이 캐시에 넣은 후 정확히 2분 후에 만료됩니다.)

마지막으로, 코드는 메서드를 WriteFromCache 사용하여 캐시에서 차트를 가져오고 렌더링합니다. 이 메서드는 캐시를 if 확인하는 블록 외부에 있습니다. 차트가 시작되었는지 아니면 캐시에 생성되어 저장되어야 했는지에 관계없이 캐시에서 차트를 가져오기 때문입니다.

예제에서 메서드에는 AddTitle 타임스탬프가 포함됩니다. (현재 날짜와 시간을 DateTime.Now 제목에 추가합니다.)
ClearCache.cshtml이라는 새 페이지를 만들고 해당 콘텐츠를 다음으로 바꿉니다.
```
@{
    WebCache.Remove("myChartKey");
}
<!DOCTYPE html>
<html lang="en">
  <body>
    <p>Cache has been cleared.</p>
    <p>Return to <a href="ShowCachedChart.cshtml">ShowCachedChart.cshtml</a></p>
  </body>
</html>
```
이 페이지에서는 도우미를 WebCache 사용하여 ChartSaveToCache.cshtml에 캐시된 차트를 제거합니다. 앞에서 설명한 대로 일반적으로 이와 같은 페이지가 필요하지 않습니다. 캐싱을 더 쉽게 테스트할 수 있도록 여기서만 만듭니다.
브라우저에서 ShowCachedChart.cshtml 웹 페이지를 실행합니다. 이 페이지에는 ChartSaveToCache.cshtml 파일에 포함된 코드를 기반으로 차트 이미지가 표시됩니다. 타임스탬프가 차트 제목에 표시되는 내용을 기록해 둡니다.
브라우저를 닫습니다.
ShowCachedChart.cshtml을 다시 실행합니다. 타임스탬프는 이전과 같으며, 이는 차트가 다시 생성되지 않고 캐시에서 읽은 것이 아니라는 것을 나타냅니다.
ShowCachedChart.cshtml에서 캐시 지우기 링크를 클릭합니다. 이렇게 하면 캐시가 지워졌는지 보고하는 ClearCache.cshtml로 이동합니다.
ShowCachedChart.cshtml로 돌아가기 링크를 클릭하거나 WebMatrix에서 ShowCachedChart.cshtml을 다시 실행합니다. 이번에는 캐시가 지워졌기 때문에 타임스탬프가 변경되었습니다. 따라서 코드는 차트를 다시 생성하고 캐시에 다시 넣어야 했습니다.

차트를 이미지 파일로 저장

차트를 서버에 이미지 파일(예: .jpg 파일)로 저장할 수도 있습니다. 그런 다음 이미지와 같은 방식으로 이미지 파일을 사용할 수 있습니다. 이점은 파일이 임시 캐시에 저장되지 않고 저장됩니다. 새 차트 이미지를 다른 시간(예: 매시간)에 저장한 다음 시간이 지남에 따라 발생하는 변경 내용에 대한 영구 레코드를 유지할 수 있습니다. 웹 애플리케이션에 이미지 파일을 배치하려는 서버의 폴더에 파일을 저장할 수 있는 권한이 있는지 확인해야 합니다.

웹 사이트의 루트에 _ChartFiles 폴더가 아직 없는 경우 만듭니다.
웹 사이트의 루트에서 ChartSave.cshtml이라는 새 파일을 만듭니다.