Как использовать данные локального хранилища для построения круговых диаграмм? - PullRequest
Новая
       12

Как использовать данные локального хранилища для построения круговых диаграмм?

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

У меня есть веб-приложение для управления проектами, которое использует localalstorage для хранения массива объектов.А теперь на панели инструментов я хочу показать круговую диаграмму Google.

Объект в локальном хранилище выглядит следующим образом. 

assignedTo: "Laxman"
closingdate: "2019-06-15"
description: "Some what desc"
id: 1560281058591
name: "Project1"
postdate: "2019-06-11"
status: "Open"

Теперь я хочу сделать круговую диаграмму, показывающую проект.assignTo и количество проектов, назначенных этому сотруднику.

Теперь я хочу знать, как функционировать, чтобы установить переменную getPro для сопоставления project.assignedTo и количества проектов, назначенных этому.Вот код для google pie. 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var getPro = JSON.parse(localStorage.projects).map(
            project =>
            ['Employee', 'Number Of Project'],
            [$(project.assignedTo), <HERE I AM GETTING STUCK>]
        );

        var data = google.visualization.arrayToDataTable(getPro);

        var options = {
          title: 'Number of Projects Assigned',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
</script>

Пожалуйста, помогите мне в этом.

1 Ответ

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

Для этого вам нужна любая библиотека javascript для создания диаграммы, есть много доступных опций. Например, вы выбрали Google Charts .

Шаги:

  1. Получить данные из вашего локального хранилища.
  2. И тогда у вас есть предопределенные функции Google Charts или любой другой библиотеки, которую вы используете.
  3. Передайте ваши данные в эти функции и визуализируйте вашу диаграмму в HTML.
...