在我的应用程序中,我有一个使用Google图表的图表。
当我们单击按钮时,我们有一个模态,该模态显示使用google图表图的项目列表。然后,当我们单击一个项目时,我们将获得一个组织结构图,其中包含运行该项目的人员;当我们单击一个人时,我们将具有一个有关其信息的模式。 单击->组织项目->单击->组织人员->单击->个人信息
因此,数据会根据项目和我们单击的人员而相互跟踪。
对于模式“项目”,我使用Google图表,但我更喜欢通过转发数据来简单地使用引导列表。我的问题是我无法将Google图表变成包含关注每个项目的人员的数据的列表。这是代码,您可以指导我还是给我一个版本,以在不使用Google图表的情况下将项目显示为列表?
提前感谢您
function projects(projectsDesc = [], cDatas = [], pDescs = []) {
// --- Define the chart to be drawn.
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(projectsDesc);
// --- Create the chart
var chart = new google.visualization.OrgChart(document.getElementById('projectInfoName'));
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
var item = selection[0];
drawChart(cDatas[item.row], pDescs[item.row]);
$('#myModal').modal('toggle');
chart.setSelection();
}
// --- Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, { allowHtml: true });
}
// HTML
<!-- <div class="modal modal-fullscreen-xs-down" id="projectModal" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="projectModalLabel"><i class="fas fa-align-justify"></i> Projets</h4>
</div>
<div class="modal-body">
<div id="projectInfoName"></div>
</div>
</div>
</div>
</div> -->