Highcharts 구성 구문
이 장에서는 우리가 Highcharts 차트를 생성하여 일부 구성을 소개합니다.
1 단계 : HTML 페이지 만들기
HTML 페이지 및 jQuery를 Highcharts 라이브러리의 도입을 만듭니다
파일 이름 : HighchartsTest.htm
<html> <head> <title>Highcharts 教程 | 本教程</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { }); </script> </body> </html>
Highcharts를 수용 사업부 컨테이너의 인스턴스 ID가 그려진 차트.
2 단계 : 프로필 만들기
라이브러리 JSON 형식의 구성을 Highcharts.
$('#container').highcharts(json);
여기에 구성 데이터 형식과 JSON 형식의 사용이 차트를 그릴 것을 json으로 JSON. 다음과 같이 진행하십시오 :
표제
제목 차트를 구성합니다
var title = { text: '月平均气温' };
부제
차트 자막 구성 :
var subtitle = { text: 'Source: w3big.com' };
X 축
설정 항목은 X 축에 표시한다.
var xAxis = { categories: ['一月', '二月', '三月', '四月', '五月', '六月' ,'七月', '八月', '九月', '十月', '十一月', '十二月'] };
Y 축
설정 항목은 Y 축에 표시된다.
var yAxis = { title: { text: 'Temperature (\xB0C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] };
팁
구성 메시지 :
var tooltip = { valueSuffix: '\xB0C' }
디스플레이 모드
구성 차트는 오른쪽 정렬 :
var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };
데이터
데이터를 표시하는 차트를 구성합니다. 각 시리즈는 사진의 곡선을 생성하여 각각의 배열입니다.
var series = [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ];
3 단계 : JSON 데이터를 생성
이것은 구성 정보의 조합으로 구성된다 :
var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; Step 4: Draw the chart $('#container').highcharts(json);
예
다음은 완전한 예 (HighchartsTest.htm)입니다 :
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var title = { text: '月平均气温' }; var subtitle = { text: 'Source: w3big.com' }; var xAxis = { categories: ['一月', '二月', '三月', '四月', '五月', '六月' ,'七月', '八月', '九月', '十月', '十一月', '十二月'] }; var yAxis = { title: { text: 'Temperature (\xB0C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var tooltip = { valueSuffix: '\xB0C' } var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }; var series = [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
위 예제의 출력은 다음과 같습니다