谷歌融合表的PieChart/Listener事件

Question

我有一个包含两列（'TOTAL_ROOF'&'POTENTIAL_'）的融合表。 'POTENTIAL_'是'TOTAL_ROOF'的子集。

现在我：

1）显示在用户点击“确定格式化行数据

2）试图绘制一个饼图，即：drawVisualization.PieChart（e.row [ 'TOTAL_ROOF' ，“POTENTIAL _'] value）;

我已经得到了＃1的工作...但是，对于＃2我有点失落在做什么...我看到的所有例子显示PieChart已经在用户点击任何东西之前被创建。

有没有办法创建PieCh点击后的艺术？将空格留空直至（如＃1）？

此外，我不知道如何在我的文本框中调用它（例如：http://jsfiddle.net/fG5a5/1/）。

这里是我到目前为止的代码：

加载库：

google.load('maps', '3.5', {other_params:'sensor=false'}); 
google.load('jquery', '1.6.0'); 
google.load('visualization', '1', {packages:["corechart"]}); 
google.load('jqueryui', '1.8.12'); 

JS

var tableid = 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I; 
var location_column = 'geometry' 

    function drawVisualization() { 
    google.visualization.drawChart({ 
    "chartType": "PieChart" 

    })}; 
     // Draw Visualization of WHAT (the event listener has not been triggered??) 

     function initialize() { 

     google.maps.event.addListener(layer, 'click', function(e) { 
     $("#roof-panel-area").html(
    '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + 
     Math.round(e.row['TOTAL_ROOF'].value) + 
    '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' 
     + Math.round(e.row['POTENTIAL_'].value) + 
    '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' +  
     e.row['PITCHED_OR'].value + 
    '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + 
     Math.round(e.row['NUMBER_OF_'].value) + '</p>'); 
    }); 

    // Click Listener on layer using jquery , searches for fields related to 
// roof/panel, 

    google.maps.event.addListener(layer, 'click', function(e) { 
    drawVisualization.PieChart(e.row['TOTAL_ROOF','POTENTIAL_'].value); 
     }); 
    // Click Listener - updates graph   

    layer.setMap(map); 
} 

HTML：

<div id="sidebarItem"> 
    <br> 
    <h1> Hatfield Solar Map</h1> 
    <!---Create a text box input for the user to enter the street address--> 
    Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Geocode" /> 
    <!--Create a button input for the user to click to geocode the address--> 
    <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:200px" title="Click to Find Address" value="Click to Find Address" /> 
    <h3>Select a building outline or search for an address to identify buildings that you'd like to select.</h3> 
    <!---Content from Click--> 
    <hr/> 
    <div id="sidebar-content-area" style="padding:5px;"> 
     <div id="intro" style="text-align: center; margin-top: 20px; display: none;"> 
      <p><i>Buildings are symbolized according to roof size, and the possibility of increased panel placement.</i><p> 
     </div> 
    <div id="overview" style:""> 
     <h3>Building Overview:</h3> 
    <p id ="roof-panel-area"></p> 
    </div> 
</div> 

Answer 1

好 - 明白了...

JS功能1：

function drawVisualization(e) { 

     var data = google.visualization.arrayToDataTable([ 
      ['Area', 'Potential', 'Total'], 
      ['Building', Math.round(e.row['POTENTIAL_'].value), Math.round(e.row['TOTAL_ROOF'].value)], 
     ]); 

     var options = { 
      title: 'Company Performance', 
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('visualization_div')); 
     chart.draw(data, options); 
    }; 

个

js函数2：

   google.maps.event.addListener(layer, 'click', function(e) { 
     $("#roof-panel-area").html(
     '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + Math.round(e.row['TOTAL_ROOF'].value) + 
     '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' + Math.round(e.row['POTENTIAL_'].value) + 
     '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' + e.row['PITCHED_OR'].value + 
     '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + Math.round(e.row['NUMBER_OF_'].value) + 
     '</p>'); 
     drawVisualization(e); 
     }); 

    layer.setMap(map); 

} 

HTML

 <div id="overview" style:""> 
     <h3>Building Overview:</h3> 
    <p id ="roof-panel-area"></p> 
    <div id = "visualization_div" style="align: center; width: 230px; height: 260px;"></div> 
    </div> 

Answer 2

什么是你想用这个做行：

... 
drawVisualization.PieChart(e.row['TOTAL_ROOF','POTENTIAL_'].value); 

也许你应该只是做像函数：

.... 
var whateverClicked = function(){ 
    //do something; 
}; 

并将其附加到监听器：

google.maps.event.addListener(layer, 'click', whateverClicked);