谷歌折線圖說未捕獲TypeError：不能調用方法'getSelection'null

Question

我正在使用谷歌圖表（特別是折線圖）。圖表正確顯示。現在我正在嘗試添加交互，當系列的標籤被點擊時，系列會消失並出現。

我的問題是，該方法getSelection（）拋出錯誤

Cannot call method 'getSelection' of null 

這是我的代碼部分：

var jsonData = $.ajax({ 
url: 'http://localhost:9580/LocalApp/api/Data?Number=16846851', 
type: 'GET', 
dataType: 'json', 
success: function (values) { 

// now we need to build the map data, loop over each result 

// create columns array 
var columns = [{ id: 'datetime', label: 'Date and Time', type: 'datetime' }, 
      { id: 'x', label: 'X', type: 'number' }, 
      { id: 'y', label: 'Y', type: 'number' }, 
      { id: 'z', label: 'Z', type: 'number' }, 
      { id: 'total', label: 'Total', type: 'number' }]; 

var chartData = new google.visualization.DataTable(
{ 
    cols: columns 
}); 

// Add empty rows 
chartData.addRows(values.ac.length); 

$.each(values.ac, function (indexInArray, ac) { 
    chartData.setCell(indexInArray, 0, new Date(acc.dateTime)); 
    chartData.setCell(indexInArray, 1, ac.x); 
    chartData.setCell(indexInArray, 2, ac.y); 
    chartData.setCell(indexInArray, 3, ac.z); 
    chartData.setCell(indexInArray, 4, ac.total); 
}); 

var options = { 
    title: 'Data', 
    pointSize:4, 
    legend: { position: 'bottom' }, 
    series: { 
     0: { color: 'blue', lineWidth: 2 }, 
     1: { color: 'red', lineWidth: 2 }, 
     2: { color: 'green', lineWidth: 2 }, 
     3: { color: 'yellow', lineWidth: 2 } 
    } 
}; 

function showHideSeries(newChart) { 
    var sel = newChart.getSelection(); **--> error** 
    // if selection length is 0, we deselected an element 
    if (sel.length > 0) { 
     // if row is undefined, we clicked on the legend 
     if (sel[0].row == null) { 
      var col = sel[0].column; 
      if (columns[col] == col) { 
       // hide the data series 
       columns[col] = { 
        label: data.getColumnLabel(col), 
        type: data.getColumnType(col), 
        calc: function() { 
         return null; 
        } 
       }; 
       // grey out the legend entry 
       series[col - 1].color = '#CCCCCC'; 
      } 
      else { 
       // show the data series 
       columns[col] = col; 
       series[col - 1].color = null; 
      } 
      var view = new google.visualization.DataView(chartData); 
      view.setColumns(columns); 
      newChart.draw(view, options); 
     } 
    } 
} 

// Instantiate and draw our chart, passing in some options. 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
google.visualization.events.addListener(chart, 'select', showHideSeries(chart)); 
chart.draw(chartData, options); 

任何想法，爲什麼我收到錯誤？ 謝謝！吉列爾莫。

Answer 1

這條線：

google.visualization.events.addListener(chart, 'select', showHideSeries(chart)); 

是調用showHideSeries功能和它的返回值（null）傳遞給addListener功能。你需要傳遞一個函數（不是函數調用！[除非函數也返回一個函數]）到addListener。這將是有效的：

google.visualization.events.addListener(chart, 'select', showHideSeries); 

，並會給你，你在你的問題張貼的錯誤，作爲事件偵聽器將一個事件對象作爲參數傳遞給聽衆，而不是圖表對象，並且該事件對象絕對不沒有getSelection方法。鑑於你的代碼是原樣的，我不認爲你會得到你發佈的錯誤，但它仍然無法正常工作。

有兩種不同的方式，你可以解決這個問題：要麼使用chart，而不是newChart內showHideSeries或者你可以用另一個函數內showHideSeries(chart);調用（只要showHideSeries只能由一個圖表使用的作品）。走出去的第一條路線應該是不言而喻的，所以我將重點放在第二位置的情況下，你需要使用多個圖表此功能：

google.visualization.events.addListener(chart, 'select', function() { 
    showHideSeries(chart); 
}); 

當「選擇」事件觸發，匿名函數被調用，然後用圖表變量調用showHideSeries。如果你有其他的圖表，你需要使用這項功能，這將是如此簡單：

google.visualization.events.addListener(otherChart, 'select', function() { 
    showHideSeries(otherChart); 
});