ASP.NET 웹 페이지 차트
차트 도우미 - 많은 유용한 ASP.NET 웹 도우미 중 하나.
차트 도우미
이전 장에서는 ASP.NET의 사용 방법을 배웠다 "도우미를."
이미 그리드에 데이터를 표시하기 위해 "WebGrid 도우미"를 사용하는 방법을 설명했다.
이 장에서는 그래픽 데이터를 표시 "차트 도우미"를 사용하는 방법에 대해 설명합니다.
"차트 도우미"서식 옵션의 다양성과 차트 이미지와 라벨의 다른 유형을 만들 수 있습니다. 그것은 영역 차트, 막대 차트, 컬럼 차트, 라인 차트, 원형 차트 및 기타 표준을 만들 수 있습니다, 그것은 주식 차트 등보다 전문적인 차트를 만들 수 있습니다.
데이터 배열에서 그래프로 표시 될 수 있고, 데이터는 데이터베이스 나 파일이다.
배열을 기반으로 차트를 만들
다음 예는 배열에서 데이터를 차트에 필요한 코드를 보여줍니다 :
예
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
- 그래프 유형 파라미터는 차트의 유형을 정의
-이름에 xValue 매개 변수는 x 축 정의
- 이름yValues 파라미터 y 축을 정의
- 쓰기 () 메소드는 차트를 표시합니다
데이터베이스를 기반으로 차트를 만들
넌 차트를 생성하기 위해 데이터베이스 쿼리를 수행하고, 데이터 쿼리 결과를 사용할 수있다 :
예
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();
}
»인스턴스를 실행
- 바르 dB = 데이터베이스를 열 Database.Open (변수 데시벨에 할당 된 데이터베이스 개체)
- 바르 dbdata = db.Query 데이터베이스 쿼리를 수행하고 dbdata에 결과를 저장
- 새로운 차트는 새 차트 객체를 생성하고 그 폭과 높이를 설정
- AddTitle 방법은 차트 제목을 지정합니다
- DataBindTable 방법 차트에 데이터 소스를 바인딩
- 쓰기 () 메소드는 차트를 표시합니다
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 파일을 사용하여 차트를 작성하는 것입니다 :
예
@{
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();}
}
»인스턴스를 실행