[바미] JavaScript에 Highchart를 이용한 그래프 삽입

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

먼저 여기로 들어갑니다.

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

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

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

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

Edit IN JSFIDDLE를 눌러줍니다.

왼쪽 상단에 등등을 넣어줍니다.

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

그리고 에 넣어 주시면 됩니다.
jquery-1.12.3min.js로 돌아가는거 확인했습니다. jquery가 맞지 않으면 돌아가지 않을 수 있습니다.
또한 jquery위치를 가장 위에 올려주시면 되겠습니다. 아래에 놓으면 동작안할 가능성이 있습니다.


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

그리고 실행 시키면

DEMO버전과 똑같은 그래프가 그려집니다.

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