Jquery 그래픽 보고서 플러그인 jqplot 소개 및 세부 매개변수 설명_jquery

기능 개요:

선택할 수 있는 다양한 차트 스타일
날짜 축 사용자 정의 가능
회전 축 텍스트 설정 가능
추세선 자동 계산
도구 모음 팁 및 강조 표시 data
을 클릭하면 최적의 설정으로 기본 설정되며 사용이 매우 쉽습니다.
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:'hello %.2f'
} ,

// LogAxisRenderer(지수 렌더러)
// 이 렌더러에는 두 가지 속성만 있습니다. axisDefaults 및 축 구성 객체를 통해 구성

axesDefaults: {
base: 10, // 인덱스의 기준
tickDistribution: 'even', // 좌표축 표시 모드: 'even' 또는 'power'. '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 / / 그리드와 속성 설정 동일
}