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： enter image description here

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

这是数据库数据：

[{"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免责声明：我不在其中编码，我不知道，我不喜欢，所以请原谅上面的任何拼写错误

jQuery flot不会绘制饼图

1 个答案: