gpt4 book ai didi

php - 带有 php mysql 的动态莫里斯 donut chart

转载 作者:行者123 更新时间:2023-11-29 02:43:44 26 4
gpt4 key购买 nike

我正在尝试制作莫里斯 donut chart 表,但由于未知原因,我得到了空白页。我有两个单独的文件,Chart.php 包含 sql 语句,然后是用于显示图表的邮件文件。

Chart.php代码

  try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
members GROUP BY gender ORDER BY memberID ASC ");
$stmt->execute();
}
catch(PDOException $e) {
echo '<p class="bg-danger">'.$e->getMessage().'</p>';
}

$data = array();

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$array[] = array(
'lable' => $row['gender'],
'value' => $row['no_of_gender']
);
}

$data = json_encode($data);

这是我用于接收 $data Chart.php 的 javascript 代码

 <script type="text/javascript" language="javascript" >

$(document).ready(function(){

var donut_chart = Morris.Donut({
url :"charts.php",
element: 'chart',
data: <?php echo $data; ?>
});
})

</script>

最佳答案

在 chart.php 文件中,您正在编码一个空数组。

替换

$data = json_encode($data);

$data = json_encode($array);

并确保您正确地将 $data 从 chart.php 文件传递​​到 javascript 代码。

下面是工作代码

<html>
<head>
// if you have downloaded these files to your project, change the path to include them.
<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>

<?php
try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM
members GROUP BY gender ORDER BY memberID ASC ");
$stmt->execute();
}
catch(PDOException $e) {
echo '<p class="bg-danger">'.$e->getMessage().'</p>';
}

$data = array(); // define array

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$data[] = array(
'lable' => $row['gender'],
'value' => $row['no_of_gender']
);
}

//print_r($data); // to check the array data
$json_data = json_encode($data); // convert to json array
?>
<div id="chart" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
element: 'chart', // div id
data: <?php echo $json_data; ?>,
xkey: 'lable',
ykeys: ['value'],
labels: ['Value']
});

</script>


</body>
</html>

关于php - 带有 php mysql 的动态莫里斯 donut chart ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46224775/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com