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();
}
- 새 차트 는 새 차트 개체를 만들고 너비와 높이를 설정합니다.
- 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에 저장합니다.
- 새 차트 는 차트 새 개체를 만들고 너비와 높이를 설정합니다.
- 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();}
}
차트 개체 참조
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |