如何解决莫里斯图表未显示页面为空白
这是我的简单代码，用于从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,-1);
?>
我使用此语句测试我是否以正确的格式获取价值并且格式正确，但是最后未显示折线图。
echo $chart_data = substr($chart_data,-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
<?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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。