JavaScript/HTML에 Highchart를 이용한 그래프(차트) 삽입

JavaScript에 Highchart를 이용한 그래프 삽입 

이번에는 http://www.highcharts.com/ 에서 제공하는 데모버전을 적용하는 방법을 알아보겠습니다.

먼저 http://www.highcharts.com/ 로 들어갑니다.

왼쪽 상단에 Demo를 들어갑니다.

맘에 드는 차트를 찾습니다.

원하는 Demo의 속성에 맞게 다운로드 해줍니다.

아까 마음에 들던 차트를 들어갑니다.

Edit IN JSFIDDLE 를 눌러줍니다.

왼쪽 상단에 <script>를 확인합니다. 그리고 아까 다운 받았던 파일을 엽니다.

이거 전 사진 왼쪽 위에 있던 

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

초록색으로 된 것을 찾습니다.

그리고 경로에 맞게 <script src="highcharts.js"></script> 등등을 넣어줍니다.

데모를 보고 있는 사이트에 경로는 https:// ~~~  로 되어있는데 꼭 자신에 맞게 경로를 다시 지정 해주셔야 됩니다.

그리고 <script src=....> 아래에 있는 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>를 넣어줍니다.

그리고 또 하나의 Js파일을 만들고

왼쪽 하단에 있는 function() 부분을 복사해서 넣습니다.

다시 html로 돌아와서 아까 새로 function() 부분이 들어간 js파일(graph.js)과 

다운받았던 폴더에 있던

jquery-1.11.3 버전이나 최신버전의 jquery를 다운받아서 <script>......</script>에 넣어 주시면됩니다.

jquery-1.12.3.min.js로 돌아가는거 확인했습니다. j쿼리가 안맞으면 안돌아갈 수 있습니다.

또한 jquery위치를 가장 위에 올려주시면 되겠습니다. 아래에 놓으면 동작안할 가능성이 있습니다.

최종적인 모습은 이렇게 될 것입니다.

그리고 실행 시키시면 

데모버젼과 똑같은 그래프가 그려집니다.

이제 여기서 여러분들이 원하는 데이터 값을 넣는 것을 추가하거나 여러가지 방법을 통해 여러분들의 입맛에 맞게 바꿀 수 있습니다.

이러한 데모버전을 이용하여 html과 js를 이용하여 그래프를 손쉽게 삽입할 수 있습니다. 자신이 원하는 그래프의 형태가 있다면 이러한 방법을 통해 

개발을 좀 더 빨리 할 수 있을거라 생각됩니다.