google可視化 - 條形圖上的點擊事件isStacked：true

Question

我試圖顯示條形圖的總價值，其中'isStacked：true'在位於圖表頂部的<span>上，當我單擊一個欄時。

我引用探索google.visualization.events.addListener的能力開始here.

當我點擊一個欄我收到此錯誤：

Uncaught TypeError: Cannot read property 'row' of undefined 

或當我改變row到column

Uncaught TypeError: Cannot read property 'column' of undefined 

任何指針真的讚賞。

這裏是我的Django的模板：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    {% for staff_name, staff_id in params.items %} 
$.ajax({ 
     url: "{% url user_kpi %}", 
     data: { user_stat: {{staff_name}} }, 
     success: function(responseData) { 
     if (typeof responseData=="object") {      
      var data = new google.visualization.arrayToDataTable([ 
      ['Type', 'Processed Items', { role: 'style' }, 'Processed beyond Due Date', { role: 'style'}], 
      ['PPP', responseData['PPP_ontime'], 'lightgreen', responseData['PPP_due'], 'red'], 
      ['CP', responseData['CP_ontime'], 'gold', responseData['CP_due'], 'red'], 
      ['RSL', responseData['RSL_ontime'], 'lightblue', responseData['RSL_due'], 'red'], 
      ['MOD', responseData['MOD_ontime'], 'yellow', responseData['MOD_due'], 'red' ], 
      ['STO', responseData['RECALL_ontime'], 'silver', responseData['RECALL_due'], 'red'], 
      ['TP', responseData['TP_ontime'], 'orange', responseData['TP_due'], 'red'], 
      ['DEMO', responseData['DEMO_ontime'], 'violet', responseData['DEMO_due'], 'red'], 
      ['DUP', responseData['DUP_ontime'], 'brown', responseData['DUP_due'], 'red']]); 
      google.setOnLoadCallback(drawVisualization(data, {{staff_name}})); 
     } 
     } 
}); 
    {% endfor %} 

    }); 
    var wrapper; 
    function drawVisualization(xdata, id) { 
    // Create and draw the visualization. 
    var visual = 'visualization-'+id.toString(); 
    //chart = new google.visualization.BarChart(document.getElementById(visual)); 
    wrapper = new google.visualization.ChartWrapper({ 
     chartType: 'BarChart', 
     dataTable: xdata, 
     options: { 
        width:600, height:140, 
        vAxis: {title: null, maxValue: 3500}, 
        hAxis: {title: null}, 

        animation: {easing: 'in'}, 
        axisTitlesPosition: "out", 
        chartArea:{left:0,top:0, right:0, width:"100%",height:"100%"}, 
        focusTarget: "category", 
        fontSize: 12, 
        fontName: "Tahoma", 
        legend: {position: 'none'}, 
        series: [{color: 'black', visibleInLegend: false}, {}, {}, 
          {color: 'red', visibleInLegend: false}], 
        isStacked: true, 
        backgroundColor: '#eee', 
       }, 
     containerId: visual 
    }); 
    google.visualization.events.addListener(wrapper, 'ready', function() { 
     // grab a few details before redirecting 
     google.visualization.events.addListener(wrapper.getChart(), 'select', function() { 
     chartObject = wrapper.getChart(); 
     // checking value upon mousehover 
     alert(xdata.getValue(chartObject.getSelection()[0].row, 0)); 
     //alert(xdata.getValue(chartObject.getSelection()[0].column, 0)); 
     }); 
    }); 

    wrapper.draw(); 
} 

更新：正如asgallant解釋。

<script type="text/javascript"> 
function init() { 
{% for staff_name, staff_id in params.items %} 
$.ajax({ 
    url: "{% url user_kpi %}", 
    data: { user_stat: {{staff_name}} }, 
    success: function(responseData) { 
     if (typeof responseData=="object") {      
      var data = new google.visualization.arrayToDataTable([ 
       ['Type', 'Processed Items', { role: 'style' }, 'Processed beyond Due Date', { role: 'style'}], 
       ['PPP', responseData['PPP_ontime'], 'lightgreen', responseData['PPP_due'], 'red'], 
       ['CP', responseData['CP_ontime'], 'gold', responseData['CP_due'], 'red'], 
       ['RSL', responseData['RSL_ontime'], 'lightblue', responseData['RSL_due'], 'red'], 
       ['MOD', responseData['MOD_ontime'], 'yellow', responseData['MOD_due'], 'red' ], 
       ['STO', responseData['RECALL_ontime'], 'silver', responseData['RECALL_due'], 'red'], 
       ['TP', responseData['TP_ontime'], 'orange', responseData['TP_due'], 'red'], 
       ['DEMO', responseData['DEMO_ontime'], 'violet', responseData['DEMO_due'], 'red'], 
       ['DUP', responseData['DUP_ontime'], 'brown', responseData['DUP_due'], 'red'] 
      ]); 
      drawVisualization(data, {{staff_name}}); 
     } 
    } 
}); 
{% endfor %} 
} 
google.load('visualization', '1', {packages:['corechart'], callback: init}); 

function drawVisualization(xdata, id) { 
    // Create and draw the visualization. 
    var visual = 'visualization-'+id.toString(), 
    //chart = new google.visualization.BarChart(document.getElementById(visual)); 
    wrapper = new google.visualization.ChartWrapper({ 
     chartType: 'BarChart', 
     dataTable: xdata, 
     options: { 
       width:600, height:140, 
       vAxis: {title: null, maxValue: 3500}, 
       hAxis: {title: null}, 

       animation: {easing: 'in'}, 
       axisTitlesPosition: "out", 
       chartArea:{left:0,top:0, right:0, width:"100%",height:"100%"}, 
       focusTarget: "category", 
       fontSize: 12, 
       fontName: "Tahoma", 
       legend: {position: 'none'}, 
       //orientation: "vertical" 
       series: [{color: 'black', visibleInLegend: false}, {}, {}, 
         {color: 'red', visibleInLegend: false}], 
       isStacked: true, 
       backgroundColor: '#eee', 
       }, 
     containerId: visual 
    }); 
    google.visualization.events.addListener(wrapper, 'ready', function() { 
    var chart = wrapper.getChart(); 
    google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getSelection(); 
     if (selection.length) { 
      // the user selected a bar 
      alert(xdata.getValue(selection[0].row, 0)); 
      //alert(selection.length); 
     } 
     else { 
      alert('no selection');// the user deselected a bar 
     } 
    }); 
    }); 

    wrapper.draw(); 
} 

錯誤： 未捕獲的錯誤：無效行索引定義。應該在[0-7]範圍內。

通過asgallant Corrrected 談到此行alert(xdata.getValue(selection.row, 0));到alert(xdata.getValue(selection[0].row, 0));

Answer 1

首先，AJAX調用應該是一個回調內部由從谷歌的裝載機，而不是從文件準備好處理程序（這保證了可視化的API可當您嘗試使用API​​組件）：

function init() { 
    {% for staff_name, staff_id in params.items %} 
    $.ajax({ 
     url: "{% url user_kpi %}", 
     data: { user_stat: {{staff_name}} }, 
     success: function(responseData) { 
      if (typeof responseData=="object") {      
       var data = new google.visualization.arrayToDataTable([ 
        ['Type', 'Processed Items', { role: 'style' }, 'Processed beyond Due Date', { role: 'style'}], 
        ['PPP', responseData['PPP_ontime'], 'lightgreen', responseData['PPP_due'], 'red'], 
        ['CP', responseData['CP_ontime'], 'gold', responseData['CP_due'], 'red'], 
        ['RSL', responseData['RSL_ontime'], 'lightblue', responseData['RSL_due'], 'red'], 
        ['MOD', responseData['MOD_ontime'], 'yellow', responseData['MOD_due'], 'red' ], 
        ['STO', responseData['RECALL_ontime'], 'silver', responseData['RECALL_due'], 'red'], 
        ['TP', responseData['TP_ontime'], 'orange', responseData['TP_due'], 'red'], 
        ['DEMO', responseData['DEMO_ontime'], 'violet', responseData['DEMO_due'], 'red'], 
        ['DUP', responseData['DUP_ontime'], 'brown', responseData['DUP_due'], 'red'] 
       ]); 
       drawVisualization(data, {{staff_name}}); 
      } 
     } 
    }); 
    {% endfor %} 
} 
google.load('visualization', '1', {packages:['corechart'], callback: init}); 

然後，在你drawVisualization功能，你有幾個問題：下手，wrapper是一個全球性的Ø bject，所以每次撥打電話drawVisualization時都會被覆蓋;這是你的問題的主要原因，因爲「選擇」事件觸發了一個圖表，但wrapper引用最後繪製的圖表，而不是單擊的圖表（因此，wrapper.getChart().getSelection()調用返回一個空數組，元素0爲空數組是undefined，而undefined沒有行或列屬性）。您需要將包裝本地化爲drawVisualization函數而不是全局函數。刪除這一行：

var wrapper; 

，並添加var這行的開頭：

wrapper = new google.visualization.ChartWrapper({ 

然後，你需要調整的事件處理程序來測試選擇數組的長度，因爲用戶可以點擊一個橫條兩次，選中然後取消選中橫條，導致一個空的數組，並且你會得到相同的錯誤。該事件處理程序需要看起來像這樣：

google.visualization.events.addListener(wrapper, 'ready', function() { 
    var chart = wrapper.getChart(); 
    google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getSelection(); 
     if (selection.length) { 
      // the user selected a bar 
      alert(xdata.getValue(selection[0].row, 0)); 
     } 
     else { 
      // the user deselected a bar 
     } 
    }); 
});