[Plotly.js] 웹 문서에 그래프 넣기

포스팅을 하다보면 그래프나 차트가 필요한 경우가 있습니다. 보통은 엑셀 등을 사용해서 그래프나 차트를 그린 후 이것을 그림으로 저장하여 포스팅에 포함하지만 원시데이터가 필요하거나 수정을 해야하는 경우가 있습니다. Plotly는 포스팅 하는 과정에서 수치를 직접 입력하여 그래프나 차트를 표시하는 도구입니다.

Plotly

Plotly는 각종 여러 언어를 지원하는 오픈소스 그래프 라이브러리입니다. 점 그래프나 막대그래프 뿐만 아니라 데이터를 지도 위에 표시할 수도 있고, 3D 차트를 그릴 수도 있습니다. 여기서는 CDN을 통해 Plotly를 불러오고 간단한 사용법을 다룹니다.

Plotly.js

Plotly.js에서 제공하는 CDN을 아래 HTML 태그로 간단하게 불러올 수 있습니다.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

불러온 Plotly를 아래와 코드로 시험합니다.

<div id="tester" style="width:100%;height:250px;"></div>
<script>
    TESTER = document.getElementById('tester');
    Plotly.plot( TESTER, [{
      x: [1, 2, 3, 4, 5],
      y: [1, 2, 4, 8, 16] }],
      { margin: { t: 0 } }
    );
</script>

시험 코드 결과는 다음과 같습니다.

 

Plotly.js의 문서를 통해 그래프의 모양 등 세부 설정과 다양한 그래프 기능을 살펴볼 수 있습니다.