Highcharts 구성 옵션에 대한 자세한 설명

Highcharts는 다양한 구성 옵션 매개변수를 제공합니다. 이 장에서는 Highcharts 구성 옵션의 사용을 자세히 소개합니다.

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

차트 .events .addSeries: 차트에 시리즈를 추가합니다.
chart.events.click : 차트 전체의 그리기 영역에서 발생하는 클릭 이벤트입니다.
chart.events.load: 차트 로딩 이벤트.
chart.events.redraw: 범례를 클릭하여 그림을 표시하거나 숨길 때 트리거될 수 있는 차트 다시 그리기 이벤트입니다.
chart.events.selection: 이 이벤트는 차트 곡선을 선택적으로 확대할 수 있고 차트 작업을 선택한 경우에 트리거될 수 있습니다.
chart.height: 그려진 차트의 높이 값입니다.
chart.inverted: 차트의 x축과 y축이 반전됩니다.
chart.폴라: 극좌표 차트인지 여부.
chart.reflow: 창 크기가 변경되면 차트 너비가 창 크기 변경에 맞춰 조정됩니다.
chart.renderTo: 차트가 로드되는 위치는 페이지의 DOM 개체입니다.
chart.showAxes: 빈 차트에 좌표축을 표시할지 여부입니다.
chart.type: 차트 유형, 기본값은 선, 막대/열/원...
chart.width: 차트 그리기 영역의 너비, 기본값은 적응형입니다.
chart.zoomType: 차트에 있는 데이터 보고서의 확대/축소 유형입니다. X축, Y축 또는 둘 다를 확대할 수 있습니다.
색상: 차트에 여러 열이 있는 경우 열 사이의 색상입니다. 배열이며 일반적으로 움직이지 않습니다.
credits.enabled: 저작권 정보 표시 허용 여부.
credits.href: 저작권 링크.
credits.text: 저작권 정보 표시 텍스트입니다.
exporting.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: 데이터 차트에서 범례에 있는 항목을 클릭하면 이벤트가 발생합니다. false로 직접 지정하면 클릭이 불가능합니다.
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.arearange,plotOptions.areaspline,plotOptions.areasplinerange는plotOptions.area
plotOptions.bar.groupPadding과 유사합니다. 히스토그램 그룹화의 경우 각 그룹화 사이의 간격입니다.
plotOptions.bar.grouping: 데이터를 그룹화할지 여부입니다.
plotOptions.bar.minPointLength:: 포인트 값이 0일 때 포인트의 최소 길이를 정의합니다.
plotOptions.bar.showInLegend: 범례에 표시할지 여부입니다.
plotOptions.bar.stacking: 값 또는 백분율(일반/백분율)로 스택할지 여부입니다.
plotOptions.column,plotOptions.columnrange는plotOptions.bar와 유사합니다.
plotOptions.line 관련 구성은plotOptions.area 구성과 유사합니다.
plotOptions.pie.ignoreHiddenPoint: 원형 차트에서 범례를 클릭하여 특정 시퀀스를 숨긴 후 전체 원형 차트를 100%로 재배포할지 아니면 원본 그림을 기준으로만 숨길지, 틈을 보이고 있습니다.
plotOptions.pie.innerSize: 원형 차트를 그릴 때 원형 차트 중앙에 얼마나 많은 공간을 남겨야 하는지.
plotOptions.pie.slicedOffset: AllowPointSelect와 함께 사용되며, 점을 클릭하면 해당 섹터가 벗겨집니다. 이 매개변수는 거리를 구성합니다.
plotOptions.pie의 다른 일반적인 구성 매개변수는plotOptions.area,plotOptions.scatter,plotOptions.series와 유사하며,plotOptions.spline의 관련 구성은plotOptions.area 구성과 유사합니다.
series: 배열입니다.
series.data.color: 특정 데이터의 색상입니다.
series.data.dataLabels: 시퀀스의 특정 데이터에 대한 데이터 레이블입니다.
series.data.events는plotOptions.area.point.events의 관련 구성과 유사합니다.
series.data.marker는plotOptions.area.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: 여러 좌표축을 사용하는 경우 특정 시퀀스가 해당하는 좌표축을 지정합니다.
자막: 차트의 자막을 구성합니다.
title: 차트 제목을 구성합니다.
tooltip: 차트의 데이터에 대한 버블 팁을 구성합니다.
tooltip.valueDecimals: 허용되는 소수점 이하 자릿수입니다.
tooltip.percentageDecimals: 백분율에 허용되는 소수 자릿수입니다.
xAxis, yAxis 구성 설정 축
allowDecimals: 축에 소수점 사용 여부.
categories: 좌표축의 분류인 배열입니다.
plotLines: 주요 선을 그립니다.
tickColor: 진드기 색상.
tickInterval: 눈금의 단계 값입니다.
labels.rotation: 눈금 레이블 회전 각도

Chart: 차트 영역 옵션

차트 차트 영역 옵션은 차트 영역 관련 속성을 설정하는 데 사용됩니다.

). 메인 차트 영역의 테두리 너비여부입니다. 그림자를 설정하려면 배경색인 backgroundColor를 설정해야 합니다. 차트 영역 높이와 너비를 자동으로 사용할지 여부입니다. 너비와 높이가 설정되지 않은 경우 크기가 조정됩니다. 마우스를 드래그하여 확대/축소하고, x축 또는 y축을 따라 확대/축소하며 다음과 같이 설정할 수 있습니다: 'x', 'y', 'xy'이벤트 콜백은 addSeries 메소드, 클릭 메소드, 로드 메소드, 선택 메소드 등의 콜백 기능을 지원합니다. 색상: 색상 옵션 ParameterDescription

Parameter	Description	기본값
BackgroundColor	차트 영역 배경색 설정	#FFFFFF
borderWidth	차트 테두리 너비 설정	0
borderRadius	설정 차트 테두리 필렛 각도	5
renderTo	차트 배치를 위한 컨테이너, 일반적으로 DIV	null
defaultType	Default 차트 유형 라인의 id 속성 값을 얻기 위해 html에 DIV를 배치합니다. , spline ,area,areaspline,column,bar,pie,scatter	0
width	차트 너비, 기본 너비는 차트 컨테이너	null
height	차트 높이에 따라 조정됩니다. 기본값은 차트 컨테이너를 기반으로 합니다. 높이에 적응	null
margin	차트와 다른 요소 사이의 간격을 설정합니다(예: [0,0,0,0]	[null]
plotBackgroundColor	메인 차트 영역 배경색, 즉	plotBorderWidth
0		shadow
false		reflow
true		zoomType
'		events

색상 색상 옵션은 차트의 색 구성표를 설정하는 데 사용됩니다.

기본값

color차트, 선/열/원형 및 기타 차트의 색상을 배열 형식으로 표시하는 데 사용됩니다.

배열

Highcharts는 기본적으로 여러 색상 구성표를 제공합니다. 색상 유형보다 표시할 그래픽이 더 많은 경우 첫 번째 색상 구성표에서 추가 그래픽이 자동으로 선택됩니다. 색 구성표를 사용자 정의하는 방법:

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

제목: 제목 옵션

제목 제목 옵션은 차트의 제목 관련 속성을 설정하는 데 사용됩니다.

Parameters	Description	기본값
text	제목 텍스트 내용입니다.	차트 제목
align	가로 정렬.	center
verticalAlign	수직 정렬.	top
margin	제목과 부제 사이의 공백 또는 메인 차트 간격입니다.	15
floating	플로팅 여부 true인 경우 제목이 메인 차트 영역에서 벗어날 수 있으며 x, y 속성과 함께 사용할 수 있습니다.	false
style	CSS 스타일을 설정하세요.	{색상: '#3E576F', FontSize: '16px'}

자막 옵션

자막에서 제공하는 속성 옵션은 제목과 거의 동일하며, 텍스트 옵션을 참고하시면 됩니다. 자막의 기본값은 '', 즉 비어 있으므로 기본적으로 자막이 표시되지 않습니다.

xAxis: X축 옵션

X축 옵션은 차트의 X축 관련 속성을 설정하는 데 사용됩니다.

Parameter	Description	기본값
categories	X축 범주 이름, 배열을 설정합니다. 예: 범주: ['사과', '바나나', '오렌지']	[]
title	X축 이름은 텍스트, 활성화, 정렬, 회전, 스타일 및 기타 속성을 지원합니다.
labels	각 카테고리 이름의 스타일, 포맷터, 각도 회전 등을 설정합니다. X 축에.	array
max	X축 최대값(범주가 비어 있는 경우), null인 경우 최대값은 X축 데이터를 기준으로 자동으로 최대값과 일치합니다.	null
min	X축 최소값(범주가 비어 있는 경우), null인 경우 최소값은 X축 데이터를 기준으로 자동으로 최소값과 일치합니다.	array
gridLineColor	그리드(세로선) color	#C 0C0C0
gridLineWidth	그리드(세로선) 너비	1
lineColor	기준선 색상	# C0D0E0
lineWidth	기준선 너비	0

yAxis: Y축 옵션

Y축 옵션은 위의 xAxis 옵션과 기본적으로 동일하며, 위 표의 매개변수 설정을 참고하시면 별도로 기재되지 않습니다.

시리즈: 데이터 컬럼 옵션

데이터 컬럼 옵션은 차트에 표시할 데이터와 관련된 속성을 설정하는 데 사용됩니다.

Parameter	Description	기본값
data	차트에 표시되는 데이터 열은 배열 또는 JSON 형식의 데이터일 수 있습니다. 예: data:[0, 5, 3, 5] 또는 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	''
name	은 데이터 열의 이름을 표시합니다.	''
type	데이터 열 유형, 영역, 영역플라인, 막대, 열, 선, 파이, 분산형 또는 스플라인을 지원합니다	line

plotOptions: 데이터 포인트 옵션

plotOptions가 사용됩니다. 차트의 데이터 포인트와 관련된 속성을 설정합니다. 플롯 옵션에는 다양한 차트 유형에 따라 속성 설정이 약간 다릅니다. 이제 일반 옵션이 나열됩니다.

Parameter	Description	기본값
enabled	데이터 포인트에 직접 데이터를 표시할지 여부	false
allowPointSelect	사용을 허용할지 여부 데이터를 선택하는 마우스 포인트	false
formatter	콜백 함수, 형식화된 데이터 표시 내용	formatter: function() {return this.y;}

툴팁: 데이터 포인트 프롬프트 상자

툴팁은 데이터 포인트에 마우스를 슬라이드할 때 표시되는 프롬프트 상자 정보를 설정하는 데 사용됩니다.

Parameter	Description	기본값
enabled	프롬프트 상자 표시 여부	true
BackgroundColor	프롬프트 상자의 배경색 설정	rgba(255, 255, 255, .85)
borderColor	기본적으로 데이터 열의 색상과 자동으로 일치하는 프롬프트 상자 테두리 색상	auto
borderRadius	프롬프트 상자 둥근 각도	5
shadow	프롬프트 상자 표시 여부 Shadow	true
style	글꼴 색상 등 프롬프트 상자의 콘텐츠 스타일을 설정합니다.	color:'#333'
formatter	콜백 함수는 출력 프롬프트 상자의 표시 내용 형식을 지정하는 데 사용됩니다. 반환된 콘텐츠는 <b>, <strong>, <i>, <em>, <br/>, <span>	2

Legend와 같은 html 태그를 지원합니다. : 범례 옵션

legend는 범례 관련 속성을 설정하는 데 사용됩니다.

매개변수	설명	기본값
layout	표시 양식, 가로 가로 및 세로 세로	horizontal
align	정렬을 지원합니다.	center
BackgroundColor	범례 배경색입니다.	null
borderColor	범례 테두리 색상입니다.	#909090
borderRadius	범례 테두리 각도	5
enabled	범례 표시 여부	true
floating	플로팅할 수 있고 x 및 y와 일치할 수 있는지 여부 속성.	false
shadow	그림자 표시 여부	false
style	범례 콘텐츠 스타일 설정	''