차트 도우미 - 많은 유용한 ASP.NET 웹 도우미 중 하나입니다.
차트 도우미
이전 장에서, 당신은 ASP.NET 사용하는 방법을 배웠다 "Helper" .
당신은 사용 그리드에 데이터를 표시하는 방법을 배웠다 "WebGrid Helper" .
이 장에서는 사용하여 그래픽 형태로 데이터를 표시하는 방법을 설명합니다 "Chart Helper" .
"Chart 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() 메소드는 차트를 표시합니다
데이터베이스 데이터에서 차트
당신은 차트를 작성하는 결과 데이터를 사용 후, 데이터베이스 쿼리를 실행할 수 있습니다 :
예
@{
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();}
} »실행 예