Question

我试图制作一张显示注册用户总数的morris.js折线图。

事情是它不会在我的index.php上显示。我已经导入了所有的javascript和css文件。有没有人可以帮助我？

我对javascript场景很新。欢迎这么简单的答案哈哈。

这是我的代码：

      <?php

                $connection = $stmt -> prepare("SELECT * FROM `user`");
                $connection -> execute();

                $chart_data = '';

                while($row = $connection -> fetch(PDO::FETCH_ASSOC)){
                  $chart_data .= "{ year:'".$row['ID']."'
                  }";
                }
                $chart_data = substr($chart_data, 0, -2);



                 ?>

                 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
                 <script stc="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
                 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
                 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

                 <script>
                 Morris.Bar({
                   element : 'chart',
                   data:[<?php echo $chart_data; ?>],
                   xkeys:'year',
                   ykeys:['users'],
                 });
                 </script>


                <div class="container" style="width:900px;">
                    <h2 allign="center">Data grafiek</h2>
                    <br><br>
                    <div id="chart"></div>
                </div>

Answer 1

您的数据应采用以下格式：

 data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],

我已经更改了jQuery库。将JS放在HTML代码的末尾

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

                 <script>
        $(document).ready(function(){
                 Morris.Bar({
                   element : 'chart',
                   data:[<?php echo $chart_data; ?>],
                   xkeys:'value',
                   ykeys:['year'],
                  labels: ['year']
                 });
               });
</script>

PHP代码应该不是-2，它将是-1

  while($row = mysqli_fetch_assoc($result)){
                     $id=$row['id'];  
             $val=$row['fname'];
             $chart_data .= "{ year:'$id',value:'$val'},";
                }
                $chart_data = substr($chart_data, 0, -1);

尝试此操作并分享您的控制台（如果可以）

Morris.js没有显示任何图表

1 个答案: