jqPlot jquery의 페이지 차트 그리기 tool_jquery

jqplot은 기본 jqplot.js 파일을 기반으로 하며 여러 js 파일에서 지원되는 플러그인을 가지고 있습니다. 즉, jqplot.js 파일은 원형 차트, 히스토그램 및 기타 그래픽의 경우 PieRenderer 그리기만 지원할 수 있습니다. .js 및 기타 파일을 도입해야 합니다.
여기에서는 jqPlot의 공식 문서를 참조하고, jqPlot의 사용법을 간략하게 설명하기 위해 원형 차트를 예로 듭니다.
첫 번째 단계는 js 파일을 소개하는 것입니다(선 이외의 다른 차트를 그리는 경우). 차트 관련 js 파일을 소개해야 하는데, 파이 차트 파일인 PieRenderer가 소개되어 있습니다.)

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

< ;!--[IE의 경우]>

두 번째 단계는 차트 표시 영역에 대한 컨테이너를 추가하는 것입니다.

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

세 번째 단계, 데이터 가져오기

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

line1 = [ ['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys' , 6], ['moles', 5], ['ground hogs', 4]];

네 번째 단계는 옵션 개체를 구성하고 차트를 만드는 것입니다

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

$.jqplot('chart', [line1], {
title:'pieRenderer',//원형 차트의 제목 설정
seriesDefaults: {fill: true,
showMarker: false,
shadow: false,
renderer:$.jqplot. PieRenderer,
rendererOptions:{
diameter: undefine, // 파이의 직경 설정
padding: 20, // 직경으로 위장한 파이와 해당 카테고리 이름 상자 또는 차트 테두리 사이의 거리 of the Pie
sliceMargin: 9, // 파이의 각 부분 사이의 거리
fill:true, // 파이의 각 부분을 부분적으로 채워진 상태로 설정
shadow:true, //섀도우 설정 3차원 효과를 강조하기 위해 파이의 각 부분 테두리
shadowOffset: 2, //파이 거리의 각 부분의 테두리를 오프셋하도록 그림자 영역을 설정합니다
shadowDepth: 5, // 설정 그림자 영역의 깊이
shadowAlpha: 0.07 // 그림자 영역의 투명도 설정
}
},
legend:{
show: true , //카테고리 이름 여부 설정 상자가 나타납니다 (즉, 사진의 특정 위치에 모든 카테고리의 이름이 나타납니다)
location: 'ne', // 카테고리 이름 상자가 나타나는 위치, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 카테고리 이름 상자와 차트 영역 상단 경계선 사이의 거리(단위 px)
yoffset: 12, // 카테고리 이름 상자 사이의 거리 차트 영역의 왼쪽 테두리(단위 px)
}
})

전체 코드는 다음과 같습니다.

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

"http://www.w3.org/TR/html4/loose.dtd"> ;

<머리>









<본문>

生成图表展示如下：

de life" alt="jqPlot——基于jquery的页face图表绘工具 - gaoyusi - 내 공동

아래쪽 화면은 다음과 같습니다.

1.多纵轴图

de life" alt="jqPlot——基于jquery的页face图表绘工具 - gaoyusi - 내 공동

2.带提示信息的甘特图

de life" alt="jqPlot——基于jquery的页face图表绘工具 - gaoyusi - 내 공동

3.테이블 확장 확장

de life" alt="jqPlot——基于jquery的页face图表绘工具 - gaoyusi - 내 공동

4.带提示信息的线状图（可拖动）

de life" alt="jqPlot——基于jquery的页face图表绘工具 - gaoyusi - 내 공동对于jqPlot功能적具体介绍请关注本文的后续文章——jqPlot的Option配置对象详解。