Кольцевая диаграмма Morris.js не отображает диаграмму при получении данных через Ajax из php-скрипта

Я работаю над отображением данных через кольцевую диаграмму 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 }]
        });

однако, когда я вызываю данные из базы данных, диаграмма не отображается. Более того, 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, либо из php-скрипта через ajax:/

Что мне не хватает? Как я могу это исправить? Почему?????


jquery ajax donut-chart morris.js
person Pathros    schedule 22.06.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ошибка возникает именно там, где вы настроили массив. В разделе 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);
        }
    });
person user3818389    schedule 08.07.2014
comment
@BitNinja Готово! - person Pathros; 14.05.2017

arrow_upward
0
arrow_downward

У меня такая же проблема. Типичный пример работал нормально, но не при динамическом вводе данных. Я решил это следующим образом:

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

    });
person dasfdsa    schedule 06.11.2016

arrow_upward
0
arrow_downward

всякий раз, когда вы получаете такую ​​​​ошибку (особенно на диаграмме пончиков Морриса), просто сначала вставьте результат из контроллера в переменную, а затем используйте переменную в data:, например:

я предполагаю, что вы преобразовали результат запроса в json, используя функцию json_encode()

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

person DarkCode999    schedule 13.05.2017