javascript - 未知数量变量的谷歌圆环图

Question

所以我正在尝试构建一个 google donut chart ，其中坐标的数量是可变的。 这是问题陈述，我必须制作一个图表来显示每个管理员有多少联系人被添加到数据库中。

示例数据:- 管理员 1:- admin1@test.com 联系人数量:- 4

管理员 2:- admin2@test.com 联系人数量:- 5

可以增加管理员的数量，以及与他们相关的联系人数量，因此坐标的数量是未知的。 我已经编写了这段代码以使其工作，但它并没有达到我的期望。实际上它根本不起作用。 完成任务的最佳方法是什么？

HTML/PHP 部分(工作正常)

<?php
                //get data here
                try
                {
                  $s = $conn->query("SELECT * from users");
                }
                catch(PDOException $e)
                {
                  echo $e->getMessage();
                }
                $i=-1;
                while($admins = $s->fetch(PDO::FETCH_OBJ))
                {
                  $i++;
                  $number = $user->get_numberofcontacts_per_admin($admins->email);
                  echo "<input type='hidden' name='a$i' id='a$i' value=$admins->email>";
                  echo "<input type='hidden' name='c$i' id='c$i' value=$number>";
                }

                ?>
                <input type='hidden' name='ta' id='ta' value='<?php echo $i; ?>' > <!-- total admins -->

Javascript

<script type="text/javascript">

    //get ta
    var ta = parseInt(document.getElementById('ta').value);
    var admins = new Array();
    for(i=0;i<=ta;i++)
    {
      admins[i] = document.getElementById('a' + i).value;
      contacts[i] = parseInt(document.getElementById('c' + i).value);
    }
    //alert(p4);
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Phase', 'Contacts per phase'],

         for(i=0;i<=ta;i++)
         {
            ['admins[i]',     contacts[i]],
         }
        ]);

        var options = {
          title: 'Contacts per phase',
          pieHole: 0.4,
          is3D: true,
        };

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

Answer 1

这个问题怎么能在 3 小时内获得 5 个赞成票......它只有大 代码片段，几乎没有任何有用的信息。

我会首先将我的 php 输入直接保存到两个全局 javascript 变量中(而不是创建隐藏的 HTML 元素)。 完成后我会更换

var data = google.visualization.arrayToDataTable([
      ['Phase', 'Contacts per phase'],

     for(i=0;i<=ta;i++)
     {
        ['admins[i]',     contacts[i]],
     }
    ]);

与

var data = google.visualization.DataTable();
     data.addColumn('string','Phase');
     data.addColumn('string','Contacts per Phase');

     for(i=0;i<admins.length;i++){
        data.addRow([admins[i], contacts[i]]);
     };

这将添加两列，阶段和每个阶段的联系人，然后为每个管理员填充一行。

阅读更多关于将 php 变量传递给 Javascript 变量的信息 here ，如果您有兴趣，非常好的阅读。