使用数据转换列表中的Google图表

时间:2019-06-18 09:05:18

标签: javascript google-visualization google-chartwrapper

在我的应用程序中,我有一个使用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">&times;</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> -->

0 个答案:

没有答案