【问题标题】:How to use localstorage data to make pie charts?如何使用localstorage数据制作饼图?
【发布时间】:2019-06-12 20:07:47
【问题描述】:

我有一个用于项目管理的 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>

请帮帮我。

【问题讨论】:

  • 什么是本地存储项目?你的意思是你有一个将数据存储在浏览器本地存储中的网络应用程序?您是在问如何制作饼图吗?您是否在问如何从本地存储中获取数据?您是否在问如何将数据存储在本地存储中?你必须比那更具体。你试过什么?什么不工作?
  • 欢迎来到 StackOverflow!不幸的是,这是一个非常广泛的问题,我看不到与 localStorage 的联系。听起来您需要有关饼图的教程。对象数组长什么样子?
  • @IsaacVidrine 我正在编辑问题。感谢您让我知道如何提问
  • @HardikLeuwa 谢谢你,但我知道如何检索和更新本地存储,我想要的是如何使用饼图来获取我的本地存储对象属性。

标签: javascript html local-storage pie-chart


【解决方案1】:

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

步骤:

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

【讨论】:

  • 感谢 Amrit 的帮助。但我知道这一点,我想知道的是如何编辑谷歌饼图的那些预定义功能来执行我想要的功能!我已经编辑了问题,请查看它
猜你喜欢
  • 2020-05-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多