On Click toggle Google org chart viz?

Question

Я читаю данные JSON и пытаюсь построить узлы из этих данных. Я хочу, чтобы нажимали и переключали, показывая больше под человеком. Он работал без чтения данных JSON, но теперь, когда я читаю оттуда, он сломался? Поэтому я не слишком уверен, что случилось? Здесь находится переключатель переключения, и я добавил jsfiddle, чтобы посмотреть полный код? Есть идеи? Я неправильно строю данные JSON?

var runonce = google.visualization.events.addListener(chart, 'ready', function() { 
    var previous; 
    $('#chart_div').on('click', 'div', function() { 
     console.log(this); 
     var selection = chart.getSelection(); 
     var row; 
     if (selection.length == 0) { 
      row = previous; 
     } 
     else { 
      row = selection[0].row; 
      previous = row; 
     } 
     var collapsed = chart.getCollapsedNodes(); 
     var collapse = (collapsed.indexOf(row) == -1); 
     chart.collapse(row, collapse); 
     chart.setSelection(); 
    }); 
    google.visualization.events.removeListener(runonce); 

    for (var i = 0; i < data.getNumberOfRows(); i++) { 
     chart.collapse(i, true); 
    } 
}); 

http://jsfiddle.net/w8Ytq/63/

Answer 1

Я рекомендую использовать select событие на графике, onclick, похоже, не стрелять для меня.

Другая проблема может заключаться в том, что каждая строка сбрасывается после первоначальной ничьей.
Несмотря на то, что щелкнул верхний человек, так как остальные строки все еще рухнули, они не отображаются, но не уверены.

var orgChartData = [ 
 
    { 
 
     "Name": "Tom", 
 
     "Role": "VP", 
 
     "Email": "Tom@aol.com", 
 
     "Manager": "" 
 
    }, 
 
    { 
 
     "Name": "Ben", 
 
     "Role": "Manager", 
 
     "Email": "Ben@aol.com", 
 
     "Manager": "Tom" 
 
    }, 
 
    { 
 
     "Name": "Billy", 
 
     "Role": "Manager", 
 
     "Email": "Billy@aol.com", 
 
     "Manager": "Tom" 
 
    } 
 
]; 
 

 
google.load('visualization', '1', {packages: ['orgchart']}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var previous = 0; 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('string', 'Manager'); 
 
    data.addColumn('string', 'ToolTip'); 
 

 
    for (i = 0; i < orgChartData.length; i++) { 
 
     data.addRow(
 
      [ 
 
      { 
 
       v: orgChartData[i].Name, 
 
       f: orgChartData[i].Name + "<br>" + 
 
       orgChartData[i].Role + "<br>" + 
 
       '<a href="mailto:' + orgChartData[i].Email + 
 
       '?Subject=Service Request" target="_top">' + 
 
       orgChartData[i].Email + '</a>' 
 
      }, 
 
      orgChartData[i].Manager, 
 
      orgChartData[i].Role 
 
      ] 
 
     ); 
 
    } 
 

 
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'select', toggleDisplay); 
 

 
    chart.draw(data, { 
 
     allowHtml: true 
 
    }); 
 

 
    function toggleDisplay() { 
 
     var selection = chart.getSelection(); 
 
     var row; 
 
     if (selection.length == 0) { 
 
      row = previous; 
 
     } 
 
     else { 
 
      row = selection[0].row; 
 
      previous = row; 
 
     } 
 
     var collapsed = chart.getCollapsedNodes(); 
 
     var collapse = (collapsed.indexOf(row) == -1); 
 
     chart.collapse(row, collapse); 
 
     chart.setSelection([{row: row, column: null}]); 
 
    } 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>