ASP.NET Web Pages - Chart 도구

Chart - 많은 유용한 ASP.NET Web 도구 중 하나입니다.

Chart 도구

이전 장에서는 ASP.NET “도구”를 사용하는 방법을 배웠습니다.

이제 “WebGrid 도구”를 사용하여 데이터를 그리드에 표시하는 방법을 배웠습니다.

이 장에서는 “Chart 도구”를 사용하여 데이터를 그래프에 표시하는 방법을 설명합니다.

“Chart 도구”는 여러 형식과 태그를 통해 다양한 유형의 그래프 이미지를 생성할 수 있습니다. 이는 표준 그래프(예: 면적 그래프, 바 그래프, 막대 그래프, 선 그래프, 파이 그래프)와 더 전문적인 그래프(예: 주식 가격 그래프)를 포함합니다.

그래프에 표시되는 데이터는 배열, 데이터베이스 또는 파일에서 가져온 데이터일 수 있습니다.

배열에서 가져온 그래프

다음 예제에서는 배열에서 데이터를 가져와 그래프를 표시하는 코드를 보여줍니다:

예제

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

예제 실행

new Chart 새로운 그래프 객체를 생성하고 너비와 높이를 설정합니다.

AddTitle 메서드는 그래프의 제목을 정의합니다.

AddSeries 메서드는 데이터를 그래프에 추가합니다.

chartType 파라미터는 그래프의 유형을 정의합니다.

xValue 파라미터는 x축의 값을 정의합니다.

yValues 파라미터는 y축의 값을 정의합니다.

Write() 메서드는 그래프를 표시합니다.

데이터베이스에서 가져온 그래프

먼저 데이터베이스 쿼리를 한 번 실행한 후, 결과 데이터를 사용하여 그래프를 생성할 수 있습니다:

예제

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

예제 실행

var db = Database.Open 데이터베이스를 열고(데이터베이스 객체를 변수 db에 할당합니다).

var dbdata = db.Query 데이터베이스 쿼리를 실행하고 결과를 dbdata에 저장합니다.

new Chart 새로운 그래프 객체를 생성하고 너비와 높이를 설정합니다.

AddTitle 메서드는 그래프의 제목을 정의합니다.

DataBindTable 메서드는 데이터 소스를 그래프에 바인딩합니다.

Write() 메서드는 그래프를 표시합니다.

DataBindTable 메서드의 대안으로는 AddSeries를 사용하십시오(이전 예제를 참조하세요). DataBindTable는 더 쉽게 사용할 수 있지만, AddSeries는 더 강력한 확장성을 가지고 있으며, 이는 그래프와 데이터를 더 정확하게 정의할 수 있기 때문입니다:

예제

@{ 
var db = Database.Open("SmallBakery"); 
var dbdata = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

예제 실행

XML 데이터의 차트

차트를 생성하는 세 번째 옵션은 XML 파일을 데이터로 사용하는 것입니다:

예제

@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("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();}
}

예제 실행