Morris Donut 图表，数据来自 mysql

Question

使用下面的代码，我正在尝试创建一个 Morris Donut 图表。但我没有得到预期的输出。这是我第一次尝试通过从 mysql 获取数据来创建莫里斯图表。所以如果有什么大的错误，请原谅我。这是代码 "morris.php"

<?php
require_once('connection.php');
?>
<html>
<head>
 <link rel="stylesheet" href="morris.css">
 <script src="jquery.min.js"></script>
 <script src="raphael-min.js"></script>
 <script src="morris.min.js"></script>
 <meta charset=utf-8 />
</head>
<body>

<?php 
$sql= "select wlt_txn_cat as cat , sum(wlt_txn_amount) as amt from wallet_txns where wlt_txn_type = 'Expense' group by wlt_txn_amount desc";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
if ( mysqli_num_rows($result) >0)
while($row = mysqli_fetch_array($result))
{
?>

<div id="donut-example" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
  element: 'donut-example',
  data: [

    {label: "<?php echo $row['cat'] ?>", value: "<?php echo $row['amt'] ?>"}

        ]
  });

</script>

 <?php  } ?>

</body>
</html>

屏幕截图....

获得正确输出的实际代码（下图右侧是...我正在尝试通过 [=23= 获取 'label' 和 'value' ] 使用 php.

数据库

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 15},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20},
    {label: "General Sales", value: 40}
  ],
  backgroundColor: '#ccc',
  labelColor: '#060',
  colors: ['#DD4B39','#4486F7','#FAC504','#019C5A']
  });

Answer 1

在 Google 和 Whosebug 的帮助下（通过搜索文章和参考资料），我终于找到了解决方案。我不知道这是否是最好的解决方案。但正如我所料，它对我有用。这是使用的完整代码。

<html>
<head>
 <link rel="stylesheet" href="morris.css">
 <script src="jquery.min.js"></script>
 <script src="raphael-min.js"></script>
 <script src="morris.min.js"></script>
 <meta charset=utf-8 />
</head>
<body>

<?php
$db=new PDO('mysql:dbname=mydb;host=localhost;','root',''); 

$row=$db->prepare ("SELECT wlt_txn_cat as cat,sum(wlt_txn_amount)as amt FROM wallet_txns where  wlt_txn_cat <> 'Transfer' and wlt_txn_type = 'Expense' and wlt_txn_date between DATE (DATE_SUB(LAST_DAY(DATE_ADD(NOW(), INTERVAL 0 MONTH)),INTERVAL DAY(LAST_DAY(DATE_ADD(NOW(), INTERVAL 0 MONTH)))-1 DAY)) and date(CURDATE()) group by wlt_txn_cat ORDER BY wlt_txn_amount desc ");

$row->execute(); 
$json_data=array();  
foreach($row as $rec)  
{  
    $json_array['label']=$rec['cat'];  
    $json_array['value']=$rec['amt'];  
    array_push($json_data,$json_array);  
}  

{ ?>
<div id="donut-example" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
  element: 'donut-example',
  data: <?php echo json_encode($json_data)?>
  });

</script>

<?php  } ?>

</body>
</html>

Answer 2

如果是重音字母，请记住：输入

$db->query('SET NAMES utf8');

连接到 PHP 文件中的数据库后**

否则你会得到 null 值而不是标签。

多亏了这个 post 以及以下一个： Accented characters in mySQL table

Morris Donut 图表，数据来自 mysql

Morris Donut chart with data from mysql

php

morris.js