Plotly.js - 자바스크립트 대화형 웹차트

자바스크립트 언어로 차트를 지원하는 plotly.js 자바스크립트가 있다.

설치

npm 에서는 다음과 같이 Plotly 설치할 수 있다.

npm install plotly.js-dist

또는 Fastly의 CDN 링크로 사용하면 된다.

<script src="https://cdn.plot.ly/plotly-3.1.0.min.js" charset="utf-8"></script>

본인은 Ghost 콘텐츠 관리 시스템을 사용하므로 CDN 링크를 헤더로 삽입해 사용하고 있다.

사용하기

웹에서 자바스크립트로 이용해 차트를 제공한다.

원형 파이 차트

<div id="MB-market-shares" style="width:100%;height:70vh;"></div>
<script>
  var data = [{
    values: [18.4, 17.7, 63.9],
    labels: ['Android', 'iOS', 'Others'],
    type: 'pie'
  }];
  
  var layout = {
    title: {
      text:  'Mobile OS Market shares'
    },
    autosize: true
  };
  
  MBMarketShare = document.getElementById('MB-market-shares');
  Plotly.newPlot(MBMarketShare, data, layout);
</script>

코드는 직관적인 자바스크립트로 제공되고 사용하기도 쉽다.

산점도

<div id="Linear" style="width:100% !important; height:70vh !important; background-color:rgb(0, 0, 0) !important">
  </div>
  <!-- `!important` CSS 에서 기본값 덮어씌우기 -->
  <script>
    var trace1 = {
      x: [0, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 92, 100],
      y: [12, 13, 14, 13, 16, 19, 22, 25, 27, 33],
      type: 'scatter',
      // mode: 'lines+markers' 선형그래프에서 점을 포함합니다.
      mode: 'lines+markers',
      line: { shape: 'spline' },
      text: Array(10).fill('Hello Linear!')
      // 데이터에 커서를 올려놓으면(Hover) 설명을 포함해서 표시합니다.
    };

    var layout = {
      title: {
        text: '선형 데이터 제목',
      },
      autosize: true,
      xaxis: {
        title: {
          text: 'x축'
        }
      },
      yaxis: {
        title: {
          text: 'y축'
        }
      },
    };

    var data = [trace1];
    var graph = document.getElementById('Linear'); // 그래프를 삽입할 것이라는 것을 알려줍니다.
    Plotly.newPlot(graph, data, layout);
  </script>

좀 더 알아보기

위 사이트에서 다양한 샘플을 살펴볼 수 있다.