Google 융합 표를 사용한 차트 시각화

융합 표 레이어 /지도를 클릭하여 차트를 동적으로 그리려고합니다. 멕시코의 한 주를 클릭 할 때마다 차트를 2007, 2008, 2009 및 2010 열의 값을 반영하도록 변경하고 싶습니다. 현재로서는 이것이 작동하지 않습니다. 파이어 버그는 'a undefined'라고 알려주고 있지만 'a'라는 변수를 선언하지 않았고 google 스크립트에있는 것으로 가정하고 있으므로 그 의미가 실제로 무엇인지 알지 못합니다.Google 융합 표를 사용한 차트 시각화

이것은 내가 사용하고있는 코드입니다. 클릭 리스너는 무승부 시각화 기능에 있음을 통과 한 후 'column_1'라는 이름의 열에서 상태 이름을 잡고 :

google.maps.event.addListener(shownLayer, 'click',function(e){ 
    stateName = e.row['column_1'].value; 
    drawVisualization(stateName);   
}); 


function drawVisualization(stateName){ 
    google.visualization.drawChart({ 
     containerID: "textBox", 
     dataSourceUrl: "http://www.google.com/fusiontables/gvizdata?tq=", 

     query: "SELECT '2007','2008','2009','2010' " + 
      "FROM 3943497 WHERE column_1 = '" + stateName + "'", 
     chartType: "ColumnChart", 
     options: { 
      title: stateName, 
      height: 300, 
      width: 400 
     } 
    }); 

}

지도 웹 사이트는 여기에 있습니다 : https://mywebspace.wisc.edu/csterling/web/cartel%20map/index.html

출처

2012-06-04 csterling

저는 google.visualization에 익숙하지 않지만 적어도 정적 차트 표시를 시작한 다음 클릭시 차트를 변경하는 것에 대해 걱정할 것입니다. –

나는 이것을했고 어떻게하는지 이해한다. 문제는 융합 표에서 데이터를 얻는 데 있다고 생각합니다. – csterling

containerID: "textBox",

이 mispelled된다. 해야합니다

containerId: "textBox",

나의 제안은 기본 정적 GVis 차트 퓨전 테이블에 연결하고 마우스 클릭을 기반으로 차트를 변경에 대한 걱정하기 전에 먼저 작업을 진행했다. 스크립트의 관련 부분을 가져 왔지만 제대로 작동하지 못했습니다. 전체 파일을 게시 할 때 나머지 코드와 문제를 구분하는 것은 매우 어렵습니다. 이것은 기본 GViz 문제를 테스트하기 위해 추출한 내용입니다.

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://www.google.com/jsapi"></script> 
    <script type='text/javascript'> 
    google.load('visualization','1', {packages: ['corechart'] }); 
    window.onload = function() { 
     drawVisualization('Chiapas'); 
    } 
    function drawVisualization(stateName){ 
     google.visualization.drawChart({ 
      "chartType": "ColumnChart", 
      "containerId": "textBox", 
      "dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=", 
      "query": "SELECT '2007','2008','2009','2010' " + "FROM 3943497 WHERE column_1 = '" + stateName + "'", 
      "options": { 
       title: stateName 
      } 
     }); 
    } 

    </script> 
    </head> 
    <body> 
    <div id="textBox" style="width: 400px; height: 300px;"></div> 
    <br /> 
    </body> 
    </html>

이 응용 프로그램은 작동하지 않습니다. 페이지에 표시되고 있습니다. "값 도메인 축이있는 바 시리즈가 지원되지 않습니다."

사용중인 stateName 값이 "Chiapas, Mexico"이지만 앱에서 볼 수 있습니다. 값은 퓨전 테이블 column_1에 표시되며 "Chiapas"는 값입니다.

출처

2012-06-05 14:09:50

감사합니다. 그러나 아직도 그것을 고치는 것은 차트를 생성하지 않습니다. – csterling

두 가지 형태의 Maps API javascript를 사용하여 문제가 있다고 생각합니다. 이를 제거하고 다음을 사용할 수 있습니다. google.load ("maps", "3", {other_params : "sensor = false"}); –

동일한 자바 스크립트에서지도와 차트를 모두 사용할 수 있다는 것을 알고 있습니다. 이 예는 Google에서 확인하십시오. https://developers.google.com/fusiontables/docs/samples/adv_fusiontables – csterling

Google 융합 표를 사용한 차트 시각화

답변

관련 문제