發送電子郵件從谷歌組織鏈接圖表

我正在與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

發送電子郵件從谷歌組織鏈接圖表

回答

相關問題