Jan 16 Highcarts 옵션 설정 상세 설명 문서

사이트 주소:http://www.helloweba.com/view-blog-156.html
Highcarts 옵션 설정 상세 설명 문서
helloweba. com 저자: 달빛 시간: 2012 - 01 - 16 21: 13          태그: 하 이 차 트  도표           
Highcarts 는 대량의 옵션 설정 파 라 메 터 를 제공 합 니 다. 사용자 의 요구 에 부 합 된 도 표를 쉽게 맞 출 수 있 습 니 다. 현재 홈 페이지 는 영문 판 개발 설정 설명 문서 만 제공 하고 중국어 판 문서 네트워크 는 매우 적 으 며 흩 어 져 있 지 않 습 니 다.여기 서 저 는 Highcarts 에서 자주 사용 하 는 가장 핵심 적 인 매개 변수 옵션 설정 을 문서 로 정리 하여 여러분 과 공유 합 니 다.
차 트: 도표 영역 옵션
Chart 도표 구역 옵션 은 도표 구역 의 관련 속성 을 설정 하 는 데 사 용 됩 니 다.
매개 변수
묘사 하 다.
기본 값
backgroundColor
차 트 배경 색 설정
#FFFFFF
borderWidth
도표 테두리 너비 설정
0
borderRadius
도표 테두리 원 각 각도 설정
5
renderTo
도표 에 설 치 된 용 기 는 보통 html 에 DIV 를 설치 하여 DIV 의 id 속성 값 을 가 져 옵 니 다.
null
defaultSeriesType
기본 도표 유형 선, spline, areaspline, 열, bar, pie, scatter
0
width
도표 너비, 기본 값 은 도표 용기 에 따라 너비 에 적응 합 니 다.
null
height
도표 높이, 기본 값 은 도표 용기 에 따라 높이 에 적응 합 니 다.
null
margin
도표 와 다른 요소 간 의 간격, 배열, 예 를 들 어 [0, 0, 0, 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
이벤트 리 셋, addSeries 방법, click 방법, load 방법, selection 방법 등의 리 셋 함 수 를 지원 합 니 다.
색상: 색상 옵션
Color 색상 옵션 은 도표 의 색상 배열 을 설정 하 는 데 사 용 됩 니 다.
매개 변수
묘사 하 다.
기본 값
color
도표, 접 는 선 / 기둥 모양 / 떡 모양 등 그림 의 색상, 배열 형식 을 보 여 줍 니 다.
array
Highcarts 는 기본적으로 다양한 색상 방안 을 제공 합 니 다. 표시 할 그림 이 색상 종류 보다 많 을 때 더 많은 그림 은 자동 으로 첫 번 째 색상 방안 부터 선택 합 니 다.색상 배열 을 사용자 정의 하 는 방법:

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

제목: 제목 옵션
제목 제목 옵션 은 도표 의 제목 관련 속성 을 설정 하 는 데 사 용 됩 니 다.
매개 변수
묘사 하 다.
기본 값
text
제목 텍스트 내용.
Chart title
align
수평 정렬 방식.
center
verticalAlign
수직 정렬 방식.
top
margin
제목 과 부제 사이 또는 주 도표 구간 의 간격.
15
floating
움 직 일 지 여부 입 니 다. true 라면 제목 은 주 도표 구역 에서 벗 어 날 수 있 고 x, y 속성 에 맞 춰 사용 할 수 있 습 니 다.
false
style
CSS 스타일 을 설정 합 니 다.
{color: '#3E576F',            fontSize: '16px'}
부제 옵션
부제 가 제공 하 는 속성 옵션 은 제목 title 과 대체적으로 같 습 니 다. 상기 제목 옵션 을 참조 할 수 있 습 니 다. 특히 부제 의 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 옵션 과 기본적으로 일치 합 니 다. 위 표 의 매개 변수 설정 을 참조 하 십시오. 따로 표시 하지 않 습 니 다.
Series: 데이터 열 옵션
데이터 열 옵션 은 도표 에서 보 여줄 데이터 와 관련 된 속성 을 설정 하 는 데 사 용 됩 니 다.
매개 변수
묘사 하 다.
기본 값
data
도표 에 표 시 된 데이터 열 은 배열 이나 JSON 형식의 데이터 일 수 있 습 니 다.data: [0, 5, 3, 5] 또는           data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
''
name
데이터 열의 이름 을 표시 합 니 다.
''
type
데이터 열 형식, 지원 영역, areaspline, bar, column, line, pie, scatter 또는 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 라벨 을 지원 합 니 다. 예 를 들 어 < b >, < strong >, < i >, < em >, < br / >, < span >
2
Legend: 그림 옵션
legend 는 그림 과 관련 된 속성 을 설정 하 는 데 사 용 됩 니 다.
매개 변수
묘사 하 다.
기본 값
layout
디 스 플레이 형식, 수평 horizontal 과 수직 vertical 지원
horizontal
align
정렬 방식.
center
backgroundColor
그림 배경 색.
null
borderColor
그림% 1 개의 캡 션 을 편 집 했 습 니 다.
#909090
borderRadius
그림% 1 개의 캡 션 을 편 집 했 습 니 다.
5
enabled
그림% 1 개의 캡 션 을 편 집 했 습 니 다.
true
floating
유동, x, y 속성 에 맞 출 수 있 습 니까?
false
shadow
그림자 보일 지 여부
false
style
그림 내용 스타일 설정
''
본문 에 열거 되 지 않 은 옵션 설정 은 하 이 카 트 홈 페이지 영문 문 서 를 참조 하 십시오.http://www.highcharts.com/ref/
성명: 본 고 는 오리지널 글 입 니 다. helloweba. com 과 작가 가 저작권 을 가지 고 있 습 니 다. 전재 가 필요 하 다 면 helloweba. com 에서 기원 되 고 원문 링크 를 보류 하 십시오. 그렇지 않 으 면 권리 침해 로 간주 합 니 다.