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 
     } 
    }); 
});