Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/powerbi/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌组织结构图与超链接和1点击展开/折叠_Javascript_Html_Charts_Orgchart - Fatal编程技术网

Javascript 谷歌组织结构图与超链接和1点击展开/折叠

Javascript 谷歌组织结构图与超链接和1点击展开/折叠,javascript,html,charts,orgchart,Javascript,Html,Charts,Orgchart,我正在尝试使用谷歌组织结构图控件。我希望它有一个单点展开/折叠的节点(而不是默认的双击),并提供一个超链接到用户的配置文件页面 我的超链接代码可以与默认的双击展开/折叠配合使用。但是,如果为“选择”事件添加侦听器以启用单击展开/折叠,则超链接将停止工作 我在这儿闲逛 这是我的密码 google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart);

我正在尝试使用谷歌组织结构图控件。我希望它有一个单点展开/折叠的节点(而不是默认的双击),并提供一个超链接到用户的配置文件页面

我的超链接代码可以与默认的双击展开/折叠配合使用。但是,如果为“选择”事件添加侦听器以启用单击展开/折叠,则超链接将停止工作

我在这儿闲逛

这是我的密码

 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});
            }
google.charts.load('current',{packages:[“orgchart”]});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=new google.visualization.DataTable();
data.addColumn('string','Name');
data.addColumn('string','Manager');
data.addColumn('string','ToolTip');
//对于每个orgchart框,提供要显示的名称、管理器和工具提示。
data.addRows([
[{v:'Mike',f:'Mike'},,'The President'],
[{v:'Jim',f:'Jim'},'Mike','VP'],
[“爱丽丝”,“迈克”,“迈克],
['Bob','Alice','',
[{v:'John',f:'John'},'Bob','VP'],
[“卡罗尔”,“鲍勃”,“鲍勃],
[{v:'Jake',f:'Jake'},'John','VP']
]);
//创建图表。
var chart=new google.visualization.OrgChart(document.getElementById('chart_div'));
//挑选
google.visualization.events.addListener(图表,'select',函数(){
//获取单击的节点的行
var selection=chart.getSelection();
var row=选择[0]。行;
//获取所有折叠节点的列表
var collapsed=chart.getCollapsedNodes();
//如果该节点已折叠,则要将其展开
//如果它没有塌陷,我们就要塌陷它
var collapse=(collapsed.indexOf(row)=-1);
图表.折叠(行,折叠);
//清除所选内容,以便下次单击可以正常工作
chart.setSelection();
});
//绘制图表,为工具提示将allowHtml选项设置为true。
draw(数据,{allowtml:true,allowCollapse:true});
}

您可以使用常规的DOM单击事件,
然后检查事件目标

如果锚定标记(
'},,“总统”],
[{v:'Jim',f:'Jim'},'Mike','VP'],
[“爱丽丝”,“迈克”,“迈克],
['Bob','Alice','',
[{v:'John',f:'John'},'Bob','VP'],
[“卡罗尔”,“鲍勃”,“鲍勃],
[{v:'Jake',f:'Jake'},'John','VP']
]);
var container=document.getElementById('chart_div');
var chart=新的google.visualization.OrgChart(容器);
container.addEventListener('click',函数(e){
e、 预防默认值();
如果(e.target.tagName.toUpperCase()=='A'){
console.log(e.target.href);
//打开(e.target.href,“_blank”);
//或
//location.href=e.target.href;
}否则{
var selection=chart.getSelection();
如果(selection.length>0){
var row=选择[0]。行;
var collapse=(chart.getCollapsedNodes().indexOf(行)=-1);
图表.折叠(行,折叠);
}
}
图.选举([]);
返回false;
},假);
draw(数据,{allowtml:true,allowCollapse:true});
},
软件包:['orgchart']
});

也遇到了同样的问题。另一个选项是防止mousedown事件在链接中传播:

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