jqPlot 옵션 구성에 대한 자세한 설명 object_jquery

여기에서는 주로 jqPlot의 핵심 부분인 옵션 구성 객체를 소개합니다. 동시에 jqplot의 각 렌더러에 대해서도 간략하게 소개하겠습니다.
여기에서는 jqPlot 공식 홈페이지에 있는 Option 소개를 주로 참고하고, Option의 관련 속성을 저만의 간단한 연습과 이해를 통해 설명하고 있는데, 부적절하거나 잘못된 부분이 있으면 바로잡아주세요.

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

옵션 =
{
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: '', // 카테고리 이름 상자에 표시되는 카테고리에 사용됩니다. Name
color: '', // 표시되는 분류의 색상입니다. 아이콘(할인, 막대 차트 등)
lineWidth: 2.5, // 분류 차트의 너비(특히 라인 차트)
shadow: true, // 각 그래프에서 그림자 영역을 표시할지 여부 the Chart
shadowAngle: 45, // 그리드에서 동일한 매개변수 참조
shadowOffset: 1.25, // 그리드에서 동일한 매개변수 참조
shadowDepth: 3, // 동일한 매개변수 참조 in the Grid
shadowAlpha: 0.1, // 그리드의 동일한 매개변수 참조
showLine: true, //차트에 폴리라인을 표시할지 여부(라인 차트의 폴리라인)
showMarker: true, // 그래프에서 데이터 노드를 강조 표시할지 여부
fill: false, // 그래프의 폴리라인 아래 영역을 채울지 여부(채우기 색상은 폴리라인 색상과 동일) 및 색상 범례에 의해 설정된 카테고리 이름 상자의 카테고리
//채우기가 true이면
//showLine이 true여야 하며, 그렇지 않으면 효과가 표시되지 않습니다.
fillAndStroke: false, //When fill이 true이면 채워진 영역의 상단에 선이 표시됩니다. (선 차트인 경우 선이 표시됩니다.)
fillColor: undefine, // 채워진 영역의 색상을 설정합니다.
fillAlpha: undefine, // 채워진 영역의 투명도 설정
renderer: $.jqplot.PieRenderer, //렌더러(여기서는 원형 차트 PieRenderer)를 사용하여 기존 차트를 렌더링
//하여 필수 차트
rendererOptions: {}, // 이전 속성 Object로 설정된 렌더러에 옵션을 전달합니다. 꺾은선형 차트의 렌더러에는 옵션 개체가 없습니다.
//다른 옵션 구성 개체의 경우. 차트의 경우 다음 "jqPlot에 대한 다양한 플러그인의 옵션 개체 설정"을 참조하세요.
//각 차트의 구성 옵션 개체
markerRenderer: $.jqplot.MarkerRenderer, // 차트를 그리는 데 사용하는 렌더러 data
// point markers.
markerOptions: {
show: true, // 그래프에 데이터 포인트를 표시할지 여부
style: 'filledCircle', // 각 데이터 포인트가 표시되는 방식 그래프에서 기본값은 "filledCircle"(채워진 원)입니다.
//여러 가지 방법으로 Circle, Diamond, Square,filledCircle,
//filledDiamond 또는filledSquare
lineWidth: 2, // 데이터 포인트의 각 변의 너비(너무 크게 설정하면 각 변이 반복되어 솔리드 포인트와 유사하게 표시됩니다)
size: 9, // 데이터 포인트의 크기
color: '#666666' // 데이터 포인트 색상
shadow: true, // 데이터 포인트의 그림자 영역 표시 여부(3차원 효과 증가)
shadowAngle: 45, // Shadow Zone 각도, x축 시계 방향
shadowOffset: 1, // 그리드에서 동일한 매개변수를 참조
shadowDepth: 3, // 그리드에서 동일한 매개변수를 참조
shadowAlpha: 0.07 // 그리드에서 동일한 매개변수를 참조 Grid
}
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, // 카테고리 이름 상자와 차트 영역 상단 경계선 사이의 거리(단위 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, // 오디오 및 비디오 영역의 겹치는 그림자 설정 Amount
shadowAlpha : 0.07 // 그림자 영역의 투명도 설정
renderer: $.jqplot.CanvasGridRenderer, // 그리드를 그리는 데 사용할 렌더러.
rendererOptions: {} // 렌더러에 전달할 옵션 . 기본
// CanvasGridRenderer는 추가 옵션을 사용하지 않습니다.
},
/**************************jqPlot의 다양한 플러그인에 대한 옵션 개체 설정**************** ******** **********/
// BarRenderer(히스토그램의 Option 개체 설정)
/ /This 옵션 객체는 히스토그램의 시리즈 및 seriesDefault 속성과 관련된 구성 객체 설정에 적용됩니다.
seriesDefaults: {
rendererOptions: {
barPadding: 8, //동일 카테고리의 두 기둥 막대 사이의 거리를 설정합니다( px)
barMargin: 10, //서로 다른 카테고리의 두 기둥형 막대 사이의 거리(px) 설정(동일한 가로좌표 점)
barDirection: 'vertical', //히스토그램 설정 표시 방향: 수직 표시 및 수평 표시
//, 기본 수직 표시는 수직 또는 수평입니다.
barWidth: null, // 히스토그램의 각 열 막대 너비를 설정합니다.
shadowOffset: 2, // 속성 설정은 다음과 같습니다. Grid
shadowDepth: 5, // 그리드와 속성 설정 동일
shadowAlpha: 0.8, // 그리드와 속성 설정 동일
}
},
// Cursor(cursor )
// 사진 안으로 마우스를 이동하면 사진에 마우스가 표시됩니다. 하이라이트 기능과 함께 자주 사용됩니다.
// 또한 줌 설정을 통해 사진의 특정 영역을 확대할 수 있습니다. 이 속성의 관련 속성입니다. 드릴(선택한 영역 확대)
//이 구성 개체는 옵션
커서: {
스타일: '십자선', //마우스가 움직일 때 직접 구성됩니다. 그림 위에 마우스 스타일 표시, 속성 값은 css class
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 형식 문자열
//예:'< ;span style="color:red;">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',//데이터 레이블은 데이터 근처의 위치를 ​​표시합니다. 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 // 그리드와 동일한 속성 설정
}
}
}

관련 렌더러 소개

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

1.dateAxisRenderer
관련 참조 패키지: