Jquery 当从php脚本通过Ajax获取数据时，Morris.js donut chart不显示图表

我正在通过morris.js甜甜圈图表显示数据。这些数据通过PHP和ajax来自MySQL数据库

在典型的示例中，您可以在代码中键入要显示的数据

Morris.Donut({
            element: 'donut-example',
            data: [
              { label: "Download Sales", value: 12 },
              { label: "In-Store Sales", value: 30 },
              { label: "Mail-Order Sales", value: 20 }]
        });

但是，当我从数据库调用数据时，图表不会显示。此外，firebug没有显示任何错误

这是我从PHP获得的输出：

[{label: "4 pairs",value: "9"},{label: "3 pairs",value: "9"},{label: "2 pairs",value: "6"},{label: "5 pairs",value: "3"},{label: "6 pairs",value: "2"},{label: "1 pair",value: "2"}]

实际上，我通过在Morris.Donut（）中复制来尝试这个输出；功能和它的工作很好

这是Ajax代码（根本不起作用）：

但是，如果我有以下代码：

$.ajax({
            url: "ajax/modas_pares.php",
            cache: false,
            type: "post",
            data: {lotto: 'the_lotto', limit: 20},
            //dataType: "json",
            timeout:3000,
            success : function (resp){
                //var column_data = $.parseJSON(resp);
                //alert(resp);
                Morris.Donut({
                    element: 'donut-example',
                    data: [{label: "3 pairs",value: "6"},{label: "4 pairs",value: "5"},{label: "2 pairs",value: "5"},{label: "5 pairs",value: "3"},{label: "1 pair",value: "1"},{label: "6 pairs",value: "1"}]
                });
            },
            error: function(jqXHR, textStatus, ex) {
              console.log(textStatus + "," + ex + "," + jqXHR.responseText);
            }
        });

它确实有用，很好

我不明白的是，如果我试图通过一个变量传递代码，它就不起作用了！！：

$string='[{label: "4 pairs",value: "9"},{label: "3 pairs",value: "9"},{label: "2 pairs",value: "6"},{label: "5 pairs",value: "3"},{label: "6 pairs",value: "2"},{label: "1 pair",value: "2"}]';
?>

及

$.ajax({
url:“ajax/modas_pares.php”，
cache:false，
类型：“post”，
资料：{乐透：乐透，限额：20}，
//数据类型：“json”，
超时：3000，
成功：功能（resp）{
//var column_data=$.parseJSON（resp）；
//警报（resp）；
莫里斯，甜甜圈({
元素：“甜甜圈示例”，
数据：“”
});
},
错误：函数（jqXHR、textStatus、ex）{
日志（textStatus+”、“+ex+”、“+jqXHR.responseText）；
}
});

它不起作用：（如果我从php变量或通过ajax从php脚本获得它：/

---

我遗漏了什么？我如何修复这个问题？为什么？

错误正好出现在设置数组的地方。在PHP部分，您应该按如下方式创建数组：

$resp = array(
      array('label' => '5 pairs','value' => 4),
      array('label' => '3 pairs','value' => 8)
);
echo json_encode( $resp );

然后您可以使用：

$.ajax({
        url: "ajax/modas_pares.php",
        type: "post",
        data: {loteria: 'melate', limit: 20},
        dataType: "json",
        timeout:3000,
        success : function (resp){
            Morris.Donut({
                element: 'donut-example',
                data: resp
            });
        },
        error: function(jqXHR, textStatus, ex) {
          console.log(textStatus + "," + ex + "," + jqXHR.responseText);
        }
    });

---

我也遇到了同样的问题。典型的示例运行良好，但在动态引入数据时效果不佳。我解决了以下问题：

setTimeout(function () {
        Morris.Donut({
            element: 'donut-example',
            data: newArray
        },2000);

    });

---

每当您遇到这样的错误（尤其是在morris甜甜圈图表上），只需先将控制器的结果插入变量，然后将该变量用于

数据：

e、 g:

我假设您已经使用

json\u encode（）

函数将查询结果转换为json

var data = res;
// or
var data = "<?php echo $variable_from_controller_or_your_query_result ?>";
Morris.Donut({
       element : 'your div id',
       data : data,
});       

var数据=res；
//或
var数据=”；
莫里斯，甜甜圈({
元素：“您的div id”，
数据：数据，
});       

上述示例将在以下情况下起作用：

您的数据已转换为json

---

希望我的例子能帮助那些需要答案来解决问题的人：D

@bitnijadone！

setTimeout(function () {
        Morris.Donut({
            element: 'donut-example',
            data: newArray
        },2000);

    });

var data = res;
// or
var data = "<?php echo $variable_from_controller_or_your_query_result ?>";
Morris.Donut({
       element : 'your div id',
       data : data,
});