Highcharts 구성 옵션이 자세히 설명되어 있습니다
Highcharts 구성 옵션 매개 변수를 많이 제공합니다, 당신은 쉽게 사용하기에 더 Highcharts 구성 옵션을 찾아 사용자의 요구 사항이 섹션의 차트를 충족하기 위해 사용자 정의 할 수 있습니다 :
구성 매개 변수 (+ 이벤트 속성)
chart.events.addSeries는 : 차트에 열 수를 추가합니다.
chart.events.click : 전체 차트의 그림 영역이 발생하는 이벤트를 클릭합니다.
chart.events.load : 차트로드 이벤트.
chart.events.redraw : 차트, 이벤트를 다시 그리기 전설 쇼를 클릭하고 숨겨진 그림을 트리거 할 수 있습니다.
chart.events.selection : 작업이 이벤트를 트리거 할 때 차트 곡선 선택 줌, 차트를 선택합니다.
chart.height : 높이 차트 그려.
chart.inverted : 차트의 X, 교환에 y 축.
chart.polar : 극 차트 여부.
chart.reflow : 때 창 크기 변경 차트 적응 형 윈도우 크기의 폭이 변화.
chart.renderTo는 : 차트를로드 페이지에 DOM 개체입니다.
chart.showAxes : 빈 차트 축을 표시할지 여부를 지정합니다.
chart.type : 차트 유형, 기본 라인은 바 / 열 / 파이가 ......
chart.width : 차트의 그림 영역의 폭은, 기본은 적응이다.
chart.zoomType : 보고서의 차트 증폭 형 데이터, 당신은 X 축 또는 Y 축 줌으로 확대 할 수 있습니다, 당신은 XY로 확대 할 수 있습니다 동시에 축.
색상 : 차트에서 대부분의 열, 각 색상 사이의 열 수. 일반적으로 이동하지 않습니다 배열이다.
크레딧 .enabled : 저작권 정보의 표시를 허용할지 여부.
credits.href : 링크 저작권.
credits.text : 저작권 정보 표시 텍스트입니다.
.buttons.exportButton.enabled 익스포트 할 : 디스플레이 내보내기 버튼을 허용할지 여부.
exporting.buttons.exportButton.menuItems : 내보내기 버튼 메뉴 옵션을 선택합니다.
exporting.buttons.exportButton.onclick : 내보내기 버튼을 클릭 이벤트가 아닌 내부 메뉴를 선택합니다.
exporting.buttons.printButton.enabled : 인쇄 버튼을 허용할지 여부.
exporting.buttons.printButton.onclick : 인쇄 버튼 이벤트를 클릭합니다.
exporting.enabled : 인쇄 및 내보내기 버튼을 사용할 수 있습니다.
exporting.filename : 익스포트 파일의 이름이다.
exporting.type : 기본 내보내기 그림 파일 형식을 지원합니다.
exporting.url : SVG 변환 차트 및 수출 가공 인터페이스 주소.
exporing.width : 기본적 수출 사진 폭입니다.
레이블 : 레이블이 차트의 임의의 위치에로드 할 수는 항목 스타일이 있습니다.
LANG : 언어 매개 변수 구성 및 내보내기 버튼 메뉴 이름 및 기타 구성 시간과 관련된 구성.
legend.enabled : 전설을 허용할지 여부를 지정합니다.
navigation.buttonOptions.enabled : 차트 탐색 버튼을 모두 클릭 할 수 있는지 여부.
plotOptions .area.allowPointSelect : 클릭 데이터 포인트를 허용할지 여부를 지정합니다.
plotOptions.area.color : 색상을 그리기.
plotOptions.area.dataLabels.enabled : 데이터 레이블 허용 여부.
plotOptions.area.enableMouseTracking : 그래프의 데이터를 허용할지 여부를, 마우스 추적 거품 데이터 포인트가 표시된다.
plotOptions.area.events.checkboxClick : 차트 범례 확인란을 클릭 이벤트에서 데이터.
plotOptions.area.events.click : 데이터 차트, 데이터 포인트는 이벤트를 클릭합니다.
plotOptions.area.events.hide : 데이터 차트 이벤트 데이터 시퀀스 숨겨진.
plotOptions.area.events.show : 데이터 차트 이벤트 데이터 시퀀스를 표시.
plotOptions.area.events.legendItemClick : 데이터 차트, 이벤트 아이템의 전설 클릭, 직접 할당 거짓, 그것을 클릭 할 수 없습니다.
plotOptions.area.events.mouseOut : 이벤트 중 마우스 데이터 포인트.
plotOptions.area.events.mouseOver : 이벤트 후 마우스 데이터 포인트.
plotOptions.area.marker.enabled : 차트 드로잉 포인트 태그를 표시할지 여부.
plotOptions.area.marker.states.hover.enabled : 태그 롤오버 상태를 허용할지 여부.
plotOptions.area.marker.states.select.enabled : 태그 선택 상태를 허용할지 여부.
plotOptions.area.point.events.click : 모든 단일 지점에서 클릭 이벤트를 차트.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove 이벤트는 차트의 포인트가 사용됩니다 삭제.
plotOptions.area.point.events.select : 차트 중간 이벤트를 선택합니다.
plotOptions.area.point.events.unselect 이벤트 차트 중간 점을 선택 해제 할 때.
plotOptions.area.point.events.update는 : 갱신 이벤트 차트 때 데이터를 발생한다.
plotOptions.area.visible : 기본 데이터 계열이 표시되거나 숨겨로드 할 때.
plotOptions.area.zIndex : 다중 시퀀스의 경우, 각 시퀀스의 적층 순서를 조정한다.
같은 point.events 위 또한 클래스 다이어그램 (arearange, areaspline, areasplinerange), 다른 히스토그램 (막대, 열) 및 모든 차트의 다른 영역에 적용됩니다.
plotOptions.area.showInLegend : 범례에 표시할지 여부를 지정합니다.
plotOptions.area.stacking : 적층 스택 또는 백분율 값이다.
plotOptions.area.states.hover.enabled : 주 마우스를 넣을 수 있는지 여부.
plotOptions.area.stickyTracking : 끈적 마우스 트래킹 데이터 포인트.
plotOptions.area 유사한 plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange
plotOptions.bar.groupPadding : 각 패킷 사이에 막대 차트 패킷 간격하십시오.
plotOptions.bar.grouping : 데이터 그룹에 있는지 여부.
plotOptions.bar.minPointLength :: 포인트 값이 0, 최소 길이의 점에 대한 것입니다 정의
plotOptions.bar.showInLegend : 범례에 표시할지 여부를 지정합니다.
plotOptions.bar.stacking : 스택의 값은 스택 또는 백분율 (일반 / %) 등이다.
plotOptions.bar 유사한 plotOptions.column, plotOptions.columnrange
plotOptions.line 관련 구성이 비슷한 plotOptions.area 구성입니다.
plotOptions.pie.ignoreHiddenPoint : 원형 차트에서, 전설에 의해 특정 시퀀스 숨길 클릭, 전체 파이 차트는 100 % 재 할당, 또는 차이를 보여, 원래의 기준으로 만 숨겨져 있습니다.
plotOptions.pie.innerSize : 파이 차트를 그릴 때, 파이 차트 센터는 많은 빈 예약 할 수 있습니다.
plotOptions.pie.slicedOffset : allowPointSelect이 지점을 클릭와 함께,에서 사용하는 해당 분야 껍질, 거리 이격되어이 구성 매개 변수.
다른 일반적인 구성은 plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline 관련 구성 유사한 plotOptions.area 구성에 plotOptions.pie의 유사성을 매개 변수.
시리즈 : 배열.
series.data.color : 하나의 색상 데이터.
series.data.dataLabels : 하나의 시퀀스 데이터 레이블 데이터.
plotOptions.area.point.events의 구성과 유사 series.data.events.
plotOptions.area.marker의 구성과 유사 series.data.marker.
series.data.name : 구성 데이터 포인트의 이름.
series.data.sliced : 원형 차트를 구성, 섹터 크기를 분리하는 거리.
series.data.x : 점의 x 값.
series.data.y : 포인트의 Y 값입니다.
series.name 상기 데이터 시퀀스의 이름.
series.stack : 적층 그룹 인덱스입니다.
series.type : 데이터 시퀀스 표시 유형입니다.
series.xAxis, series.yAxis : 여러 축을 사용하는 경우, 열 번호에 대응하는 축에 지정한다.
자막 : 차트의 자막을 구성.
제목 : 차트 구성의 제목입니다.
도구 설명 : 차트에 거품 프롬프트 데이터를 구성합니다.
tooltip.valueDecimals는 : 소수점 이하 자릿수를 허용합니다.
tooltip.percentageDecimals는 : 소수점 이하 자릿수의 비율을 허용합니다.
x 축, y 축 축 구성 설정
allowDecimals : 축 소수를 허용할지 여부를 지정합니다.
카테고리 : 분류 축 배열.
줄거리 : 메인 선을 그립니다.
tickColor : 색 눈금.
tickInterval : 단계 값 규모.
labels.rotation : 규모는 회전의 정도 레이블
차트 : 차트 영역 옵션
차트 차트 영역 차트 영역 옵션은 속성을 설정하는 데 사용됩니다.
매개 변수 | 기술 | 디폴트 값 |
---|---|---|
backgroundColor로 | 설정 차트 영역 배경색 | #FFFFFF |
borderWidth | 차트 테두리 너비를 설정합니다 | 0 |
borderRadius | 국경을 설정, 각 둥근 | (5) |
renderTo | 일반적으로 DIV의 HTML에 배치 컨테이너를 배치 차트는 DIV의 id 속성 값을 가져 | 널 (null) |
defaultSeriesType | 기본 차트 유형 라인, 스플라인, 면적, areaspline, 열, 바, 파이, 분산 | 0 |
폭 | 차트 폭, 차트 컨테이너 기본 폭 적응에 따라 | 널 (null) |
신장 | 고도의 적응에 따라 높이 차트, 기본 차트 용기 | 널 (null) |
여유 | 같은 차트 피치 배열 및 기타 요소 [0,0,0,0] | [널] |
plotBackgroundColor | 배경 색상 메인 차트 영역 배경 색상, X 및 닫힌 영역의 Y 축 | 널 (null) |
plotBorderColor | 경계 영역의 색상은 둘러싸인 영역의 기본 그래프의 X와 Y 축 테두리 | 널 (null) |
plotBorderWidth | 메인 차트 영역 테두리의 폭 | 0 |
그림자 | 그림자는 당신이 배경 색상에 backgroundColor를 설정해야합니다 설정되어 있습니다. | 그릇된 |
리플 로우 | 폭과 높이가 설정되어 있지 않은 경우, 높이와 폭에서 차트 영역을 사용하든, 크기가 적응 될 것입니다. | 참된 |
zoomType | 'X', 'Y', 'XY'는 x 또는 y 축을 따라 줌 마우스, 줌을 드래그로 설정할 수 있습니다 | '' |
이벤트 | 이벤트 콜백 지원 addSeries 방법, 방법, 부하 방법, 콜백 함수의 선택 방법을 클릭합니다. |
색상 : 색상 선택
컬러 차트의 색상을 설정 색상 옵션.
매개 변수 | 기술 | 디폴트 값 |
색 | 그래서 컬러 디스플레이, 차트의 배열, 행 / 바 / 원형 차트하십시오. | 배열 |
당신이 더 많은 종류 이상의 컬러 그래픽을 표시하기 위해 더 많은 그래픽을 자동으로 첫 번째 색상 선택에서 시작 할 때 Highcharts는 이미 몇 가지 기본 색 구성표를 제공합니다. 사용자 지정 색 구성표 방법 :
Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });
제목 : 제목 옵션
제목 캡션 옵션은 차트 제목의 관련 속성을 설정하는 데 사용됩니다.
매개 변수 | 기술 | 디폴트 값 |
---|---|---|
본문 | 제목 텍스트입니다. | 차트 제목 |
정렬 | 수평 방향의 배치입니다. | 센터 |
은 verticalAlign | 수직 정렬. | 상단 |
여유 | 메인 제목과 자막 또는 차트 피치 범위 사이. | (15) |
부유 | 부동 여부, true의 경우, 제목은 X, Y 속성과 메인 차트 영역에서 상쇄 될 수 있습니다. | 그릇된 |
스타일 | 설정 CSS 스타일. | {색상 : '# 3E576F' fontSize는 '16px'} |
자막 : 자막 옵션
속성 옵션 제목과 실질적으로 동일한 제목을 부제 제목 위의 옵션을 참조 할 수 있습니다, 자막이 기본적으로 표시되지 않도록 ''에 자막 텍스트 옵션 기본값, 즉 비어 있음을 언급 할 가치가있다.
x 축 : X 축 옵션
X 축 옵션은 차트의 X 축에게 관련 속성을 설정하는 데 사용됩니다.
매개 변수 | 기술 | 디폴트 값 |
---|---|---|
카테고리 | 예를 들어, 어레이를 X 축 카테고리 이름을 설정 카테고리 : '사과', '바나나', '오렌지'] | [] |
표제 | X 축 이름, 지원 텍스트, 회전, 스타일과 다른 속성을 정렬 활성화 | |
라벨 | 각 카테고리 이름 스타일 스타일의 X 축, 형식의 포맷, 회전 각도 등을 설정합니다. | 배열 |
최대 | null의 경우 X 축의 최대 값 (카테고리 비어), 그 최대 값은 자동으로 최대로 X 축 데이터와 일치한다. | 널 (null) |
분 | null의 경우 X 축의 최소값 (카테고리 비어) 다음 최소값 자동 최소로 X 축 데이터와 일치한다. | 배열 |
gridLineColor | 그리드 (세로) 색상 | # C0C0C0 |
gridLineWidth | 그리드 (수직 막대) 폭 | (1) |
lineColor | 기본 색상 | # C0D0E0 |
선폭 | 베이스 라인 폭 | 0 |
y 축 : Y 축 옵션
Y 축 옵션은 상기 x 축 옵션과 일치, 설정이 개별적으로 나열 더 이상 매개 변수의 표를 참조하시기 바랍니다.
시리즈 : 데이터 열 옵션
데이터 열 옵션 데이터를 관련 속성을 표시하는 차트를 설정하는 데 사용됩니다.
매개 변수 | 기술 | 디폴트 값 |
---|---|---|
데이터 | 배열이나 JSON 형식의 데이터가 될 수있는 차트 데이터 컬럼에 표시됩니다. 예를 들면 : 데이터 : [0, 5, 3, 5, 또는 데이터 : [{이름 : '포인트 1', Y : 0}, {이름 : '포인트 2', Y : 5}] | '' |
이름 | 데이터 컬럼의 이름을 표시합니다. | '' |
유형 | 열 데이터 유형, 지원 영역, areaspline, 바, 열, 선, 파이, 분산 또는 스플라인 | 라인 |
plotOptions : 데이터 포인트 옵션
plotOptions 속성과 관련된 그래프의 데이터 포인트를 설정하는 데 사용. plotOptions 다양한 차트 유형에 따르면, 그 속성은 현재 일반적으로 사용되는 옵션을 나열 약간 다른 설정합니다.
매개 변수 | 기술 | 디폴트 값 |
사용 가능 | 데이터는 데이터 요소에 직접 표시 | 그릇된 |
allowPointSelect | 데이터 요소를 선택하고, 마우스를 사용할 수 있는지 여부 | 그릇된 |
포맷터 | 콜백 함수 데이터 표시 형식 | 포맷 : 함수 () {this.y를 반환;} |
도움말 : 풍선 데이터 포인트
마우스 슬라이드 데이터 포인트가 표시 될 때 프롬프트 상자를 설정하기위한 도움말 정보.
매개 변수 | 기술 | 디폴트 값 |
사용 가능 | 프롬프트 상자를 표시할지 여부 | 참된 |
backgroundColor로 | 배경색 풍선 집합 | RGBA (255, 255, 255, 0.85) |
의 borderColor | 풍선 테두리 색상이 기본 데이터 열 자동 컬러 일치 | 자동 |
borderRadius | 라운드 각도를 풍선 | (5) |
그림자 | 프롬프트 상자 그림자를 표시할지 여부를 | 참된 |
스타일 | 등의 글꼴 색상, 같은 설정 풍선 콘텐츠 스타일, | 색상 : '# 333' |
포맷터 | 콜백 기능은 풍선 디스플레이의 출력을 포맷합니다. 이러한 html 태그로 돌아 가기 지원 내용 : <B>, <강한>, <난>, <EM>, <BR/>, <SPAN> | 이 |
설명 : 전설 옵션
전설 전설의 속성을 설정하는 데 사용됩니다.
매개 변수 | 기술 | 디폴트 값 |
---|---|---|
레이아웃 | 표시 형식, 지원의 수직 수직 및 수평 수준 | 수평 |
정렬 | 정렬. | 센터 |
backgroundColor로 | 전설의 배경 색상. | 널 (null) |
의 borderColor | 전설의 테두리 색상. | # 909090 |
borderRadius | 전설의 테두리 각도 | (5) |
사용 가능 | 범례를 표시할지 여부를 | 참된 |
부유 | 나는 X, Y 속성, 떠 있습니다. | 그릇된 |
그림자 | 그림자를 표시할지 여부를 | 그릇된 |
스타일 | 전설 스타일의 내용 | '' |
자세한 내용은 영어 문서 highcharts의 공식 웹 사이트를 참조하십시오 http://api.highcharts.com/highcharts