时间戳

首页 > 解决方案 > 如何使用localstorage数据制作饼图？

javascript - 如何使用localstorage数据制作饼图？

问题描述

我有一个用于项目管理的 webapp，它使用 localstorage 来存储对象数组。现在在仪表板上，我想显示一个谷歌饼图。

本地存储中的对象如下所示。

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

现在我想制作一个饼图，显示 project.assignedTo 和分配给该员工的项目数量。

现在我想知道将变量 getPro 设置为映射 project.assignedTo 和分配给它的项目数量的功能。这是谷歌派的代码。

<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>

请帮我解决。

标签： javascripthtmllocal-storagepie-chart

解决方案

为此，您需要任何 javascript 库来创建图表，有很多可用选项。例如，您选择了Google Charts。

脚步：

  1. 从本地存储中检索数据。
  2. 然后您就拥有了 Google Charts 或您正在使用的任何其他库的预定义功能。
  3. 在这些函数中传递您的数据并在 HTML 中呈现您的图表。

推荐阅读