●자바스크립트와 html로 만든 차트 솔루션이다. 비상업용으로 사용할땐 무료이고 상업적으로 사용할땐 비용이 든다.(최소 90달러이상)
●예제
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>하이차트 라인 기본</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#chart1').highcharts({ title: { text: '제목', x: -20 //center }, subtitle: { text: '부제목', x: -20 }, xAxis: { //x축 categories: ['가로1', '가로2', '가로3', '가로4', '가로5', '가로6'] }, yAxis: { //y축 title: { text: '단위 (°C)' }, plotLines: [{ //선 value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°Cas' }, legend: { //범례 layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ //값 name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0] },{ name: 'New York2', data: [1, 2, 7, 3, 4, 10] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2] }] }); });
</script> </head> <body> <script src="../../js/highcharts.js"></script> <script src="../../js/modules/exporting.js"></script> <!--우측상단에 차트를 이미지로 출력할 수 있게하는 버튼을 넣는다.--> <div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html> |
'프로그래밍 > java script' 카테고리의 다른 글
| 자바스크립트 체크박스 체크 개수 제한하기 (0) | 2014.07.01 |
|---|---|
| 자바스크립트 연도, 달, 날짜, 요일 구하는 방법 (0) | 2014.07.01 |
| javascript 체크박스(checkbox) 하나만 선택, 모두 선택/해제 (0) | 2013.11.05 |
| javascript DOM2 (0) | 2013.08.13 |
| javascript DOM1 (0) | 2013.08.12 |
댓글