하나의 Google 스프레드 시트에서 여러 개의 Google 차트 표시하기 1 개의 차트 만 표시

이전에 Google 차트를 사용했을 때 스크립트 태그를 사용하여 한 번에 하나의 차트를 삽입 할 수 있었기 때문에 각 Google 차트에 별도로 스크립트 태그를 사용했습니다. 다음은이의 예 : 하나의 Google 스프레드 시트에서 여러 개의 Google 차트 표시하기 1 개의 차트 만 표시

https://jsfiddle.net/Muvew/zystef14/

최근 나는 구글 스프레드 시트 데이터 테이블을 사용하는 사람과이 차트를 교체하는 작업을하고있다. 그러나 이러한 차트에 대해 동일한 아이디어를 사용하면 한 차트가 다른 차트를 대체하는 것처럼 보이는 것처럼 보입니다.

나는 setOnLoadCallBack 기능과 관련이 있지만 이전 설정에서 작동했는지 확신 할 수 없다고 생각합니다. 필자는 아래 차트의 두 번째 세트의 JSFiddle를 첨부 : 당신이 같은 함수 이름을 사용하는

<script> 
    google.load("visualization", '1', {packages:['corechart', 'bar']}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
      var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing'); 
      query.setQuery('SELECT A, B, C, D'); 
      query.send(handleQueryResponse); 
     } 

     function handleQueryResponse(response) { 
      if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
      } 

      var data = response.getDataTable(); 
      for (var i = 0; i < data.getNumberOfColumns(); i++) { 
       console.log(data.getColumnType(i)); 
      } 
      var chart = new google.visualization.ColumnChart(document.getElementById('columnchart')); 
      chart.draw(data); 
     } 
     </script>

출처

2017-12-14 Ben Cranmer

: 참고로

https://jsfiddle.net/Muvew/00gepgq0/

, 아래 내가 사용하고 새 차트 템플릿의 템플릿입니다 두 번째 차트. 아래 코드를 참조하십시오.

<head> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<script> 
 
\t google.load("visualization", '1', {packages:['corechart', 'bar']}); 
 
\t \t google.setOnLoadCallback(drawChart); 
 
\t \t google.setOnLoadCallback(drawChart_1); 
 
\t \t function drawChart() { 
 
\t \t var query = new google.visualization.Query(
 
\t \t \t 'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing'); 
 
      query.setQuery('SELECT A, B, C, D'); 
 
\t \t query.send(handleQueryResponse); 
 
\t \t } 
 

 
\t \t function handleQueryResponse(response) { 
 
\t \t if (response.isError()) { 
 
\t \t \t alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
\t \t \t return; 
 
\t \t } 
 

 
\t \t var data = response.getDataTable(); 
 
      for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
      } 
 
\t \t var chart = new google.visualization.ColumnChart(document.getElementById('columnchart')); 
 
\t \t chart.draw(data); 
 
\t \t } 
 
    
 
\t \t function drawChart_1() { 
 
\t \t var query = new google.visualization.Query(
 
\t \t \t 'https://docs.google.com/spreadsheets/d/1Fp3iz5zmzF4KgnlF4Me4OA3c8Msu0FV4_x1eS16WN-0/edit?usp=sharing'); 
 
      query.setQuery('SELECT A, E, F'); 
 
\t \t query.send(handleQueryResponse_1); 
 
\t \t } 
 

 
\t \t function handleQueryResponse_1(response) { 
 
\t \t if (response.isError()) { 
 
\t \t \t alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
\t \t \t return; 
 
\t \t } 
 

 
\t \t var data = response.getDataTable(); 
 
      for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
      } 
 
\t \t var chart = new google.visualization.ColumnChart(document.getElementById('testchart')); 
 
\t \t chart.draw(data); 
 
\t \t } 
 
\t \t </script> 
 
</head> 
 
\t <body> 
 
\t <div id='columnchart'></div> 
 
    </body> 
 
    <body> 
 
    <div id='testchart'></div> 
 
    </body>

출처

2017-12-14 18:16:23 Ritz

하나의 Google 스프레드 시트에서 여러 개의 Google 차트 표시하기 1 개의 차트 만 표시

답변

관련 문제