jqPlot 차트 중국어 API 사용 문서, 소스 코드 및 온라인 예제_jquery

소개

jqplot은 jquery를 기반으로 하는 매우 훌륭한 차트 플러그인입니다. 이 기사는 주로 jqplot의 중국어 사용 지침, 온라인 예제 및 소스 코드 다운로드를 구성하는 데 도움이 됩니다. jqplot 플러그인은 HTML5를 지원하는 브라우저의 캔버스에 차트를 렌더링합니다.

스크립트 파일 소개

jqplot에는 jquery 버전 1.4.3 이상이 필요합니다. 방금 언급했듯이 jqplot은 HTML5 Canvas를 지원하는 브라우저에서 캔버스로 렌더링됩니다. , IE9 이하 브라우저를 사용하는 경우에는 excanvas.js 파일도 함께 가져와야 합니다. 물론 jqplot의 CSS 파일도 함께 가져와야 합니다.

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

플롯 컨테이너 추가

페이지에 div와 같은 jqplot용 컨테이너를 추가할 수 있지만 이 div 컨테이너에는 너비와 높이를 지정해야 한다는 점에 유의해야 합니다. 다음 코드에 표시된 대로:

시작 플롯 차트 생성

다음으로 위에서 생성합니다. $.jqplot을 호출하면 차트가 생성되고 좋은 컨테이너에 렌더링됩니다. 예를 들어 다음 데이터를 사용하여 jqplot 차트를 초기화하는 경우:

$.jqplot('chartdiv', [[[1, 2],[ 3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]) ;

최종 표시 효과는 다음과 같습니다.

jqplot 속성 옵션
$.jqplot을 호출할 때 일부 매개변수 옵션을 전달하여 jqplot을 사용자 정의할 수 있습니다.

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

시리즈 색상: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4 ", "#d8b83f", "#ff5800", "#0085cc"], // 기본 표시 카테고리 색상입니다. 카테고리 수가 여기 색상 수를 초과하는 경우
// 대기열의 첫 번째 위치부터 해당 카테고리에 값 재할당 시작
stackSeries: false, // true로 설정하고 카테고리가 여러 개 있는 경우(선 차트인 경우 폴리라인이 두 개 이상 있어야 함), 각 카테고리( line)
//세로축 값은 이전 카테고리 전체의 세로축 값과 해당 세로축, 가로축 값의 합입니다.
title: '', //Set 현재 사진 제목
title: {
text: '', //현재 사진 제목 설정
show: true, //현재 사진 제목 표시 여부 설정
},
axesDefaults: {
show: false, 좌표축을 자동으로 표시할지 여부.
min: null, 가로(세로)축의 최소 스케일 값
max: null, 가로(세로)축의 최대 스케일 값
pad: 1.2, 가로( 수직) 축 스케일 값
Ticks: [], //가로(수직) 좌표 스케일에 값을 설정합니다. 이 값은 틱 배열의 값일 수 있습니다.
numberTicks: 정의되지 않음,//나누기 계수, 사용됨 수평(수직) 좌표 스케일 간격 설정, 수평(수직) 좌표 스케일 간격 값 = 수평(수직) 좌표 간격 길이/(numberTicks-1)
renderer: $.jqplot.LinearAxisRenderer, // 렌더러 설정 가로(세로) 축에 데이터 로드
rendererOptions: {}, // 렌더러의 옵션 구성 개체를 설정합니다.
tickOptions: {
mark: 'outside ', // 좌표축에 눈금의 표시 모드를 설정합니다: 분 좌표축 외부 표시, 내부 표시 및 통과 표시입니다. 해당 값은 각각 '외부', '내부' 또는 '십자형'입니다.
showMark: true, //스케일 표시 여부 설정
showGridline: true, //차트 영역에 스케일 값 방향으로 그리드 표시 여부
markSize: 4, //The 각 눈금 표시 정점과 눈금 표시 사이의 거리 좌표 축의 점 사이의 거리(픽셀 단위) 표시 값이 '십자형'인 경우 각 눈금 표시는 위쪽 정점과 아래쪽 정점을 갖습니다. 눈금 표시 중앙에 좌표축
이 있으면 Distance×2
표시: true, //눈금 표시, 눈금 표시와 같은 방향의 그리드 선 및 눈금 값을 표시할지 여부 ​​좌표축
showLabel: true, //눈금 표시 및 좌표축 표시 여부 축의 스케일 값
formatString: '', //좌표축의 스케일 값 표시 형식을 설정하고, 예:'%b %#d, %Y'는 "월, 일, 연도", "AUG 30,2008" 형식을 의미합니다.
fontSize:'10px', //눈금 값의 글꼴 크기
FontFamily:'Tahoma', //스케일 값의 글꼴
angle:40, //스케일 값과 좌표축 사이의 각도, 각도는 좌표축의 양의 시계 방향
fontWeight:' Normal', //글꼴의 두께
fontStretch:1//스케일 값의 방향(좌표축 외부)의 늘어나는 정도
}
showTicks: true, / /좌표축에 눈금 표시 및 스케일 값 표시 여부,
showTickMarks: true, //눈금 표시 여부 설정
useSeriesColor: true //세로(가로) 좌표축이 여러 개인 경우, 이 속성을 사용하여 이러한 좌표축을 다른 색상으로 표시할지 여부를 설정합니다.
},
axes: {
xaxis: {
// axisDefaults와 동일한 옵션
},
yaxis: {
//axesDefaults와 동일한 옵션
},
x2axis: {
//axesDefaults와 동일한 옵션
},
y2axis: {
//axesDefaults와 동일한 옵션
}
},
seriesDefaults: {//카테고리가 여러 개인 경우 이 구성 속성을 통해 각 카테고리의 공통 속성을 설정할 수 있습니다.
show: true, //렌더링 여부를 설정합니다. 전체 차트 영역(즉, 차트의 내용 표시)
xaxis: 'xaxis', // 'xaxis' 또는 'x2axis'
yaxis: 'yaxis', // 'yaxis' 또는 'y2axis'.
label: '', // 카테고리 이름 상자에 표시하는 데 사용되는 카테고리 이름
color: '', // 아이콘에 표시되는 카테고리의 색상(할인, 히스토그램) 등).
lineWidth: 2.5, // 분류 차트(특히 선형 차트)의 너비는 얼마입니까?
shadow: true, // 각 차트가 차트에 그림자 영역을 표시하는지 여부
ShadowAngle: 45, // 그리드 매개변수와 동일
shadowOffset: 1.25, //그리드의 동일한 매개변수를 참조하세요.
shadowDepth: 3, //그리드의 동일한 매개변수를 참조하세요. >shadowAlpha: 0.1, // 그림자의 불투명도
showLine : true, //차트에 폴리라인을 표시할지 여부(라인 차트의 폴리라인)
showMarker: true, // 데이터를 강조 표시할지 여부 nodes in the graph
fill: false, // 차트 영역의 폴리라인 아래를 채울지 여부(채우기 색상은 폴리라인 색상과 동일) 범례에서 설정한 카테고리 이름 상자의 카테고리 색상
//채우기가 true인 경우
//showLine은 true여야 하며, 그렇지 않으면 표시 효과가 적용되지 않습니다.
fillAndStroke: false, //채우기가 true이면 선이 표시됩니다. 채워진 영역의 상단에 (라인 차트인 경우 선이 표시됨)
fillColor: undefine, //채워지는 영역을 설정합니다. Color
fillAlpha: undefine, //채워지는 영역의 투명도를 설정합니다.
renderer: $.jqplot.PieRenderer, // 렌더러(여기서는 원형 차트 PieRenderer가 사용됨)를 사용하여 기존 차트를 렌더링합니다
//, 따라서 필요한 차트로 변환됩니다.
rendererOptions: {} , // 이전 속성으로 설정된 렌더러의 옵션 개체를 전달합니다. 꺾은선형 차트의 렌더러에는 옵션 개체가 없습니다.
// 다른 차트의 옵션 구성 개체는 다음 "옵션 개체 설정"을 참조하세요. 다양한 jqPlot 플러그인"
//각 차트의 구성 옵션 개체
markerRenderer: $.jqplot.MarkerRenderer, // 데이터를 그리는 데 사용할 렌더러
// 포인트 마커.
markerOptions: {
show: true, // 그래프에 데이터 포인트를 표시할지 여부
style: 'filledCircle', // 각 데이터 포인트가 그래프에 표시되는 방식, 기본값은 "filledCircle"(실선 원) ,
//여러 가지 다른 방법 Circle, Diamond, Square,filledCircle,
//filledDiamond 또는filledSquare.
lineWidth: 2, // 데이터 포인트의 각 변의 너비(설정이 너무 크면 각 가장자리가 반복되고 표시는 솔리드 포인트와 유사합니다)
size: 9, // 데이터 포인트의 크기
color: '#666666' // 데이터 포인트의 색상
shadow : true, // 데이터 포인트의 그림자 영역 표시 여부(3차원 효과 증가)
shadowAngle: 45, // 그림자 영역 각도, ​​x축 시계 방향
shadowOffset: 1, / / 그리드에서 동일한 매개변수 참조
shadowDepth: 3, //그리드에서 동일한 매개변수 참조
shadowAlpha: 0.07 //그리드에서 동일한 매개변수 참조
}
isDragable: true, //드래그 허용 여부(드래그 가능 패키지가 도입된 경우), 기본적으로 드래그 가능
},
시리즈:[
//표시해야 할 카테고리가 여러 개인 경우 각 카테고리의 관련 구성 속성은 여기
//eg. 카테고리 이름 상자에 각 카테고리 카테고리 이름을 설정합니다
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: '하모니 부문'}]//구성 매개변수 설정은 seriesDefaults
],
legend: {
show: false,//범주 이름 상자 표시 여부를 설정합니다. 즉, 모든 범주의 이름이 한 번에 표시됩니다. 사진 속 특정 위치)
location: 'ne', // 카테고리 이름 상자가 나타나는 위치, nw, n, ne, e, se, s, sw, w
xoffset: 12, / / 카테고리 이름 박스와 차트 영역 상단 테두리 사이의 거리(px 단위)
yoffset: 12, //카테고리 이름 박스와 차트 영역 왼쪽 테두리 사이의 거리(px 단위)
배경:'' //카테고리 이름 상자와 차트 영역의 배경색 사이의 거리
textColor:' ' //카테고리 이름 상자 거리 내 차트 영역 내 글꼴 색상
},
grid: {
drawGridLines: true, // 그리드에 선을 그릴지 여부
gridLineColor: '#cccccc ' // 전체 아이콘 영역의 그리드 배경선 색상을 설정합니다.
background: '#fffdf6', // 차트 전체 영역의 배경색 설정
borderColor: '#999999', // 차트의 (가장 바깥쪽) 테두리 색상 설정
borderWidth: 2.0, // 차트의 (가장 바깥쪽) 테두리 너비 설정
shadow: true, //3차원 효과를 강조하기 위해 전체 아이콘(가장 바깥쪽) 테두리에 그림자를 설정
ShadowAngle: 45, // 그림자 영역 각도, ​​x축을 기준으로 시계 방향으로 회전
shadowOffset: 1.5, // 그림 테두리에서 그림자 영역의 오프셋 거리 설정
shadowWidth: 3, // 그림자 영역 설정 너비
shadowDepth: 3, // 오디오 및 비디오 영역에서 겹치는 그림자 수를 설정합니다.
shadowAlpha: 0.07 // 그림자 영역의 투명도를 설정합니다.
renderer: $.jqplot.CanvasGridRenderer, // 렌더러
rendererOptions: {} // 렌더러에 전달할 옵션입니다. 참고로 기본
// CanvasGridRenderer는
},
//옵션 개체를 사용하지 않습니다. 다양한 jqPlot 플러그인 설정
//BarRenderer(히스토그램의 Option 개체 설정)
//이 Option 개체는 시리즈 및 히스토그램의 seriesDefault 속성과 관련된 구성 개체 설정에 적용됩니다.
seriesDefaults : {
rendererOptions: {
barPadding: 8, //동일 카테고리의 두 기둥 막대 사이의 거리(px)를 설정합니다.
barMargin: 10, //두 기둥 막대 사이의 거리(px)를 설정합니다. 다른 카테고리(동일한 수평 좌표 테이블 지점)
barDirection: 'vertical', //히스토그램 표시 방향 설정: 수직 표시 및 수평 표시
//, 기본 수직 표시는 수직 또는 수평입니다.
barWidth: null, // 히스토그램의 각 열 막대 너비를 설정합니다.
shadowOffset: 2, // 그리드와 동일한 속성 설정
shadowDepth: 5, // 그리드와 동일한 속성 설정
shadowAlpha : 0.8, // 그리드 속성 설정과 동일
}
},
// Cursor(커서)
// 이미지에 마우스를 이동하면 이미지에 마우스가 표시됩니다. 하이라이트 기능과 함께 자주 사용됩니다
//추가로 이 속성의 줌 관련 속성을 설정하여 사진의 특정 영역을 드릴링(선택한 영역 확대)합니다
//이렇습니다. 구성 객체는 옵션
cursor: {
style: 'crosshair', //그림 위로 마우스를 이동할 때 마우스의 표시 스타일이 속성 값입니다
show. : true, //커서 표시 여부
showTooltip: true, // 프롬프트 정보 표시줄 표시 여부
followMouse: false, //커서 프롬프트 정보 표시줄이 커서(마우스)와 함께 이동하는지 여부
tooltipLocation: 'se', //커서 프롬프트 정보 표시줄의 위치를 ​​설정합니다. followMouse=true인 경우 위치는
//커서를 기준으로 한 프롬프트 정보 표시줄의 위치입니다.그렇지 않으면 커서 아이콘에 정보 표시줄의 위치를 ​​묻는 메시지가 표시됩니다.
// 이 속성의 선택적 값: n, ne, e, se 등.
tooltipOffset: 6, //사이의 거리 프롬프트 정보 표시줄과 마우스(followMouse=true) 또는 좌표축의 위치(followMouse=false)
showTooltipGridPosition: false, // 정보 프롬프트 표시줄에 커서 위치를 표시할지 여부(픽셀 거리 기준) 아이콘의 왼쪽 가장자리와 위쪽 가장자리 사이)
showTooltipUnitPosition: true, // 커서 위치를 묻는 정보 표시줄 표시 여부(가로 및 세로 축의 데이터 값 사용)
// 참고 : showTooltipGridPosition 값과 차이점에 유의하세요. 전자는 좌표 값을 표시하고, 거기에 데이터 값이 표시됩니다.
tooltipFormatString: '%.4P', // 하이라이터의 tooltipFormatString과 동일
useAxesFormatters: true, / / 하이라이터의 tooltipFormatString
tooltipAxesGroups: [], // 툴팁에 지정된 축 그룹만 표시합니다.
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis ']] 기본적으로 모든 축
// 플롯의 계열에 대한 조합이 표시됩니다.
// 드래그 가능(드래그)
//이 구성 개체는 다음을 통해 구성됩니다. seriesDefaults 및 계열 구성 객체
seriesDefaults: {
dragable: {
color: undefine, / / ​​데이터 포인트를 드래그할 때 드래그 라인 및 드래그 데이터 포인트 색상
constrainTo: 'none', / /드래그 범위 설정: 'x'(가로로만 드래그 가능),
// 'y'(세로로만 드래그 가능) 또는 'none'(무제한)
},
} ,
// 하이라이터(하이라이트)
// 하이라이트 동작 옵션 속성 객체 설정
//특정 데이터 포인트로 마우스를 이동하면 데이터 포인트가 증가하고 프롬프트 메시지 상자가 표시됩니다
//구성 개체는
하이라이터 옵션 아래에서 직접 구성됩니다: {
lineWidthAdjust: 2.5, //확대된 데이터 포인트 위로 마우스를 이동할 때 확대된 데이터 포인트의 너비를 설정
// 현재 비고체 데이터 포인트에만 적용 가능
sizeAdjust: 5, / / ​​마우스가 데이터 포인트로 이동하면 데이터 포인트 확장의 증가
showTooltip: true, // 프롬프트 정보 표시줄 표시 여부
tooltipLocation: 'nw', // 프롬프트 정보 표시 위치(영문 방향) 첫 글자): n, ne, e, se, s, sw, w, nw
fadeTooltip: true, // 설정 프롬프트 정보 표시줄이 나타나고 사라지는 방식(페이드 인 또는 아웃 여부)
tooltipFadeSpeed: "fast"//프롬프트 정보 표시줄의 페이드 인 및 페이드 아웃 속도 설정: 느림, 정의, 빠름 또는 밀리초 단위의 값.
tooltipOffset: 2, // 프롬프트 정보 표시줄 이동 위치에서 강조 표시된 데이터 포인트의 오프셋(픽셀)입니다.
tooltipAxes: 'both', // 프롬프트 정보 상자에는 데이터 포인트의 좌표축 값이 표시됩니다. 현재 가로/세로/가로 및 세로의 세 가지 모드가 있습니다.
//값은 x, y 또는 xy입니다.
tooltipSeparator: ', ' // 프롬프트 정보 표시줄의 서로 다른 값 사이의 구분 기호
useAxesFormatters: true // 프롬프트 정보 상자에 데이터 표시 좌표축의 데이터 표시 형식과 일치합니까?
tooltipFormatString: '%.5P' // 전제 조건인 프롬프트 정보 상자에 데이터 표시 형식을 설정하는 데 사용됩니다. useAxesFormatters
//는 false입니다. 이때 프롬프트 상자의 데이터 형식은 더 이상 좌표축과 일치하지 않지만 이를 기반으로 합니다.
//동시에 이 속성도 지원합니다. html 형식 문자열
//eg:'< ;span style="color:red;" mce_style="color:red;">hello %.2f'
},
// LogAxisRenderer(지수 렌더러)
// 이 렌더러에는 두 개의 속성만 있습니다. 지수 렌더러는 axisDefaults 및 축 구성 객체를 통해 구성됩니다.
axisDefaults: {
base: 10, // 지수의 밑수
TickDistribution: 'even', // 좌표축 표시 모드: 'even' 또는 'power'는 좌표 눈금 값을 생성합니다.
// 축에 균등하게 분포됩니다.그리고 'power'는 증가하는 증분에 따라 좌표축의 눈금을 결정합니다.
},
// PieRenderer(원형 차트의 OPtion 개체 설정)
// 원형 차트는 seriesDefaults를 통과합니다. 시리즈 구성 객체
seriesDefaults: {
rendererOptions: {
diameter: undefine, // 파이의 직경 설정
padding: 20, // 파이와 카테고리 이름 상자 사이의 거리 또는 차트 테두리 파이의 직경으로 위장한 거리
sliceMargin: 20, // 파이의 각 부분 사이의 거리
fill:true, // 파이의 각 부분의 채워진 상태를 설정
Shadow:true , //파이의 각 부분 테두리에 그림자를 설정하여 3차원 효과를 강조합니다.
shadowOffset: 2, //파이의 각 부분 테두리에서 그림자 영역 오프셋을 설정합니다
shadowDepth: 5, // 그림자 영역의 깊이 설정
shadowAlpha: 0.07 // 그림자 영역의 투명도 설정
}
},
//pointLabels(데이터 포인트 라벨)
//데이터 포인트 위치를 지정하는 데 사용됨 관련 정보 표시(프롬프트 상자 아님)
seriesDefaults: {
pointLabels: {
location:'s',//데이터 레이블은 데이터 근처의 위치를 ​​표시합니다. point
ypadding:2 //Data 세로축 방향으로 라벨과 데이터 포인트 사이의 거리
}
}
// 추세선(추세선)
// 원형 차트 seriesDefaults 및 계열 구성 객체를 통해 구성됩니다.
seriesDefaults: {
trendline: {
show: true, // 추세선 표시 여부
color: '#666666', // 추세선 색상
label: '', // 추세선 이름
type: 'linear', //추세선 유형 'linear'(직선), 'exponential'(power value line) 또는 'exp'
Shadow: true, // 그리드와 동일한 속성 설정
lineWidth : 1.5, // 추세선 너비
shadowAngle: 45, // 그리드와 동일한 속성 설정
shadowOffset: 1.5, // 동일한 속성 설정 Grid
shadowDepth: 3, // 그리드와 동일한 속성 설정
shadowAlpha: 0.07 // 그리드와 동일한 속성 설정
}
}
}

여기 맞춤 매개변수 사용 예시:

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

$ .jqplot('chartdiv', [[[1, 2],[3 ,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ 제목 :'지수선',
axes:{yaxis:{min: -10, max:240}},
series:[{color:'#5FAB78'}]
});

표시 효과는 아래와 같습니다.

소스코드 다운로드

http://www.jb51.net/jiaoben/35457.html 공식 홈페이지: http://www.jqplot.com/ .