0

我正在通过 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 脚本获取它：/

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

4

3 回答 3

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);
        }
    });
于 2014-07-08T23:29:41.767 回答
0

我有同样的问题。典型的例子工作得很好，但当你动态地引入数据时就不行了。我解决了如下：

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

    });
于 2016-11-06T07:36:17.903 回答
0

每当您遇到这样的错误时（尤其是在 morris 甜甜圈图上），只需先将控制器中的结果插入到变量中，然后将变量放入data: 例如：

我假设您已使用json_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,
});

上面的例子将工作，如果

您的数据已转换为 json

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

于 2017-05-13T12:40:16.507 回答