Morris Chart不适用于ajax返回的数据

时间:2014-11-07 09:46:56

标签: javascript charts

这里在下面的脚本如果我运行当前评论的第2部分它将加载静态数据并且图表显示正常,但是当我调用函数delivery_by_owner()动态加载数据时我不能这样做为什么? ?数据正好从我需要的ajax调用开始。我无法更新莫里斯图表。

<script>

function delivery_by_owner()
{
    var from_date=$('#from_owner').val();
    var to_date=$('#to_owner').val();
    var transporter=$('#transporter').val();
    var vehicle=$('#vehicle').val();
    var response;
    console.log(vehicle);
    //alert(from_date+to_date+transporter+vehicle);
    $.post("ajax_handler.php",{"operation":"owner_graph","from":from_date,"to":to_date,"transporter":transporter,
    "vehicle":vehicle},function(data){
      response=$.parseJSON(data);

    });



{   
    Morris.Line({
  element: 'report2',
  data: [

                                for(var i=0;i<response.length;i++)
                                {
                                { y: response[i][0], a: response[i][1]},
                                }

  ],
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Total'],
  lineColors:['#1FB5AD']
});
}

}

////////////////// part 2  //////////////////////////
/*{ 
Morris.Line({
  element: 'report2',
  data: [
  { y: '23 Feb', a: 200, b: 160, c: 133},
    { y: '24 Feb', a: 200, b: 160, c: 133},
    { y: '25 Feb', a: 200, b: 160, c: 133},
    { y: '26 Feb', a: 200, b: 160, c: 133},
    { y: '27 Feb', a: 200, b: 160, c: 133},

    { y: '28 Feb', a: 200, b: 160, c: 133},
    { y: '29 Feb', a: 225, b: 200, c: 147},
    { y: '1 Mar', a: 231, b: 170, c: 160},
    { y: '2 Mar', a: 235, b: 175, c: 150},
    { y: '3 Mar', a: 228, b: 160, c: 130},
    { y: '4 Mar', a: 230, b: 130, c: 140},
    { y: '5 Mar', a: 245, b: 140, c: 160},
    { y: '6 Mar', a: 225, b: 150, c: 130},
  ],
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Total', 'Total', 'Total'],
  lineColors:['#1FB5AD', '#fc8675', '5ab6df']
});

}
*/</script>

1 个答案:

答案 0 :(得分:1)

搜索后我发现我们无法使用循环数据更新图形内容,我们可以使用morris图表提供的setData()来轻松更新图表内容。要记住的一件重要事情是我们应该以适当的格式向.setData()提供数据,并且我找到了这个链接 morris chart not updating  对于理解这一点非常有用。