从Google组织结构图发送电子邮件链接

Question

我正在使用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创建虚线。给员工会计师？保持高级会计主管对员工会计师的保持不变，即。

感谢您的帮助！

Answer 1

使用data format中OrgChart中提到的标准工具提示的问题，

它不支持其他图表提供的html或其他选项......

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

因此，工具提示将无法显示链接，
或者可靠地保持足够长的时间以便点击它

查看以下工作代码段，请参阅 Mary 或 Lois ...

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

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:'Mary', f:'Mary<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'},
		 '', '<a href="mailto:mary@some_email.com">Mary</a>'],
		[{v:'Lois', f:'Lois<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'},
		 'Mary', '<a href="mailto:lois@some_email.com">Lois</a>'],
		[{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null],
		[{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null],
		[{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null],
		[{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null],
		[{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null],
		[{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null],
		[{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null],
		[{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null],
		[{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null],
	]);

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

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

	// Draw the chart, setting the options
	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', {
	callback: drawChart,
	packages: ['orgchart']
});

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:'Mary', f:'<a href="mailto:mary@some_email.com">Mary</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'},
		 '', 'The President'],
		[{v:'Lois', f:'<a href="mailto:lois@some_email.com">Lois</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'},
		 'Mary', null],
		[{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null],
		[{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null],
		[{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null],
		[{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null],
		[{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null],
		[{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null],
		[{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null],
		[{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null],
		[{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null],
	]);

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

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

	// Draw the chart, setting the options
	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>