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를 이용하여 그래프를 손쉽게 삽입할 수 있습니다. 자신이 원하는 그래프의 형태가 있다면 이러한 방법을 통해 

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

  1. 2016.12.23 00:33

    비밀댓글입니다

    • 2016.12.27 16:09

      비밀댓글입니다

  2. 박기수 2016.12.23 00:34

    왜 실행이 안될까요?ㅠㅠ

  3. 박기수 2016.12.23 00:34

    왜 실행이 안될까요?ㅠㅠ

  4. 지나가던감사맨 2017.06.02 09:54

    감사합니다 잘 봤어요 아주 유용합니다!

CPU 스케쥴링 구현, 개발 소스입니다.


전체 흐름도는 대충 이렇습니다.

이번 OS 과제때 하게되었고, 후에 참고가 될만할 듯 싶어 올렸습니다.

상업적 사용이외에 사용해주시면 감사하겠습니다.


실행창 



OS.zip


+ Recent posts