将参数传递给点击处理程序

我试图选择使用Google GeoChart API的状态。将参数传递给点击处理程序

当我选择一个状态时，我希望看到它突出显示。但是，我得到一个错误。

执行以下操作来重现问题：

Open this jsBin。
在地图上点击一个州。
观察错误：

ReferenceError: data is not defined at selectHandler...

我认为这个问题是在标selectHandler功能。看来我的论点没有正确地传递给这个函数。

<!DOCTYPE html> 
<html> 

<head> 
    <!---- > 
    https://developers.google.com/chart/interactive/docs/gallery/geochart#full 
    <!----> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    google.charts.load('current', { 
     'packages': ['geochart'] 
    }); 
    google.charts.setOnLoadCallback(drawRegionsMap); 

    function drawRegionsMap() { 
     var ar = [ 
      //['Code', 'Select', 'State'], 
      ['US-AK', 0, 'Alaska'], 
      ['US-AL', 0, 'Alabama'], 
      ['US-AR', 0, 'Arkansas'], 
      ['US-AZ', 0, 'Arizona'], 
      ['US-CA', 0, 'California'], 
      ['US-CO', 0, 'Colorado'], 
      ['US-CT', 0, 'Connecticut'], 
      ['US-DE', 0, 'Delaware'], 
      ['US-FL', 0, 'Florida'], 
      ['US-GA', 0, 'Georgia'], 
      ['US-HI', 0, 'Hawaii'], 
      ['US-IA', 0, 'Iowa'], 
      ['US-ID', 0, 'Idaho'], 
      ['US-IL', 0, 'Illinois'], 
      ['US-IN', 0, 'Indiana'], 
      ['US-KS', 0, 'Kansas'], 
      ['US-KY', 0, 'Kentucky'], 
      ['US-LA', 0, 'Louisiana'], 
      ['US-MA', 0, 'Massachusetts'], 
      ['US-MD', 0, 'Maryland'], 
      ['US-ME', 0, 'Maine'], 
      ['US-MI', 0, 'Michigan'], 
      ['US-MN', 0, 'Minnesota'], 
      ['US-MO', 0, 'Missouri'], 
      ['US-MS', 0, 'Mississippi'], 
      ['US-MT', 0, 'Montana'], 
      ['US-NC', 0, 'North Carolina'], 
      ['US-ND', 0, 'North Dakota'], 
      ['US-NE', 0, 'Nebraska'], 
      ['US-NH', 0, 'New Hampshire'], 
      ['US-NJ', 0, 'New Jersey'], 
      ['US-NM', 0, 'New Mexico'], 
      ['US-NV', 0, 'Nevada'], 
      ['US-NY', 0, 'New York'], 
      ['US-OH', 0, 'Ohio'], 
      ['US-OK', 0, 'Oklahoma'], 
      ['US-OR', 0, 'Oregon'], 
      ['US-PA', 0, 'Pennsylvania'], 
      ['US-RI', 0, 'Rhode Island'], 
      ['US-SC', 0, 'South Carolina'], 
      ['US-SD', 0, 'South Dakota'], 
      ['US-TN', 0, 'Tennessee'], 
      ['US-TX', 0, 'Texas'], 
      ['US-UT', 0, 'Utah'], 
      ['US-VA', 0, 'Virginia'], 
      ['US-VT', 0, 'Vermont'], 
      ['US-WA', 0, 'Washington'], 
      ['US-WI', 0, 'Wisconsin'], 
      ['US-WV', 0, 'West Virginia'], 
      ['US-WY', 0, 'Wyoming'], 
     ], 
     dataTable = computeDataTable(ar); 
     //data = google.visualization.arrayToDataTable(ar); 
     function computeDataTable(array) { 
     out = new google.visualization.DataTable(); 
     out.addColumn('string', 'Code'); 
     out.addColumn('number', 'Select'); 
     out.addColumn({ 
      type: 'string', 
      role: 'tooltip' 
     }); 
     out.addRows(array); 
     return out; 
     } 
     var options = { 
     region: 'US', 
     displayMode: 'regions', 
     resolution: 'provinces', // 'metro' 
     legend: 'none', 
     animation: { 
      easing: 'inAndOut', 
      startup: true, 
      duration: 2500, 
     }, 
     }; 
     var chart = new google.visualization.GeoChart(document.getElementById('geochart')); 

     function selectHandler(func, ar) { 
     var selectedItem = chart.getSelection(); 
     if (selectedItem) { 
      var row = selectedItem[0].row, 
      value = data.getValue(row, 0), 
      isSelected = !data.getValue(row, 1); 
      //console.log(row); 
      ar[row][1] = isSelected ? 1 : 0; 
      //data = google.visualization.arrayToDataTable(ar); 
      data = func(ar); 
      //alert(value+", "+isSelected); 
      //console.log('The user selected: ' + value); 
      //console.log('isSelected: ' + isSelected); 
      //console.log(JSON.stringify(data)); 
      chart.draw(data, options); 
     } 
     } 
     google.visualization.events.addListener(chart, 'select', selectHandler); 
     chart.draw(dataTable, options); 
    } 
    </script> 
</head> 

<body> 
    <div id="geochart" style="width: 900px; height: 500px;"></div> 
</body> 

</html>

来源

2016-01-31 Mowzer

'// data = google.visualization.arrayToDataTable（ar）;'被注释掉了。 –

@JesseGood：虽然我不认为这是解决方案。这是一个先前的解决方案，现在只是一个残酷的问题。但我留下来提醒我已经尝试过了。 – Mowzer

'selectHandler'的第4行正在调用'data.getValue（row，0）'。这似乎是在'数据'设置在任何地方之前 – Rhumborl

与此

function selectHandler() { 
    var selectedItem = chart.getSelection(); 
    if (selectedItem) { 
     var row = selectedItem[0].row; 
     var isSelected = !dataTable.getValue(row, 1); 
     dataTable.setValue(row, 1, isSelected ? 1 : 0); 
     chart.draw(dataTable, options); 
    } 
    }

的基本思想是不发生变异的根本ar阵列替换您的每个所选的。改为使用dataTablesetValue和getValue。

来源

2016-01-31 00:29:24

将参数传递给点击处理程序

回答

相关问题