Latest web development tutorials

Highcharts 구성 옵션이 자세히 설명되어 있습니다

Highcharts 구성 옵션 매개 변수를 많이 제공합니다, 당신은 쉽게 사용하기에 더 Highcharts 구성 옵션을 찾아 사용자의 요구 사항이 섹션의 차트를 충족하기 위해 사용자 정의 할 수 있습니다 :


구성 매개 변수 (+ 이벤트 속성)

  1. chart.events.addSeries는 : 차트에 열 수를 추가합니다.

  2. chart.events.click : 전체 차트의 그림 영역이 발생하는 이벤트를 클릭합니다.

  3. chart.events.load : 차트로드 이벤트.

  4. chart.events.redraw : 차트, 이벤트를 다시 그리기 전설 쇼를 클릭하고 숨겨진 그림을 트리거 할 수 있습니다.

  5. chart.events.selection : 작업이 이벤트를 트리거 할 때 차트 곡선 선택 줌, 차트를 선택합니다.

  6. chart.height : 높이 차트 그려.

  7. chart.inverted : 차트의 X, 교환에 y 축.

  8. chart.polar : 극 차트 여부.

  9. chart.reflow : 때 창 크기 변경 차트 적응 형 윈도우 크기의 폭이 변화.

  10. chart.renderTo는 : 차트를로드 페이지에 DOM 개체입니다.

  11. chart.showAxes : 빈 차트 축을 표시할지 여부를 지정합니다.

  12. chart.type : 차트 유형, 기본 라인은 바 / 열 / 파이가 ......

  13. chart.width : 차트의 그림 영역의 폭은, 기본은 적응이다.

  14. chart.zoomType : 보고서의 차트 증폭 형 데이터, 당신은 X 축 또는 Y 축 줌으로 확대 할 수 있습니다, 당신은 XY로 확대 할 수 있습니다 동시에 축.

  15. 색상 : 차트에서 대부분의 열, 각 색상 사이의 열 수. 일반적으로 이동하지 않습니다 배열이다.

  16. 크레딧 .enabled : 저작권 정보의 표시를 허용할지 여부.

  17. credits.href : 링크 저작권.

  18. credits.text : 저작권 정보 표시 텍스트입니다.

  19. .buttons.exportButton.enabled 익스포트 할 : 디스플레이 내보내기 버튼을 허용할지 여부.

  20. exporting.buttons.exportButton.menuItems : 내보내기 버튼 메뉴 옵션을 선택합니다.

  21. exporting.buttons.exportButton.onclick : 내보내기 버튼을 클릭 이벤트가 아닌 내부 메뉴를 선택합니다.

  22. exporting.buttons.printButton.enabled : 인쇄 버튼을 허용할지 여부.

  23. exporting.buttons.printButton.onclick : 인쇄 버튼 이벤트를 클릭합니다.

  24. exporting.enabled : 인쇄 및 내보내기 버튼을 사용할 수 있습니다.

  25. exporting.filename : 익스포트 파일의 이름이다.

  26. exporting.type : 기본 내보내기 그림 파일 형식을 지원합니다.

  27. exporting.url : SVG 변환 차트 및 수출 가공 인터페이스 주소.

  28. exporing.width : 기본적 수출 사진 폭입니다.

  29. 레이블 : 레이블이 차트의 임의의 위치에로드 할 수는 항목 스타일이 있습니다.

  30. LANG : 언어 매개 변수 구성 및 내보내기 버튼 메뉴 이름 및 기타 구성 시간과 관련된 구성.

  31. legend.enabled : 전설을 허용할지 여부를 지정합니다.

  32. navigation.buttonOptions.enabled : 차트 탐색 버튼을 모두 클릭 할 수 있는지 여부.

  33. plotOptions .area.allowPointSelect : 클릭 데이터 포인트를 허용할지 여부를 지정합니다.

  34. plotOptions.area.color : 색상을 그리기.

  35. plotOptions.area.dataLabels.enabled : 데이터 레이블 허용 여부.

  36. plotOptions.area.enableMouseTracking : 그래프의 데이터를 허용할지 여부를, 마우스 추적 거품 데이터 포인트가 표시된다.

  37. plotOptions.area.events.checkboxClick : 차트 범례 확인란을 클릭 이벤트에서 데이터.

  38. plotOptions.area.events.click : 데이터 차트, 데이터 포인트는 이벤트를 클릭합니다.

  39. plotOptions.area.events.hide : 데이터 차트 이벤트 데이터 시퀀스 숨겨진.

  40. plotOptions.area.events.show : 데이터 차트 이벤트 데이터 시퀀스를 표시.

  41. plotOptions.area.events.legendItemClick : 데이터 차트, 이벤트 아이템의 전설 클릭, 직접 할당 거짓, 그것을 클릭 할 수 없습니다.

  42. plotOptions.area.events.mouseOut : 이벤트 중 마우스 데이터 포인트.

  43. plotOptions.area.events.mouseOver : 이벤트 후 마우스 데이터 포인트.

  44. plotOptions.area.marker.enabled : 차트 드로잉 포인트 태그를 표시할지 여부.

  45. plotOptions.area.marker.states.hover.enabled : 태그 롤오버 상태를 허용할지 여부.

  46. plotOptions.area.marker.states.select.enabled : 태그 선택 상태를 허용할지 여부.

  47. plotOptions.area.point.events.click : 모든 단일 지점에서 클릭 이벤트를 차트.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove 이벤트는 차트의 포인트가 사용됩니다 삭제.

  51. plotOptions.area.point.events.select : 차트 중간 이벤트를 선택합니다.

  52. plotOptions.area.point.events.unselect 이벤트 차트 중간 점을 선택 해제 할 때.

  53. plotOptions.area.point.events.update는 : 갱신 이벤트 차트 때 데이터를 발생한다.

  54. plotOptions.area.visible : 기본 데이터 계열이 표시되거나 숨겨로드 할 때.

  55. plotOptions.area.zIndex : 다중 시퀀스의 경우, 각 시퀀스의 적층 순서를 조정한다.

  56. 같은 point.events 위 또한 클래스 다이어그램 (arearange, areaspline, areasplinerange), 다른 히스토그램 (막대, 열) 및 모든 차트의 다른 영역에 적용됩니다.

  57. plotOptions.area.showInLegend : 범례에 표시할지 여부를 지정합니다.

  58. plotOptions.area.stacking : 적층 스택 또는 백분율 값이다.

  59. plotOptions.area.states.hover.enabled : 주 마우스를 넣을 수 있는지 여부.

  60. plotOptions.area.stickyTracking : 끈적 마우스 트래킹 데이터 포인트.

  61. plotOptions.area 유사한 plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange

  62. plotOptions.bar.groupPadding : 각 패킷 사이에 막대 차트 패킷 간격하십시오.

  63. plotOptions.bar.grouping : 데이터 그룹에 있는지 여부.

  64. plotOptions.bar.minPointLength :: 포인트 값이 0, 최소 길이의 점에 대한 것입니다 정의

  65. plotOptions.bar.showInLegend : 범례에 표시할지 여부를 지정합니다.

  66. plotOptions.bar.stacking : 스택의 값은 스택 또는 백분율 (일반 / %) 등이다.

  67. plotOptions.bar 유사한 plotOptions.column, plotOptions.columnrange

  68. plotOptions.line 관련 구성이 비슷한 plotOptions.area 구성입니다.

  69. plotOptions.pie.ignoreHiddenPoint : 원형 차트에서, 전설에 의해 특정 시퀀스 숨길 클릭, 전체 파이 차트는 100 % 재 할당, 또는 차이를 보여, 원래의 기준으로 만 숨겨져 있습니다.

  70. plotOptions.pie.innerSize : 파이 차트를 그릴 때, 파이 차트 센터는 많은 빈 예약 할 수 있습니다.

  71. plotOptions.pie.slicedOffset : allowPointSelect이 지점을 클릭와 함께,에서 사용하는 해당 분야 껍질, 거리 이격되어이 구성 매개 변수.

  72. 다른 일반적인 구성은 plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline 관련 구성 유사한 plotOptions.area 구성에 plotOptions.pie의 유사성을 매개 변수.

  73. 시리즈 : 배열.

  74. series.data.color : 하나의 색상 데이터.

  75. series.data.dataLabels : 하나의 시퀀스 데이터 레이블 데이터.

  76. plotOptions.area.point.events의 구성과 유사 series.data.events.

  77. plotOptions.area.marker의 구성과 유사 series.data.marker.

  78. series.data.name : 구성 데이터 포인트의 이름.

  79. series.data.sliced ​​: 원형 차트를 구성, 섹터 크기를 분리하는 거리.

  80. series.data.x : 점의 x 값.

  81. series.data.y : 포인트의 Y 값입니다.

  82. series.name 상기 데이터 시퀀스의 이름.

  83. series.stack : 적층 그룹 인덱스입니다.

  84. series.type : 데이터 시퀀스 표시 유형입니다.

  85. series.xAxis, series.yAxis : 여러 축을 사용하는 경우, 열 번호에 대응하는 축에 지정한다.

  86. 자막 : 차트의 자막을 구성.

  87. 제목 : 차트 구성의 제목입니다.

  88. 도구 설명 : 차트에 거품 프롬프트 데이터를 구성합니다.

  89. tooltip.valueDecimals는 : 소수점 이하 자릿수를 허용합니다.

  90. tooltip.percentageDecimals는 : 소수점 이하 자릿수의 비율을 허용합니다.

  91. x 축, y 축 축 구성 설정

  92. allowDecimals : 축 소수를 허용할지 여부를 지정합니다.

  93. 카테고리 : 분류 축 배열.

  94. 줄거리 : 메인 선을 그립니다.

  95. tickColor : 색 눈금.

  96. tickInterval : 단계 값 규모.

  97. 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