jquery_jquery를 기반으로 하는 jqPlot 그리기 플러그인

이전에 Java 기반의 그래픽 보고서에 대해서도 이야기한 적이 있습니다. 기능이나 외관도 좋지만 범용성에 문제가 있습니다. 그럼 사용 편의성과 호환성, 확장성을 갖춘 js 차트 플러그인을 배워보겠습니다.

jqPlot은 jquery 클래스 라이브러리를 기반으로 하는 아이콘 그리기 플러그인입니다. jqPlot을 통해 웹페이지에 선형, 원주형, 원형 ​​및 기타 스타일의 차트를 그릴 수 있습니다. 게다가 jqPlot에는 플러그인 확장성(Pluggability)이 있어 자신만의 차트 스타일을 작성할 수 있습니다.

공식 주소: http://www.jqplot.com/

기능 개요:

다양한 차트 스타일 제공
날짜 축을 사용자 정의할 수 있습니다
회전 축 텍스트를 설정할 수 있습니다
추세선 자동 계산
도구 모음 팁 및 강조 표시된 데이터 포인트
기본 최적 설정, 사용하기 매우 쉽습니다
위 기능은 다음과 같습니다. jqPlot 홈페이지의 예제 페이지에는 많은 시각적 표현이 있습니다. 자세한 사용법 문서는 다음과 같습니다.

단점: 히스토그램은 특정 데이터 값을 표시할 수 없습니다. 원형 차트는 특정 비율을 표시할 수 없습니다.

수집된 상세 파라미터 구성은 다음과 같습니다.

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

옵션 =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 카테고리의 기본 표시 색상
//카테고리 수가 해당 개수를 초과하는 경우 여기에 색상을 지정하고, 대기열의 첫 번째 위치부터 시작하여 해당 카테고리에 값을 할당합니다.
stackSeries: false, // true로 설정하고 카테고리가 여러 개 있는 경우(선 차트인 경우 한 줄 이상),
//그런 다음 세로축의 각 카테고리(폴리라인) 값은 이전 모든 카테고리의 세로축 값과 해당 세로축의 합입니다.
//축 값(예: 현재 카테고리 세로 축 값은 Y3
//이고 앞에 Y2와 Y1이 있으면 Y축에 표시되는 값은 Y2 Y3 Y1입니다. 현재 이 속성은 선 그래프와 선 그래프를 지원합니다. bar graphs
title: '', //현재 그래프의 제목 설정
title: {
text: '', //현재 그림의 제목 설정
show: true,/ /현재 제목 표시 여부 설정
},
axisDefaults: {
show: false, // 축 렌더링 여부를 자동으로 결정합니다.
min: null, // 최소값입니다. 가로(세로) 좌표로 표시되는 값
max: null, // 가로(세로) 좌표로 표시되는 최대값 Value
pad: 1.2, // 곱셈 요소,
//(the 가로(세로)축 데이터 최대값 - 가로(세로)축 데이터의 최소값) * 패드 값 = 축 표시 가로(세로) 좌표 간격의 길이
// 이 축에 표시되는 수평(수직)좌표 간격의 길이 = 수평(수직)좌표가 표시하는 최대값 - 수평(수직)좌표가 표시하는 최소값
// 만약 최대값이 min 및 min이 설정되면 min 및 max로 설정된 값이 우선적으로 적용됩니다.
ticks: [], //가로(세로) 좌표의 스케일로 값을 설정합니다. 이는 틱의 값이 될 수 있습니다. array.
// 1D [val1, val2, ...] 또는 2D [[val, label], [val, label], ...]
numberTicks: 정의되지 않음, //나눗셈 요소 , 수평(수직) 좌표 눈금 간격을 설정하는데 사용됩니다.
//수평(수직) 좌표 눈금 간격 값 = 수평(수직) 좌표 간격 길이/(numberTicks-1)
tickInterval:'', //Horizontal (세로) 좌표 간격 길이 ) 날짜 문자열일 수 있는 좌표 눈금 간격 값
renderer: $.jqplot.LinearAxisRenderer, // dateAxisRenderer를 포함하여 가로(세로) 축에 데이터를 로드하기 위한 렌더러를 설정합니다(참조: 관련 소개는 이 기사 마지막 부분에 있습니다).
rendererOptions: {}, // 렌더러의 옵션 구성 개체를 설정합니다. 꺾은선형 차트는 설정할 필요가 없습니다.
// 다른 차트의 옵션 구성 개체는 다음 "옵션 개체"를 참조하세요. jqPlot에 대한 다양한 플러그인 설정"
//
tickOptions: {
mark: 'outside'의 각 차트에 대한 구성 옵션 개체, // 좌표축의 수평(수직) 좌표 눈금 표시 모드를 설정합니다. , 내부, 외부, 좌표축을 통해 구분됩니다. 좌표축 표시
// 값도 '외부', '내부' 및 '십자'로 구분됩니다.
showMark: true, / /눈금 표시 여부 설정
showGridLine: true, // 차트에 있는지 여부 눈금 값 방향으로 그리드 선을 표시하는 영역
markSize: 4, //각 눈금 표시 정점과 눈금 표시 사이의 거리 좌표축의 점(픽셀 단위)
//표시 값이 '십자형'인 경우 각 눈금 표시는 위쪽 꼭지점과 아래쪽 꼭지점을 가지며 눈금 표시는 좌표축과 교차합니다
// 눈금 중앙에 있으면 간격은 ×2,
show: true, // 눈금 표시 여부, 눈금 표시와 같은 방향의 그리드 선, 눈금 값의 표시 여부 coordinate axis
showLabel: true, // 좌표축에 눈금 표시 및 눈금 값 표시 여부
formatString: '', // 좌표축에 눈금 값 표시 형식을 설정합니다. 예: '%b %#d, %Y'는 "월, 일, 연도", "AUG 30,2008" 형식을 나타냅니다.
fontSize:'10px', //스케일 값의 글꼴 Size
fontFamily: 'Tahoma', //스케일 값의 글꼴
angle:40, //스케일 값과 좌표축 사이의 각도, 각도는 좌표축의 양의 시계 방향입니다
fontWeight:'normal ' , //글꼴의 두께
fontStretch:1//스케일 값의 방향(좌표축 외부)의 늘어나는 정도
}
showTicks: true, // / 눈금 표시 여부 및 좌표축의 눈금 값
showTickMarks: true, //눈금 표시 여부 설정
useSeriesColor: true //세로(가로) 좌표축이 여러 개인 경우 사용 이 속성은 좌표축의 색상이 서로 다른지 여부를 설정합니다. Display
},

axes: {
xaxis: {
// 설정은 axisDefaults
}와 동일합니다.
yaxis: {
// 설정은 axisDefaults와 동일
},
x2axis: {
// 설정은 axisDefaults
},
y2axis와 동일 : {
// 설정은 axisDefaults
}
},

seriesDefaults와 동일합니다. {//카테고리가 여러 개인 경우 다음을 통해 각 카테고리의 공통 속성을 설정할 수 있습니다. 이 구성 속성
show: true, // 전체 차트 영역을 렌더링할지 여부를 설정합니다(예: 차트에 내용 표시)
xaxis : 'xaxis', // 'xaxis' 또는 'x2axis'
yaxis: 'yaxis', // 'yaxis' 또는 'y2axis'.
label: '', // 카테고리 이름 상자에 카테고리 이름을 표시하는 데 사용됨
color: '', / / 아이콘에 표시되는 카테고리의 색상(할인, 막대 차트 등)
lineWidth: 2.5, // 카테고리 차트(특히 라인 차트)는 어디에 있습니까? Width
shadow: true, // 여부 각 그래프는 차트의 그림자 영역을 표시합니다.
shadowAngle: 45, // 그리드의 동일한 매개변수 참조
shadowOffset: 1.25, // 그리드의 동일한 매개변수 참조
ShadowDepth: 3, //그리드에 있는 동일한 매개변수 참조
shadowAlpha: 0.1, //그리드에 있는 동일한 매개변수 참조
showLine: true, //차트에 폴리라인을 표시할지 여부(라인에 있는 폴리라인) Chart)
showMarker: true, // 차트의 데이터 노드를 강조 표시할지 여부
fill: false, // 차트의 폴리라인 아래 영역을 채울지 여부(채우기 색상은 폴리라인과 동일) color) 및 범례에 의해 설정된 카테고리 이름 상자
// 분류 색상입니다. 여기서 fill이 true이면
//showLine이 true여야 하며, 그렇지 않으면 효과가 표시되지 않습니다
fillAndStroke: false, //fill이 true인 경우 채우기 영역 상단에 선이 표시됩니다. (선 차트인 경우 선이 표시됩니다.)
fillColor: undefine, //채워지는 색상을 설정합니다. Area
fillAlpha: undefine, // 채워진 영역의 투명도 설정
renderer: $.jqplot.PieRenderer, // 기존 차트를 렌더링하려면 렌더러(여기서는 원형 차트 PieRenderer)를 사용하세요
// , 따라서 필수 차트로 변환합니다
rendererOptions: {}, // 이전 속성으로 전달됩니다. 세트 렌더러의 옵션 개체에는
//For가 없습니다. 다양한 차트의 옵션 구성 개체에 대해서는 다음 "jqPlot에 대한 다양한 플러그인의 옵션 개체 설정"을 참조하세요.
//구성 옵션 개체
의 각 차트markerRenderer: $.jqplot.MarkerRenderer, // 렌더러 데이터를 그리는 데 사용
// 포인트 마커.
markerOptions: {
show: true, // 그림에 표시 여부
style: 'filledCircle', // 방법 각 데이터 포인트는 그래프에 표시되며 기본값은 "filledCircle"(단색 원),
//여러 가지 다른 방법으로 원, 다이아몬드, 사각형,filledCircle,
//filledDiamond 또는filledSquare입니다. 2, // 데이터 포인트의 각 변의 너비(너무 크게 설정하면 각 변이 반복되어 솔리드 포인트와 유사하게 표시됩니다.)
size: 9, // 데이터 포인트의 크기
color: '#666666' // 데이터 포인트의 색상
shadow: true, // 데이터 포인트의 그림자 영역 표시 여부(3차원 효과 증가)
shadowAngle : 45 , // 그림자 영역의 각도, x축 시계 방향
shadowOffset: 1, // 그리드에서 동일한 매개변수 참조
shadowDepth: 3, // 그리드에서 동일한 매개변수 참조
shadowAlpha: 0.07 // 그리드의 동일한 매개변수 참조
}
isDragable: true, //드래그 허용 여부(드래그 가능 패키지가 도입된 경우), 기본적으로 드래그 가능
},
시리즈:[//표시해야 할 카테고리가 여러 개인 경우 여기에서 각 카테고리의 관련 구성 속성을 설정하세요.
//예: 카테고리 이름 상자에 각 카테고리의 카테고리 이름을 설정하세요
/ /[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]
//구성 매개변수 설정은 seriesDefaults와 동일
],

legend : {
show: false,//카테고리 이름 상자 표시 여부 설정(즉, 모든 카테고리의 이름이 사진의 특정 위치에 표시됨)
location: 'ne', // 카테고리 이름 상자가 나타나는 위치, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 카테고리 이름 상자와 차트 상단 테두리 사이의 거리 Area (단위 px)
yoffset: 12, // 카테고리 이름 박스 사이의 거리 차트 영역 왼쪽 테두리로부터의 거리 (단위 px)
배경:'' //카테고리 이름 박스 사이의 거리 및 차트 영역의 배경색
textColor:'' //차트 영역 내 카테고리 이름 상자와 글꼴 색상 사이의 거리
.. 기타 스타일 디자인 관련 내용은 공식 문서를 참조하세요.
},

grid: {
drawGridLines: true, // 그리드를 가로질러 선을 그릴지 여부
gridLineColor: '#cccccc' / / 그리드 색상을 설정합니다. 전체 아이콘 영역의 배경선
background: '#fffdf6', // 전체 차트 영역의 배경색을 설정
borderColor: '#999999', // 차트의 (가장 바깥쪽) 테두리를 설정 Color
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 객체는 다음과 관련된 구성 객체 설정에 적용됩니다. 히스토그램의 series 및 seriesDefault 속성
seriesDefaults: {
rendererOptions: {
barPadding: 8, //동일 카테고리의 두 기둥 막대 사이의 거리 설정(px)
barMargin: 10, //서로 다른 카테고리의 두 기둥형 막대 사이의 거리(px) 설정(가로좌표 테이블 포인트와 동일)
barDirection: 'vertical', //막대 차트 표시 방향 설정: 세로 표시 및 가로 표시
//, 기본 세로 표시는 세로 또는 가로입니다.
barWidth: null, // 히스토그램의 각 열 막대 너비를 설정합니다.
shadowOffset: 2, // 그리드와 동일한 속성 설정
ShadowDepth: 5, // 그리드와 동일한 속성 설정
shadowAlpha: 0.8, // 그리드와 동일 그리드의 속성 설정과 동일
}
},

// 커서(커서)
// 마우스가 사진으로 이동하면 마우스가 사진에 표시되는데, 종종 강조 표시 기능과 함께
//추가로 사진의 특정 영역을 드릴링합니다(확대).
//설정 개체는

커서: {
style: 'crosshair', //When에 직접 구성됩니다. 마우스가 그림 위로 움직일 때, 마우스의 표시 스타일은 CSS 클래스
show: true, //커서 표시 여부
showTooltip: true, // 프롬프트 정보 표시 여부입니다. bar
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'(제한 없음) ).
},
},
//하이라이터(highlight)
//하이라이트 액션 옵션 속성 객체 설정
//특정 데이터 포인트로 마우스를 이동하면 데이터가 포인트가 증가하고 프롬프트 메시지 상자가 표시됩니다
//구성 개체는 옵션 Configuration
highlighter: {
lineWidthAdjust: 2.5, //확대된 데이터 포인트 위로 마우스를 이동할 때 확대된 데이터 포인트의 너비
// 현재 비고체 데이터 포인트에만 적용 가능
sizeAdjust: 5, // 마우스를 데이터 포인트 위로 이동하면 데이터 포인트 확장의 증분
showTooltip: true, // 프롬프트 정보 표시줄 표시 여부
tooltipLocation: 'nw', // 프롬프트 정보 표시 위치(영문 방향 첫 글자): n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // 프롬프트 정보 표시줄이 나타나고 사라지는 방식을 설정합니다(페이드 인 및 아웃 여부) )
tooltipFadeSpeed: "fast"//프롬프트 정보 표시줄이 페이드 인 및 페이드 아웃되는 속도를 설정합니다. out: 느림, def, 빠름 또는 밀리초 단위의 값.
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 및 축 구성 객체를 통해 두 가지 속성만 구성됩니다.

axesDefaults: {
base: 10, // 인덱스의 기준
tickDistribution: 'even', // 좌표축 표시 모드: 'even' 또는 'even'. 좌표
//축에 균등하게 분포된 좌표 눈금 값을 생성합니다.그리고 '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',//데이터 포인트 근처에 표시되는 데이터 라벨의 위치
ypadding:2 //세로축 방향으로 데이터 라벨과 데이터 포인트 사이의 거리
}
}

// 추세선(추세선)
// 원형 차트 통과 seriesDefaults 및 계열 구성 개체 구성

seriesDefaults: {
trendline: {
show: true, // 추세선 표시 여부
color: '#666666', // 추세선 색상
label: '', //추세선 이름
type: 'linear', //추세선 유형 'linear'(직선), 'exponential'(power value line) 또는 'exp'
Shadow: true, // 그리드와 동일한 속성 설정
lineWidth: 1.5, // 추세선 width
shadowAngle: 45, // 그리드와 동일한 속성 설정
shadowOffset: 1.5, // 그리드 Set과 동일한 속성
shadowDepth: 3, // 그리드와 동일한 속성 설정
shadowAlpha: 0.07 / / 그리드와 속성 설정 동일
}
}
}

뒤에는 사용법과 간단한 예를 설명하겠습니다.