Google Organigramm mit Hyperlink und 1 Klick erweitern/reduzieren

Question

Ich versuche, das Google Org Chart-Steuerelement zu verwenden. Ich möchte, dass es einen einzigen Klick hat, um Knoten zu erweitern/zu reduzieren (anstelle des Standard-Doppelklicks) und auch einen Hyperlink zur Profilseite des Benutzers bereitzustellen.

Mein Hyperlink-Code funktioniert gut mit dem Standard-Doppelklick erweitern/reduzieren. Wenn ich jedoch ein Listener für das Ereignis 'Select' hinzufüge, um das Ein-/Ausblenden einzelner Klicks zu aktivieren, funktioniert der Hyperlink nicht mehr.

JSFiddle hier https://jsfiddle.net/oxzabtyg/

hier ist mein Code

google.charts.load('current', {packages:["orgchart"]}); 
     google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('string', 'Manager'); 
     data.addColumn('string', 'ToolTip'); 
     // For each orgchart box, provide the name, manager, and tooltip to show. 
     data.addRows([ 
      [{v:'Mike', f:'Mike<div><a href="http://www.google.com">google</a></div>'},'', 'The President'], 
      [{v:'Jim', f:'Jim<div><a href="http://www.google.com">google</a></div>'},'Mike', 'VP'], 
      ['Alice', 'Mike', ''], 
      ['Bob', 'Alice', ''], 
      [{v:'John', f:'John<div><a href="http://www.google.com">google</a></div>'},'Bob', 'VP'], 
      ['Carol', 'Bob', ''], 
      [{v:'Jake', f:'Jake<div><a href="http://www.google.com">google</a></div>'},'John', 'VP'] 
     ]); 
     // Create the chart. 
     var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 



     // selection 
     google.visualization.events.addListener(chart, 'select', function() { 
      // get the row of the node clicked 
      var selection = chart.getSelection(); 
      var row = selection[0].row; 
      // get a list of all collapsed nodes 
      var collapsed = chart.getCollapsedNodes(); 
      // if the node is collapsed, we want to expand it 
      // if it is not collapsed, we want to collapse it 
      var collapse = (collapsed.indexOf(row) == -1); 
      chart.collapse(row, collapse); 
      // clear the selection so the next click will work properly 
      chart.setSelection(); 
       }); 


     // Draw the chart, setting the allowHtml option to true for the tooltips. 
     chart.draw(data, {allowHtml:true, allowCollapse:true}); 
      } 

Answer 1

Sie ein regelmäßiges DOM Click-Ereignis verwenden könnten,
dann das

wenn ein Anker-Tag (<a>) Ereignisziel überprüfen, dann folge der Adresse
sonst aufklappen/einklappen

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('string', 'Manager'); 
 
    data.addColumn('string', 'ToolTip'); 
 
    data.addRows([ 
 
     [{v:'Mike', f:'Mike<div><a href="http://www.google.com">google</a></div>'},'', 'The President'], 
 
     [{v:'Jim', f:'Jim<div><a href="http://www.google.com">google</a></div>'},'Mike', 'VP'], 
 
     ['Alice', 'Mike', ''], 
 
     ['Bob', 'Alice', ''], 
 
     [{v:'John', f:'John<div><a href="http://www.google.com">google</a></div>'},'Bob', 'VP'], 
 
     ['Carol', 'Bob', ''], 
 
     [{v:'Jake', f:'Jake<div><a href="http://www.google.com">google</a></div>'},'John', 'VP'] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.OrgChart(container); 
 

 
    container.addEventListener('click', function (e) { 
 
     e.preventDefault(); 
 
     if (e.target.tagName.toUpperCase() === 'A') { 
 
     console.log(e.target.href); 
 
     // window.open(e.target.href, '_blank'); 
 
     // or 
 
     // location.href = e.target.href; 
 
     } else { 
 
     var selection = chart.getSelection(); 
 
     if (selection.length > 0) { 
 
      var row = selection[0].row; 
 
      var collapse = (chart.getCollapsedNodes().indexOf(row) == -1); 
 
      chart.collapse(row, collapse); 
 
     } 
 
     } 
 
     chart.setSelection([]); 
 
     return false; 
 
    }, false); 
 

 
    chart.draw(data, {allowHtml:true, allowCollapse:true}); 
 
    }, 
 
    packages: ['orgchart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>