jquery jqPlot API 중국어 사용 튜토리얼(매우 강력한 차트 작성 도구)_jquery

title: '', //현재 사진의 제목 설정
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 //그리드와 동일한 속성 설정
}
}
}