莫里斯图不显示

Question

我需要为创建的每个引导选项卡制作一个图表，我的数据库中有四个选项卡来自四个列，每个选项卡都应该显示该特定列的图表。这是检索和回显所需选项卡的代码

 <?php 

    require_once("../include/membersite_config.php");
    $username = $_SESSION['username_of_user'];

    $config = parse_ini_file('../private/config.ini');     
    $connect = mysqli_connect($config['servername'],$config['username'],$config['password'],$config['dbname']);

    $tab_query = "SELECT * FROM ".$config['tablenamenode']." WHERE username = '".$username."' ORDER BY id ASC";
    $tab_result = mysqli_query($connect, $tab_query);
    $tab_menu = '';
    $tab_content = '';
    $i = 0;
    while($row = mysqli_fetch_array($tab_result))
    {
        if($i == 0)
        {
            $tab_menu .= '
            <li class="active"><a href="#'.$row["gatewayno"].'" data-toggle="tab">'.$row["description"].'</a></li>
            ';

            $tab_content .= '
            <div id="'.$row["gatewayno"].'" class="tab-pane fade in active">
            <div class="row">
                <div class="col-md-12">
                    <div id="'.$row['gatewayno'].'" style="height:200px"></div>
                </div>
            </div>
            </div>
            ';

            $gatewayno[] = $row["gatewayno"];

        }
        else
        {
            $tab_menu .= '
            <li><a href="#'.$row['gatewayno'].'" data-toggle="tab">'.$row["description"].'</a></li>
            ';

            /*$tab_content .= '
            <div id="'.$row["gatewayno"].'" class="tab-pane fade">
            <div id="morris-area-chart" style="position: relative; height: 300px; padding: 30px;" >
            </div>
            </div>
            ';*/


            $tab_content .= '<div class="tab-pane fade" id="'.$row['gatewayno'].'">
            <div class="row">
                <div class="col-md-12">
                    <div id="'.$row['gatewayno'].'" style="height:200px"></div>
                </div>
            </div>
            </div>
            ';

            /*$tab_content .= '
            <div id="'.$row["gatewayno"].'" class="tab-pane fade">
            ';*/

            $gatewayno[] = $row["gatewayno"];

        }

        //$tab_content .= '</div>';
        $i++;
    }

?>

显示标签和内容的 HTML 代码

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <!-- AREA CHART -->

          <div class="nav-tabs-custom">
            <!-- Tabs within a box -->
            <ul id="tabs" class="nav nav-tabs pull-right">
              <!--<li class="active"><a href="#morris-area-chart" data-toggle="tab">Donut</a></li>-->
              <li class="pull-left header"><i class="fa fa-inbox"></i> Temperature and Humidity</li>

              <?php
                echo $tab_menu;
              ?>

            </ul>

            <div class="tab-content no-padding">
              <!-- Morris chart - Sales --> 
              <!--<div class="chart tab-pane active" id="morris-area-chart" style="position: relative; height: 300px; padding: 30px;" ></div> -->

              <?php
                echo $tab_content;
               ?>

            </div>

          </div>

            <!-- /.box-body -->
        </div>
          <!-- /.box -->  
        </div>

        <!-- /.col (RIGHT) -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

PHP 代码和 javascript 来初始化图形

<?php

$n = 0;

foreach($gatewayno as $key => $value)
{
    ?>
<script>

var <?php echo $value ?> = Morris.Area({
    // ID of the element in which to draw the chart.
element: '<?php echo $value ?>',

behaveLikeLine: true,

    // Chart data records -- each entry in this array corresponds to a point
    // on the chart.

    // The name of the data record attribute that contains x-values.
xkey: 'timestamp',

    // A list of names of data record attributes that contain y-values.
ykeys: ['humidity','temperature'],

    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
labels: ['Humidity', 'Temperature'],

    //lineColors: ['#3da1231'],
xLabels: 'hour',

    // Disables line smoothing
smooth: true,
resize: true
});

</script>

<?php

    $n++;
}
?>

<?php

foreach($gatewayno as $key => $value)
{

?>
<script>

function update<?php echo $value ?>(){


 $.ajax({
      type: "POST",
      dataType: 'json',
      url: "charts-ajax-testing.php", // This is the URL to the API
      data: {id: <?php echo $value ?>},

      success: function(html)                    
      {   
        <?php echo $value ?>.setData(html);
        alert("TEST"."<?php echo $value?>");
      }

    });
 }

setInterval(update<?php echo $value ?>,5000);

</script>

<?php 

}

?>

但是，标签中没有显示任何图表。经过检查，我发现了这个错误

Uncaught TypeError: Cannot read property 'length' of undefined
    at d.<anonymous> (morris.min.js:6)
    at d.b.Grid.d._calc (morris.min.js:6)
    at d.b.Grid.d.redraw (morris.min.js:6)
    at d.b.Grid.d.resizeHandler (morris.min.js:6)
    at morris.min.js:6

调整浏览器大小时

这是检查后的代码

Answer 1

您在Morris.Area 调用中缺少data 字段。

根据documentation，“数据”字段是必需的，您似乎没有将其包含在您的通话中。

要绘制的数据。这是一个对象数组，包含 x 和 y xkey 和 ykeys 选项描述的属性。