Morris图表undefined使用jquery ajax php

我是新的web开发尤其是jquery等。在我的代码中，morris图表被认为是来自ajax请求的数据。下面的代码片段
HTML
Morris图表undefined使用jquery ajax php

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

[{功率：21.837696，时间：'10：59：41' }，{功率：2.07552，时间：'11：00：23' }，{功率： 14.09736，时间：'11：00：42'}，{power：10.149408，time：'11：03：52'}，{power：20.195136，time：'13：45：01'}，]

据推测，morris图表会显示图表like this（我用php输出替换了数据：chart_data）。相反，我得到this。我遵循其他方法，但它仍然是一样的。任何帮助我如何解决这个问题？提前感谢你！

来源

2017-08-04 Thesis it

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

chart.setData(chart_data);

注：

1：你需要通过数组对象绘制不串。

第二：在PHP侧构建阵列，公正与json_encode();

3呼应：在Ajax调用

来源

2017-08-04 10:30:44 JYoThI

现在我明白了补充dataType:'json',。非常感谢！我终于得到了我需要的东西。 –

Morris图表undefined使用jquery ajax php

回答

相关问题