php - 使用 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 (我用 php 输出替换了 data:chart_data)。相反，我得到 this 。我按照其他方法但还是一样。对我如何解决这个问题有任何帮助吗？提前非常感谢!

Answer 1

对于图表更新，您需要使用 setData 。

chart.setData(chart_data);

注意:

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

第二:在 php 端构建数组并使用 json_encode();

进行回显

第三:在ajax调用中添加dataType:'json',