jQuery 원형 차트 개발 example_jquery-JS 튜토리얼-php.cn

jQuery 원형 차트 개발 example_jquery

WBOY

풀어 주다： 2016-05-16 16:22:16

원래의

1882명이 탐색했습니다.

이 글의 예시에서는 jQuery 파이 차트를 개발하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

HTML5 Canvas와 jQuery를 기반으로 한 원형 차트는 이미지를 사용하지 않고도 쉽게 구현할 수 있고, 속성 설정이 많아 매우 편리합니다. 사용. 렌더링은 다음과 같습니다.

먼저 jquery 라이브러리 파일과 jquery.circliful.min.js를 페이지에 도입해야 합니다.

코드 복사 코드는 다음과 같습니다.

필수 Jquery 파일이 도입되면 이제 원형 차트의 기본 스타일을 사용자 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

.원형 { 

위치: 친척 

} 

.circle-text, .circle-info, .circle-text-half, .circle-info-half { 

너비: 100% 

위치: 절대 

텍스트 정렬: 가운데 

디스플레이: 인라인 블록 

} 

.circle-info, .circle-info-half { 

색상: #999;
} 

.circliful .fa { 

여백: -10px 3px 0 3px 

위치: 친척 

하단: 4px 

} 

스타일을 처음 정의한 후에는 통계 차트가 필요한 곳에 다음 스타일 코드만 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다.

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"

data-bgcolor="#eee" data-fill="#ddd">

영역 블록을 작성한 후 이제 초기화해야 합니다.

코드 복사

코드는 다음과 같습니다. <스크립트> $(문서).ready(함수() { $('#myStat').circliful()

})

스크립트>

그렇게 간단합니다. 몇 번의 클릭만으로 멋진 통계 차트를 완성할 수 있습니다.

플러그인의 기본 속성 설명은 다음과 같습니다.

Circliful은 html5의 데이터 속성을 기반으로 다양한 속성 옵션을 제공합니다. 설정 목록은 다음과 같습니다.

매개변수	설명	기본값
데이터 차원	원형 이미지의 너비와 높이는 px입니다	250
데이터 텍스트	원 안에 표시되는 텍스트 콘텐츠	비어 있음
데이터 정보	데이터 텍스트 아래에 표시되는 설명 정보	비어 있음
데이터 너비	원의 두께 px	15
데이터 글꼴 크기	원형 텍스트 크기 px	15
데이터 백분율	원 통계 백분율, 1-100	50
데이터-fgcolor	원의 전경색	#556b2f
데이터-bgcolor	원의 배경색	#으아아아아
데이터 채우기	원형 채우기 배경색	비어 있음
데이터 유형	원형 통계 유형은 "절반" 또는 "전체"일 수 있습니다.	가득
데이터 합계	데이터 부분과 함께 사용되는 총 데이터 양	비어 있음
데이터 부분	data-total과 연계하여 사용되는 데이터량	비어 있음
데이터 경계	원형 스타일, 인라인이나 아웃라인 등 테두리를 추가할 수 있습니다	비어 있음
데이터 아이콘	Fontawesome 아이콘 스타일, 자세한 내용은 Fontawesome 웹사이트 – 아이콘을 참조하세요	비어 있음
데이터 아이콘 크기	아이콘 크기	비어 있음
데이터-아이콘-색상	아이콘 색상	비어 있음

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.