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

I'm working with Google Charts to create an Organization Chart for the company I work for. We want to make it mildly interactive and I would like to be able to have a tooltip appear once the user selects a person. This tooltip would have a link to send an email directly to the person that is selected.

我正在使用谷歌图表为我工作的公司创建一个组织结构图。我们想让它具有适度的交互性，当用户选择一个人时，我希望能够有一个工具提示。这个工具提示将有一个链接，可以直接发送电子邮件给被选中的人。

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);
  }

Here is a jsfiddle of the code with what I have right now. I'm not entirely sure where to go from here in order to create the tooltip and create the email link.

这是我现在所拥有的代码的jsfiddle。我不完全确定从这里到哪里去创建工具提示和创建电子邮件链接。

As of now, assume we're not using database as the chart will be small.

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

Also, side note. Is there a way to create a dotted line from the Accounting Supv. to the Staff Accountant? Keeping the line intact from the Sr. Accounting Supervisor to the Staff Accountant, that is.

另外,边注。是否有办法从会计假设中创建虚线。员工会计师吗?保持公司财务主管对员工会计的完整性。

Thanks for your help!

谢谢你的帮助!

1 个解决方案

#1

problem with using the standard tooltip mentioned in the data format for an OrgChart,

使用的标准工具提示的问题，在数据格式的一个组织，

it doesn't support html or other options as provided by other charts...

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

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

as such, the tooltip will not be able to display a link,
or reliably stay visible long enough to click it

因此，工具提示将不能显示一个链接，也不能可靠地保持足够长的时间来点击它。

check following working snippet, see Mary or 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>

---

instead, recommend adding the link directly to the name displayed on the node

相反，建议将链接直接添加到节点上显示的名称。

see following working snippet...

看到以下工作片段…

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>