发送电子邮件从谷歌组织链接图表

我正在与Google Charts一起为我工作的公司创建组织结构图。我们希望使它具有温和的互动性，并且我希望能够在用户选择一个人后出现工具提示。此工具提示将有一个链接，可直接向选定的人发送电子邮件。发送电子邮件从谷歌组织链接图表

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

    // For each orgchart box, provide the name, manager, and tooltip to show. 
    data.addRows([ 
     [{v:'Mary', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'}, 
     ''], 
     [{v:'Lois', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'}, 
     'Mary'], 
     [{v:'Steven', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois'], 
     [{v:'Pamela', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven'], 
     [{v:'Linda', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven'], 
     [{v:'Natalie', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven'], 
     [{v:'Doris', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven'], 
       [{v:'Phyllis', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela'], 
     [{v:'Connie', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela'], 
     [{v:'Betty', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie'], 
     [{v:'Williene', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie'], 
    ]); 

    //Set Chart options 
    var options = {'allowHtml': true, 
           'size':'medium', 
        'nodeClass':'orgNode', 
        'selectedNodeClass':'orgNodeSelect', 
        tooltip: {trigger: 'selection'}}; 


    // Create the chart. 
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 

    // Set Action 
    /*chart.setAction({ 
      id: 'emailSelect', 
     text: 'Send email' 
    });*/ 

    // Draw the chart, setting the options 
    chart.draw(data, options); 
    }

这是一个jsfiddle与我现在有的代码。我不完全确定要从哪里开始创建工具提示并创建电子邮件链接。

截至目前，假设我们没有使用数据库，因为图表会很小。

另外，附注。有没有办法从Accounting Supv创建一条虚线？职员会计师？保持高级会计主管对工作人员会计的线路完好无损，即。

感谢您的帮助！

来源

2017-04-05 ebbBliss

问题用在data format为OrgChart提到的标准提示，

由其他图表只要它不支持HTML或其他选项...

tooltip: { 
     isHtml: true, 
     trigger: 'selection' 
    }

因此，提示将无法显示链接，
或可靠保持可见足够长的时间来点击它

支票下面的工作片段，看到玛丽或洛伊丝 ...

google.charts.load('current', { 
 
\t callback: drawChart, 
 
\t packages: ['orgchart'] 
 
}); 
 

 
function drawChart() { 
 
\t var data = new google.visualization.DataTable(); 
 
\t data.addColumn('string', 'Name'); 
 
\t data.addColumn('string', 'Manager'); 
 
\t data.addColumn('string', 'Tooltip'); 
 

 
\t // For each orgchart box, provide the name, manager, and tooltip to show. 
 
\t data.addRows([ 
 
\t \t [{v:'Mary', f:'Mary<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'}, 
 
\t \t '', '<a href="mailto:[email protected]_email.com">Mary</a>'], 
 
\t \t [{v:'Lois', f:'Lois<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'}, 
 
\t \t 'Mary', '<a href="mailto:[email protected]_email.com">Lois</a>'], 
 
\t \t [{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null], 
 
\t \t [{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null], 
 
\t \t [{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null], 
 
\t \t [{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null], 
 
\t \t [{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null], 
 
\t \t [{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null], 
 
\t ]); 
 

 
\t //Set Chart options 
 
\t var options = {'allowHtml': true, 
 
\t \t size: 'medium', 
 
\t \t nodeClass: 'orgNode', 
 
\t \t selectedNodeClass: 'orgNodeSelect', 
 
\t \t tooltip: { 
 
\t \t \t isHtml: true, 
 
\t \t \t trigger: 'selection' 
 
\t } 
 
\t }; 
 

 
\t // Create the chart. 
 
\t var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
 

 
\t // Draw the chart, setting the options 
 
\t chart.draw(data, options); 
 
}

.orgNode { 
 
    background-color: #fff; 
 
    border: 1px solid #285580; 
 
    border-radius: 3px; 
 
} 
 

 
.orgNodeSelect { 
 
    background-color: #E5F1FC; 
 
    border: 1px solid #285580; 
 
    border-radius: 3px; 
 
}

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

，而不是，建议直接添加链接到节点

上显示的名字

请参阅以下工作片段...

google.charts.load('current', { 
 
\t callback: drawChart, 
 
\t packages: ['orgchart'] 
 
}); 
 

 
function drawChart() { 
 
\t var data = new google.visualization.DataTable(); 
 
\t data.addColumn('string', 'Name'); 
 
\t data.addColumn('string', 'Manager'); 
 
\t data.addColumn('string', 'Tooltip'); 
 

 
\t // For each orgchart box, provide the name, manager, and tooltip to show. 
 
\t data.addRows([ 
 
\t \t [{v:'Mary', f:'<a href="mailto:[email protected]_email.com">Mary</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'}, 
 
\t \t '', 'The President'], 
 
\t \t [{v:'Lois', f:'<a href="mailto:l[email protected]_email.com">Lois</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'}, 
 
\t \t 'Mary', null], 
 
\t \t [{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null], 
 
\t \t [{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null], 
 
\t \t [{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null], 
 
\t \t [{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null], 
 
\t \t [{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null], 
 
\t \t [{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null], 
 
\t \t [{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null], 
 
\t ]); 
 

 
\t //Set Chart options 
 
\t var options = {'allowHtml': true, 
 
\t \t size: 'medium', 
 
\t \t nodeClass: 'orgNode', 
 
\t \t selectedNodeClass: 'orgNodeSelect', 
 
\t \t tooltip: { 
 
\t \t \t isHtml: true, 
 
\t \t \t trigger: 'selection' 
 
\t } 
 
\t }; 
 

 
\t // Create the chart. 
 
\t var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
 

 
\t // Draw the chart, setting the options 
 
\t chart.draw(data, options); 
 
}

.orgNode { 
 
    background-color: #fff; 
 
    border: 1px solid #285580; 
 
    border-radius: 3px; 
 
} 
 

 
.orgNodeSelect { 
 
    background-color: #E5F1FC; 
 
    border: 1px solid #285580; 
 
    border-radius: 3px; 
 
}

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

来源

2017-04-06 00:19:53 WhiteHat

希望这可以帮助，如果你不希望在链接点击节点选择做 - 看片断在[这个答案]（http://stackoverflow.com/a/38807797/5090771） - 我注意到使用_actions_的尝试被注释掉了，假设这也没有用？我可以检查是否不确定... – WhiteHat

我试图使用类似于[tooltip action]（https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions）的操作，Google指南显示。但是我没有把事情做好。 – ebbBliss

不幸的是，OrgChart没有'setAction'的[method]（https://developers.google.com/chart/interactive/docs/gallery/orgchart#methods）... – WhiteHat

发送电子邮件从谷歌组织链接图表

回答

相关问题