HighCharts 도표 컨트롤 이 ASP.NET WebForm 에서 의 사용 요약(전체)
7376 단어 하 이 차 트 도표
Highcarts 는 순수한 JavaScript 로 작 성 된 도표 라 이브 러 리 로 웹 사이트 나 웹 응용 프로그램 에 상호작용 이 있 는 도 표를 간편 하 게 추가 할 수 있 으 며 개인 학습,개인 사이트 와 비 상업 적 용도 로 무료 로 사용 할 수 있 습 니 다.현재 하 이 차 트 가 지원 하 는 도표 유형 은 곡선 도,구역 도,기둥 모양 도,떡 모양 도,산 상 점도 와 종합 도표 가 있다.
HighCharts 사용 원 리 는 다음 그림 과 같다.
일반 개발 모드 는 Jquery 와 HighChartsJS 라 이브 러 리 파일 을 전단 에 적용 한 다음머리 에 Js 스 크 립 트 를 쓰 는 것 입 니 다.예 를 들 어 떡 그림 Jquery 스 크 립 트 를 그 리 는 것 은 다음 과 같 습 니 다.
떡 그림 Jquery 스 크 립 트 그리 기
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
전단 코드 양 이 너무 많 습 니 다.
동적 데 이 터 를 연결 하 는 것 이 어렵 습 니 다.취 할 수 있 는 방법 은$AJAX 비동기 방법 으로 웹 서비스 나 일반 처리 프로그램 ashx 를 분석 한 다음 에 결 과 를 되 돌려 주 는 JSON 직렬 화 처리 하 는 것 입 니 다.귀 찮 고 오류 가 발생 하기 쉽 습 니 다.
HighCharts 의 Js 호출 코드 는 코드 재 활용 이 불가능 합 니 다.
해결 방안 은 제3자 HighCharts 구성 요소 DoNet.HighCharts 를 사용 하 는 것 입 니 다.이 구성 요 소 는 서버 에서 HighCharts Js 스 크 립 트 를 생 성 하 는 오픈 소스 구성 요소 입 니 다.그리고 출력 흐름 을 통 해 페이지 Body 블록의 DIV 에 삽입 합 니 다.원 리 는 다음 그림 과 같 습 니 다.
DoNet.HighCharts 개발 환경 은(둘 중 하나)
VS2008+ASP.NET MVC3+.NET 3.5
VS2010+.NET 4.0
DoNet.HighCharts 오픈 소스 프로젝트 는 ASP.NET MVC 3 Project 형식 으로 배 포 됩 니 다.개발 자 는 컨트롤 러 폴 더 Controllers 의 DemoController 에 있 는 모든 도표 의 배경 코드(프런트 HighCharts JS 코드 와 기본적으로 일치 함)를 참고 할 수 있 습 니 다.
MVC 원 리 는 프로그래머 가 이 코드 를 읽 을 수 있 도록 간단하게 설명 한다.
M:Module 모형 층
V:보기 층
C:컨트롤 제어 층
클 라 이언 트 가 Action 동작 을 보 낼 때 동작 명 에 따라 control 컨트롤 러 에 해당 하 는 방법 명 을 찾 습 니 다.예 를 들 어http://localhost/Charts/Demo/BasicLineMVC 프레임 워 크 는 전역 경로 설정 에 따라 Basic Line 컨트롤 러 방법 에 자동 으로 매 핑 됩 니 다.컨트롤 러 방법 은 Result 를 되 돌려 주 고 Views 폴 더 의 같은 이름 의 보기 Basic Line.cshtml(cshtml 는 WebForm 의 aspx 로 이해 할 수 있 습 니 다)로 탐색 한 다음 보 기 를 불 러 옵 니 다.
Asp.net 뮤 직 비디오 c 와 Asp.net Web Form 방식 이 다 르 기 때문에 상기 MVC 실현 방식 은 수정 해 야 WebForm 에서 사용 할 수 있 습 니 다.다음은'각종 제품 의 평균 가격 통계 기능'막대 그래프(NorthWind 데이터베이스 와 관련 된 Products 와 Categories 표)를 예 로 들 어 WebForm 에서 DoNet.HighCharts 를 어떻게 사용 하 는 지 설명 한다.
1: 조회 보기 만 들 기 ViewCategoryAvgPrice
2: 강 한 이름 데이터 세트 만 들 기 NorthWind.xsd
데이터 세트 는 강 한 이름 데이터 세트 와 약 한 이름 데이터 세트(DataSet)두 가지 로 나 뉘 는데 구체 적 인 원 리 는 설명 하지 않 습 니 다.드래그 앤 드 롭 뷰Category Avg Price 와 Categories 표 에서 데이터 집중.
3: 기둥 그림 컨트롤 러 방법(ColumnWithDrilldown)이 aspx 페이지 의 주요 코드 구현
기둥 그림 컨트롤 러 방법(ColumnWithDrilldown)이 aspx 페이지 의 주요 코드 구현
// DoNet.HighCharts
using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using System.Drawing;
using NorthWindTableAdapters;
/// <summary>
///
/// </summary>
public class CategoryPrice
{
public Decimal Price { set; get; }
public string CategoryName { set; get; }
}
public partial class ColumnWithDrilldown : System.Web.UI.Page
{
#region
private NorthWind.View_CategoryAvgPriceDataTable avgPriceDt;
avgPriceDt= new NorthWind.View_CategoryAvgPriceDataTable();
private NorthWind.CategoriesDataTable categoryDt = new NorthWind.CategoriesDataTable();
private View_CategoryAvgPriceTableAdapter avgPriceAdapter = new View_CategoryAvgPriceTableAdapter();
private CategoriesTableAdapter categoryAdapter = new CategoriesTableAdapter();
#endregion
private List<CategoryPrice> avgPriceList=null;//
protected void Page_Load(object sender, EventArgs e)
{
LoadColumnWithDrilldown();
}
public void LoadColumnWithDrilldown()
{
avgPriceAdapter.Fill(avgPriceDt);
categoryAdapter.Fill(categoryDt);
// Linq
avgPriceList =
(
from p in avgPriceDt
group p by p.CategoryID into g//
select new CategoryPrice
{
//
CategoryName=categoryDt.First(c=>c.CategoryID==g.Key).CategoryName,
//
Price = g.Average(c => c.UnitPrice)
}
).ToList();
//
string[] categories = new string[avgPriceList.Count()];
int index = 0;
foreach (var item in avgPriceList)
{
categories[index++] = item.CategoryName;
}
Data data = LoadDate();//
// HighCharts ， mvc
div1.InnerHtml = chart.ToHtmlString();// HighCharts div1
}
//
private Data LoadDate()
{
Data data = null;
int index =-1;
//
DotNet.Highcharts.Options.Point []pointList=new DotNet.Highcharts.Options.Point[avgPriceList.Count];
foreach (var item in avgPriceList)
{
pointList[++index] = new DotNet.Highcharts.Options.Point
{
Y = (Number)(item.Price*100)/100.0,
Color = Color.FromName(string.Format("colors[{0}]", index))
};
}
data = new Data(pointList);
return data;
}
}
이상 이 바로 본문의 모든 서술 이 니 여러분 에 게 도움 이 되 기 를 바 랍 니 다.
좋은 웹페이지 즐겨찾기
