Morris Chart 未显示页面为空白

Question

这是我从 mysql 获取数据然后将数据值导入 morrisjs 的简单代码，但我的页面是纯空白的，什么也没有显示。我是新手

<?php
        
    $conn=mysqli_connect("localhost","root","","userchart");
    $query= "SELECT * FROM chart";
    $result=mysqli_query($conn,$query);
    $chart_data='';
    while($row=mysqli_fetch_array($result))
    {
        $time= strtotime($row['time']);
        
        $chart_data .="{ user:'".$row['uid']."', time:".date('i',$time)."}";
    }
       

    echo $chart_data = substr($chart_data, 0, -1);
?>

我使用此语句测试我是否以正确的格式获取值并且格式正确但最后没有显示折线图。

echo $chart_data = substr($chart_data, 0, -1);

<html>
    <head>
        <title> CHART USING MORRIS.JS</title>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
        <script src="//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>
    </head>
    <body>

        <div id="chart" style ="height 250px;"></div>

        <script>
            new Morris.Line({
                // ID of the element in which to draw the chart.
                element: 'chart',
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [<?php echo $chart_data; ?>], 

                // The name of the data record attribute that contains x-values.
                xkey: 'user',
                // A list of names of data record attributes that contain y-values.
                ykeys: ['time'],
                // Labels for the ykeys -- will be displayed when you hover over the
                // chart.
                labels: ['time']
            });
        </script>
    </body>
</html>

Answer 1

未测试，但也许您可以这样尝试。而不是做一些不稳定的字符串操作，你应该使用 json_encode

<?php
        
    $conn=mysqli_connect("localhost","root","","userchart");
    $query= "SELECT * FROM chart";
    $result=mysqli_query($conn,$query);
    
    $data=array();
    
    while( $row=mysqli_fetch_array($result) ){
        $data[]=array(
            'user'  =>  $row['uid'],
            'time'  =>  date('i',strtotime( $row['time']) )
        );
    }
    $json=json_encode( $data );
?>
<html>
    <head>
        <title>CHART USING MORRIS.JS</title>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
        <script src="//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>
    </head>
    <body>

        <div id="chart" style ="height 250px;"></div>

        <script>
            <?php
            printf('var json=%s;',$json);
            ?>
            new Morris.Line({
                element: 'chart',
                data:json,
                xkey:'user',
                ykeys:['time'],
                labels:['time']
            });
        </script>
    </body>
</html>

Morris Chart 未显示页面为空白

Morris Chart is not displaying page is blank

html

php

charts

display