ASP.NET 웹 페이지 - 차트 도우미

차트 도우미 - 많은 유용한 ASP.NET 웹 도우미 중 하나입니다.

차트 도우미

이전 장에서는 ASP.NET의 "도우미"를 사용하는 방법을 배웠습니다.

"WebGrid Helper"를 사용하여 그리드에 데이터를 표시하는 방법을 이미 소개했습니다.

이 장에서는 "차트 도우미"를 사용하여 데이터를 그래픽 형식으로 표시하는 방법을 소개합니다.

"차트 도우미"는 다양한 서식 옵션과 레이블을 사용하여 다양한 유형의 차트 이미지를 만들 수 있습니다. 영역형 차트, 막대형 차트, 기둥형 차트, 꺾은선형 차트, 원형 차트 등의 표준 차트는 물론 주식형 차트와 같은 보다 전문적인 차트를 생성할 수 있습니다.

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

배열에서 차트 만들기

아래 예에서는 배열 데이터를 기반으로 차트를 표시하는 데 필요한 코드를 보여줍니다.

@{ 
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() 메소드 표시 the Chart

데이터베이스를 기반으로 차트 만들기

데이터베이스 쿼리를 실행한 다음 쿼리 결과의 데이터를 사용하여 차트를 만들 수 있습니다.

@{ 
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 데이터를 기반으로 차트 만들기

@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();
}