Question

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

您在代码中键入要显示的数据的典型示例工作正常

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

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

这是我从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变量或从php脚本通过ajax得到它：/

我缺少什么？我怎样才能解决这个问题？为什么?????

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);
        }
    });

Answer 2

我遇到了同样的问题。典型示例工作正常但不是动态引入数据时。我解决了它如下：

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

    });

Answer 3

每当你收到这样的错误时（特别是在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

从php脚本通过Ajax获取数据时，Morris.js圆环图不显示图表

3 个答案: