莫里斯图未定义使用 jquery ajax php

Question

我是网络开发的新手，尤其是 jquery 等等。在我的代码中，应该可以看到莫里斯图表以及来自 ajax 请求的数据。下面是一段代码
HTML

<div id = "node" class = "something">//some divs here</div>
<div id = "myModal role = "dialog">//some divs here again
<div class = "modal-body"><div id = "my_chart"></div></div></div>

Javascript

<script type="text/javascript">
$(document).ready(function(){
  var chart_data = '';
  var div_id = '';

  $(".something").click(function(){
    div_id = jQuery(this).attr("id");
    $.ajax({
      type : 'POST',
      url : 'test1',
      data : { "node_num" : div_id},
      success: function(data){
        chart_data = data;
        console.log(chart_data);
        $('#myModal').modal();
      },
      error: function(data){
        alert("Something went wrong, please refresh");
      }
    });
  });


  $("#myModal").on('shown.bs.modal', function(){
    $('#my_chart').empty();
      var chart =  Morris.Area({
        element: 'my_chart',
        data: chart_data,
        xkey: 'time',
        ykeys:['power'],
        labels:['Power(Watts)'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true,
        lineColors: ['#1abc9c'],
        fillOpacity: 0.75,
        parseTime: false
        });
      });

  $(".something").hover(function(){
    $(this).css('cursor','pointer');
  })
}); 

</script>

PHP

public function test1()
    {
        $node_num = $this->input->post('node_num');
        $chart = '';
        $chart_data = '';
        $query = $this->Nodes->get_chartdata($node_num);

        foreach($query->result() as $row)
        {
            $time = substr($row->n_date, -8);
            $power = ($row->voltage)*($row->current);
            $chart .= "{ power: ".$power.", time: '".$time."' }, ";
        }
        $chart_data = '['.$chart.']';
        echo $chart_data;

    }

PHP 输出

[{ power: 21.837696, time: '10:59:41' }, { power: 2.07552, time: '11:00:23' }, { power: 14.09736, time: '11:00:42' }, { power: 10.149408, time: '11:03:52' }, { power: 20.195136, time: '13:45:01' }, ]

据推测，莫里斯图表将显示一个图形 like this(I replaced data: chart_data with the php output). Instead, I'm getting this。我按照其他方法，但它仍然是一样的。关于如何解决这个问题的任何帮助？非常感谢您！

Answer 1

要更新图表，您需要使用 setData .

chart.setData(chart_data);

注：

1st : 您需要将数组对象传递给 graph 而不是 string 。

2nd : 在 php 端构建数组，然后用 json_encode();

回显

第 3 次： 在 ajax 调用

中添加 dataType:'json',

Answer 2

如@JYoThI 所述，您应该检查所有这些要点，我将在此处解释其中一个步骤：

2nd : 在 php 端构建数组，然后用 json_encode();

回显

好的，所以在你的 foreach 循环中，构建一个数组

$array[] = array('power' => trim("Some value"), 'time' => "time here" );

现在显然上面的数组将 return 返回 ajax 成功作为 json 数据。

json_encode(array('newvalue'=> $array), 200)

在ajax成功的部分，把这行

chart.setData(data.newvalue);

我在构建数组时使用了 trim，这是因为我在这里遇到了问题，一旦删除空格，它对我来说就很好用了。希望能帮助到你。

莫里斯图未定义使用 jquery ajax php

Morris chart undefined using jquery ajax php

php

ajax

jquery

morris.js