使用jquery php未定义的Morris图

Question

我是web开发方面的新手，尤其是jquery等等。在我的代码中，可能会看到morris图表中来自ajax请求的数据。下面是一个代码片段

<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>

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输出

{功率: 21.837696，时间：'10:59:41‘}，{功率: 2.07552，时间：'11:00:23’}，{功率: 14.09736，时间：'11:00:42‘}，{功率: 10.149408，时间：'11:03:52’}，{功率: 20.195136，时间：‘13:45:01 }，

据推测，莫里斯图表将显示一个图形像这样(我用php输出替换了数据: chart_data )。相反，我得到了这。我采用了其他方法，但仍然是一样的。我怎么解决这个问题有什么帮助吗？提前谢谢你！

Answer 1

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

chart.setData(chart_data);

注意：

1 :，您需要将数组对象传递给图形而不是字符串。

2 :在php端构建数组，并与json_encode();进行回波

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

Answer 2

正如@JYoThI所提到的，您应该检查所有这些要点，我将在这里解释其中一个步骤：

2:在php端构建数组，并使用json_encode()进行回显；

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

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

现在，很明显，上面的数组将作为json数据返回到ajax成功。

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

在ajax成功部分中，只需将以下一行

chart.setData(data.newvalue);

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