Highcharts에 대한 옵션 구성 매개변수

Chart: 차트 영역 옵션

Chart 차트 영역 옵션은 차트 영역 관련 속성을 설정합니다.
매개 변수
묘사
기본값
backgroundColor
차트 영역 배경색 설정
#FFFFFF
borderWidth
차트 경계 폭 설정
0
borderRadius
차트 경계 필렛 각도 설정
5
renderTo
도표에 놓인 용기, 일반적으로 html에 DIV를 하나 놓고 DIV의 id 속성 값을 가져옵니다
null
defaultSeriesType
기본 그래프 형식line,spline,area,areaspline,column,bar,pie,scatter
0
width
그래프 너비, 기본적으로 그래프 용기에 따라 너비 적응
null
height
도표 높이, 기본적으로 도표 용기에 따라 높이에 적응
null
margin
도표와 다른 요소 사이의 간격을 설정합니다. 예를 들어 [0,0,0,0]
[null]
plotBackgroundColor
기본 차트 영역 배경색(X축과 Y축으로 둘러싸인 영역의 배경색)
null
plotBorderColor
마스터 차트 영역의 경계 색상(X축과 Y축으로 둘러싸인 영역의 경계 색상)
null
plotBorderWidth
주 차트 영역 테두리의 폭
0
shadow
그림자를 설정할 지 여부입니다. 배경색 backgroundColor를 설정해야 합니다.
false
reflow
도표 영역의 높이와 너비를 직접 사용하는지 여부입니다. width와 Height를 설정하지 않았을 때 크기에 따라 조절됩니다.
true
zoomType
마우스를 드래그하여 줌하고 x축 또는 y축을 따라 줌하면'x','y','xy'로 설정할 수 있습니다.
''
events
이벤트 리셋,ddSeries 방법,click 방법,load 방법,selection 방법 등의 리셋 함수를 지원합니다.

Color:색상 옵션

Color 색상 옵션은 차트의 색상 체계를 설정합니다.
매개 변수
묘사
기본값
color
도표, 접선/기둥형/떡형 등 도표의 색깔, 수조 형식을 보여 줍니다.
array
Highcharts는 기본적으로 여러 가지 색 배열을 제공합니다. 표시할 그림이 색 종류보다 많을 때, 더 많은 색 배열은 자동으로 첫 번째 색 배열부터 선택됩니다.색상 스키마를 사용자 정의하는 방법:

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

Title:제목 옵션

Title 제목 옵션은 차트의 제목 관련 속성을 설정합니다.
매개 변수
묘사
기본값
text
제목 텍스트 내용.
Chart title
align
수평 정렬.
center
verticalAlign
수직 정렬.
top
margin
제목과 부제목 사이 또는 메인 그래프 사이의 간격
15
floating
부동 여부,true일 경우, 제목은 주 그래프 구역에서 벗어날 수 있으며, x, y 속성과 함께 사용할 수 있습니다.
false
style
CSS 스타일을 설정합니다.
{color: '#3E576F', fontSize: '16px'}

Subtitle:부제목 옵션

부제목이 제공하는 속성 옵션은 제목 타이틀과 대체적으로 같습니다. 상기 제목 옵션을 참조할 수 있습니다. 특히 부제목의text 옵션은 기본적으로 ', 즉 비어 있기 때문에 기본적으로 부제목은 표시되지 않습니다.

xAxis: X축 옵션

X 축 옵션은 차트 X 축 관련 속성을 설정합니다.
매개 변수
묘사
기본값
categories
X축의 분류 이름, 배열을 설정합니다. 예를 들어 categories: ['Apples','Bananas','Oranges']
[]
title
X축 이름,text,enabled,align,rotation,style 등 속성 지원
labels
X축의 각 분류 이름의 스타일 스타일, 형식formatter, 각도rotation 등을 설정합니다.
array
max
X축 최대값 (categories가 비어 있을 때),null이면 최대값은 X축 데이터에 따라 자동으로 최대값과 일치합니다.
null
min
X축 최소값 (categories가 비어 있을 때),null이면 최소값은 X축 데이터에 따라 자동으로 최소값과 일치합니다.
array
gridLineColor
메쉬 색상
#C0C0C0
gridLineWidth
메쉬 너비
1
lineColor
베이스라인 색상
#C0D0E0
lineWidth
베이스라인 너비
0

yAxis: Y축 옵션

Y축 옵션은 위의 xAxis 옵션과 거의 일치하므로 이전 테이블의 매개변수 설정을 참조하여 더 이상 개별적으로 나열되지 않습니다.

시리즈:데이터 열 옵션

데이터 열 옵션은 차트에 표시할 데이터와 관련된 속성을 설정합니다.
매개 변수
묘사
기본값
data
차트에 표시되는 데이터 열은 배열 또는 JSON 형식의 데이터입니다.예를 들어 데이터: [0, 5, 3, 5] 또는 데이터: [{name:'Point 1', y: 0}, {name:'Point 2', y: 5}]
''
name
데이터 열의 이름을 표시합니다.
''
type
데이터 열 형식,area,areaspline,bar,column,line,pie,scatter or spline 지원
line

plotOptions: 데이터 포인트 옵션

plotOptions는 차트의 데이터 포인트 관련 속성을 설정합니다.plotOptions는 각종 도표 유형에 따라 속성 설정에 약간의 차이가 있기 때문에 현재 자주 사용하는 옵션을 열거합니다.
매개 변수
묘사
기본값
enabled
데이터 포인트에 데이터를 직접 표시할 지 여부
false
allowPointSelect
마우스로 데이터 점을 선택할 수 있는지 여부
false
formatter
콜백 함수, 데이터 표시 내용 포맷
formatter: function() {return this.y;}

Tooltip:데이터 포인트 프롬프트 상자

Tooltip은 마우스가 데이터 점으로 미끄러질 때 표시되는 프롬프트 상자 정보를 설정합니다.
매개 변수
묘사
기본값
enabled
프롬프트 상자 표시 여부
true
backgroundColor
프롬프트 상자의 배경색 설정
rgba(255, 255, 255, .85)
borderColor
프롬프트 상자 경계 색상, 데이터 열의 기본 색상 자동 일치
auto
borderRadius
프롬프트 상자 원 각도
5
shadow
프롬프트 상자 섀도우 표시 여부
true
style
글꼴 색상 등 프롬프트 상자 내용 스타일 설정하기
color:'#333'
formatter
출력 알림 상자의 표시 내용을 포맷하는 데 사용되는 리셋 함수입니다.되돌아오는 내용은 html 탭을 지원합니다: ,,,,
,
2

Legend:범례 옵션

legend는 도례 관련 속성을 설정하는 데 사용됩니다.
매개 변수
묘사
기본값
layout
수평horizontal과 수직vertical을 지원하는 디스플레이 형식
horizontal
align
정렬 방법.
center
backgroundColor
범례 배경색.
null
borderColor
범례 경계 색상.
#909090
borderRadius
범례 경계 각도
5
enabled
범례 표시 여부
true
floating
x, y 속성에 맞추어 부동 가능한지 여부.
false
shadow
섀도우 표시 여부
false
style
범례 내용 스타일 설정하기
''
자세한 매개변수 구성은 HighchartsAPI 문서를 참조하십시오.http://www.hcharts.cn/api/index.php