Конвертирование гугл чарта в список с данными - PullRequest
Новая
       36

Конвертирование гугл чарта в список с данными

0 голосов
/ 18 июня 2019

В моем приложении у меня есть диаграмма, использующая диаграмму Google.

Когда мы нажимаем кнопку, у нас есть модальное окно, отображающее список проектов, в которых используется ограниченная диаграмма Google.Затем, когда мы нажимаем на проект, у нас есть организационная структура с людьми, которые его запускают, когда мы нажимаем на человека, у нас есть модальное с информацией о нем.Нажмите -> Проекты Org -> Нажмите -> Персона организации -> Нажмите -> Личная информация

Таким образом, данные следуют друг за другом в соответствии с проектом и людьми, на которых мы нажимаем.

Для модальных"project" Я использую Google Chart, но я предпочитаю просто использовать список начальной загрузки, перенаправляя данные.Моя проблема в том, что я не могу превратить Google Chart в список с данными о людях, которые следят за каждым проектом.Вот код, можете ли вы дать мне руководство или дать мне версию для отображения проектов в виде списка без использования диаграммы 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> -->
...