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

您错过了data来电中的Morris.Area字段。

根据documentation＆＃34;数据＆＃34;字段是必填字段，您似乎没有将其包含在通话中。

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

莫里斯图不显示

1 个答案: