莫里斯图表不显示页面为空白答案

【问题标题】：Morris Chart is not displaying page is blank莫里斯图表不显示页面为空白
【发布时间】：2020-12-14 22:01:47
【问题描述】：

这是我从 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>

【问题讨论】：

你为什么对我们大喊大叫？您应该使用 json_encode() 创建 json 而不是手动创建。如果数据库返回多条记录，您当前的代码将生成无效的 json。如果数组中有多个对象，则需要用逗号分隔：[{name: 'foo'}, {name: 'bar'}, ...]
为什么要重新发明轮子并构建自己的 JSON 数据字符串？使用json_encode - 它将是一致且可靠的
您尝试检查哪些问题？生成的标记看起来像您期望的标记吗？浏览器的错误控制台中是否显示任何错误消息？
@NicoHaase 是的，控制台显示一些语法错误，现在可以正常工作了，感谢您的帮助。
@MagnusEriksson 对不起，先生。好的，先生，我将尝试使用 JSON 编码（）。但是我对json一无所知，我应该从哪里开始提出任何建议。任何指导都会有所帮助。

标签： php html charts display

【解决方案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>

【讨论】：

非常感谢伙计，这正在工作我不知道为什么，但是它工作正常。