首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Morris.js条形图在php?

Morris.js条形图在php?
EN

Stack Overflow用户
提问于 2020-03-05 00:02:03
回答 1查看 298关注 0票数 0

我正在使用Morris.js图形来显示我的MySQL数据。不幸的是,这些图表根本看不见。我遵循了一个简单的教程,但仍然没有任何反应。我在代码中做错了什么?我假设Morris.Bar代码下的data格式应该是不同的。格式应该是什么?

代码语言:javascript
复制
<?php

$connect = mysqli_connect("localhost", "host", "", "_data");
$query = "SELECT * FROM Datas";
$result = mysqli_query($connect, $query);
$chart_data = '';

while($row = mysqli_fetch_array($result))
{
    $chart_data .= "{ ID:'".$row["ID"]."', Name:".$row["Name"].", Wrongs:".$row["Wrongs"].", Rights:".$row["Rights"].", Percentage:".$row["Percentage"].", Age:".$row["Age"]."}, ";
}
$chart_data = substr($chart_data, 0);
?>

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | How to use Morris.js chart with PHP & Mysql</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>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">MySQL</h2>
   <h3 align="center">Data</h3>   
   <br /><br />
   <div id="chart"></div>
  </div>
 </body>
</html>


    <script>
Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',
  ykeys: ['Wrongs', 'Rights'],
  labels: ['Wrongs', 'Rights'],
});
    </script>
EN

回答 1

Stack Overflow用户

发布于 2020-03-05 20:35:23

我找到了它,在调用Morris.Bar之前,我只需要添加一行函数,该函数用于在继续操作之前检查文档是否就绪:

代码语言:javascript
复制
<script>
$(document).ready(function () { 
Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',
  ykeys: ['Wrongs', 'Rights'],
  labels: ['Wrongs', 'Rights'],
});
});
</script>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60530071

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档