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

Question

我正在通过 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",
    type: "post",
    data: {lotto: 'the_lotto', limit: 20},
    success : function (resp){
        //alert(resp);
        Morris.Donut({
            element: 'donut-example',
            data: resp
        });
    },
    error: function(jqXHR, textStatus, ex) {
      console.log(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

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

$.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,
            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: '<?php echo $string ?>'
                });
            },
            error: function(jqXHR, textStatus, ex) {
              console.log(textStatus + "," + ex + "," + jqXHR.responseText);
            }
        });

它不起作用:(如果我从php变量或通过ajax从php脚本获取它:/

我错过了什么？我怎样才能解决这个问题？为什么？？？？？

Answer 1

错误就在您设置阵列的地方。在 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);
        }
    });