jQuery flot 不绘制饼图

Question

我正在使用 jQuery flot，现在我可以制作带有线条和点的图表，但我的客户需要有一个用于诊断的饼图，所以我正在尝试制作它但没有成功...... 我不知道为什么我的 flot 饼图不显示图表...也许你可以帮助我解决我的问题。

这是页面内我的 flot 的脚本：

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

这里是 graficas6.php 中的 db 调用：

<?php
include 'includes/confs.php';
    $return_arr = array();
$sql = $conn->prepare("select diagnostico, 
count(diagnostico) from 
( select diagnostico as diagnostico from DIAGNOSTICO union all select diagnostico1 as diagnostico from DIAGNOSTICO union all select diagnostico2 as diagnostico from DIAGNOSTICO union all select diagnostico3 as diagnostico from DIAGNOSTICO) 
t group by t.diagnostico");
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))  {
    $return_arr[] = $row;   
    }
    echo json_encode($return_arr);
?>

这是在 jschartrep.php 中制作图表的脚本：

<script id="source" language="javascript" type="text/javascript"> 
$(function () {
$.ajax({ 
    url: "graficas6.php", 
    method: "GET", 
    dataType: "json", 
    success: function(series) {
        var data = [series];
        alert(data);
        $.plot($("#pie"), data, {
            pie: { 
                show: true,
                showLabel: true
            }, legend: { 
                show: true
            }
        });
     }
});  
</script>

还有我页面内的 div：

<?php include 'graficas6.php'; ?>
<?php include 'jschartrep.php'; ?>
<div id="pie" style="height: 300px;"></div>

现在只显示这样的数据：

[
    {
        "diagnostico": "acne",
        "count(diagnostico)": "1"
    },
    {
        "diagnostico": "herpes",
        "count(diagnostico)": "1"
    },
    {
        "diagnostico": "melanoma",
        "count(diagnostico)": "2"
    }
]

你能给我一个线索吗？

---

用新代码编辑：

在 graficas6.php 中：

<?php
include 'include/configs.php';
$sql = $conn->prepare("select diagnostico, 
count(diagnostico) from 
( select diagnostico as diagnostico from DIAGNOSTICO union all select diagnostico1 as diagnostico from DIAGNOSTICO union all select diagnostico2 as diagnostico from DIAGNOSTICO union all select diagnostico3 as diagnostico from DIAGNOSTICO) 
t group by t.diagnostico");
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))  {

  $data[] = array("label" => $row["diagnostico"], "data" => $row["count(diagnostico)"]); 
}
?>

在 jschartrep.php 中

<script language="javascript" type="text/javascript">
$(function () { 
var dataset1 = <?php echo json_encode($data); ?>;
var data = [
{
"label": dataset1,
pie: {
show: true,
radius: 3/4,
label: {
show: true,
radius: 3/4,
formatter: function(label, series)
{
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: 
{
opacity: 0.5,
color: '#000'
}}}}
];
var plot = $("#pie");
$.plot( plot , data );
}); 
</script>

这里是 Prt Scr：

现在显示的是一个空折线图...我需要一个饼图...代码中的错误在哪里？？

这是数据库数据：

[{"label":"acne","data":"1"},{"label":"herpes","data":"1"},{"label":"melanoma","data":"2"}]

Answer 1

您的数据格式不正确。根据文档，它应该如下所示：

    var data = [
        { label: "Series1",  data: 10},
        { label: "Series2",  data: 30}
    ];

所以修改你的 PHP 为：

while($row = $sql->fetch(PDO::FETCH_ASSOC))  {
  $return_arr[] = array("label" => $row["diagnostico"], "data" => $row["count(diagnostico)"]);  
}

这应该产生一个数组：

    var data = [
        { label: "acne",  data: 1},
        { label: "herpes",  data: 1},
        { label: "melanoma",  data: 2} 
    ];

另请注意，您的数据必须是数字。因此，您可能需要将$row["count(diagnostico)"] 转换为带有(int) $row["count(diagnostico)"] 的整数。不知道为什么这是必要的（因为它们应该是来自数据库的整数），但在您的示例数据中，计数是字符串......

我的标准PHP免责声明：我没有在里面编码，我不知道，我不喜欢，所以请原谅上面的任何错别字。