javascript - Google Org Chart with hyperlink and 1 click expandcollapse - Stack Overflow

admin管理员组

文章数量:1425709

I am trying to use the Google Org Chart control. I would like it to have a single click expand/collapse of nodes (instead of the default double click one) and also provide a hyperlink to the profile page of the user.

My hyperlink code works fine with the default double click expand/collapse. However, if I add a listener for the 'select' event to enable single click expand/collapse, the hyperlink stops working.

JSFiddle here /

here is my 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="">google</a></div>'},'', 'The President'],
          [{v:'Jim', f:'Jim<div><a href="">google</a></div>'},'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Alice', ''],
          [{v:'John', f:'John<div><a href="">google</a></div>'},'Bob', 'VP'],
          ['Carol', 'Bob', ''],
          [{v:'Jake', f:'Jake<div><a href="">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});
            }

I am trying to use the Google Org Chart control. I would like it to have a single click expand/collapse of nodes (instead of the default double click one) and also provide a hyperlink to the profile page of the user.

My hyperlink code works fine with the default double click expand/collapse. However, if I add a listener for the 'select' event to enable single click expand/collapse, the hyperlink stops working.

JSFiddle here https://jsfiddle/oxzabtyg/

here is my 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.">google</a></div>'},'', 'The President'],
          [{v:'Jim', f:'Jim<div><a href="http://www.google.">google</a></div>'},'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Alice', ''],
          [{v:'John', f:'John<div><a href="http://www.google.">google</a></div>'},'Bob', 'VP'],
          ['Carol', 'Bob', ''],
          [{v:'Jake', f:'Jake<div><a href="http://www.google.">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});
            }

• javascript
• html
• charts
• orgchart

Share Improve this question Follow asked Aug 5, 2016 at 21:10 xdevxdev 6991111 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

you could use a regular DOM click event,
then check the event target

if an anchor tag (<a>), then follow the address
else expand / collapse

see following working snippet...

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.">google</a></div>'},'', 'The President'],
      [{v:'Jim', f:'Jim<div><a href="http://www.google.">google</a></div>'},'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Alice', ''],
      [{v:'John', f:'John<div><a href="http://www.google.">google</a></div>'},'Bob', 'VP'],
      ['Carol', 'Bob', ''],
      [{v:'Jake', f:'Jake<div><a href="http://www.google.">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./charts/loader.js"></script>
<div id="chart_div"></div>

Just run into the same issue. Another option would be to prevent the propagation of the mousedown event in your links:

<a onmousedown="event.stopPropagation()" href="https://www.google./">google</a>

本文标签： javascriptGoogle Org Chart with hyperlink and 1 click expandcollapseStack Overflow