[D3.js] 구글 이미지 차트

Printing PNG Charts 출처: https://developers.google.com/chart/interactive/docs/printing

Google Charts 안내를 읽어보다가 우연이 보기 되었는데 차트를 이미지 형태로 출력하는 방법이 나와 있어서 간단히 정리를 합니다. 인터넷에서 차트 이미지들을 한번쯤은 보셨을 거에요. 차트를 이미지로 떠서 붙여놓은 건 줄 알았는데 차트를 이미지형태로 출력하더군요. 그러면 어떻게 출력하는지 알아보도록 하죠.

1. 이미지 차트 만들기

상단의 구글 차트 안내에서 PNG Chart 예제의 한 부분입니다.

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.PieChart(chart_div);

      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = ' + chart.getImageURI() + '">';    
      });

      chart.draw(data, options);

원래 기본 출력은 Pie Chart일 경우 다음과 같습니다.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);

여기에, chart_div에 아래오 ㅏ같이 img 형태로 지정해주면 출력되는 차트가 이미지 형태 표시 됩니다.

chart_div.innerHTML = ' + chart.getImageURI() + '">';

2. 실험

참고 :
[D3.js] 구글 차트

참고예제의 pie 차트를 이미지 형태로 만들어 보는 실험을 하겠습니다.

[전체소스]

<body>
<div id='chart_div'></div>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

      var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['data1', 10],
          ['data2', 20],
          ['data3', 30],
          ['data4', 40],
          ['data5', 50]
        ]);

      var options = {
        title: "이미지 차트 테스트",
    titleFontSize: 16,
        width:400,
        height:300,
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.PieChart(chart_div);

      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = ' + chart.getImageURI() + '">';    
      });

      chart.draw(data, options);

  }
  </script>
</body>

[결과]
차트를 마우스로 드래그 한 모습입니다. 이미지 형태로 표시됩니다.

마무리

오늘의 핵심은 딱 한줄입니다.

chart_div.innerHTML = ' + chart.getImageURI() + '">';

차트를 출력하는데 출력되는 차트를 이미지 형태로 만들어 낸는 방법입니다. 아무튼 다양한 재미쓴 표현들을 많이 구글 차트 안내 보시면 배울 수 있어 제대로 구글 차트를 배워 보세요.

_{Sponsored ( Powered by dclick )}

[D3.js] 구글 이미지 차트 | Ecency