如何将动态数据添加到morris条形图

我想通过ajax将数据添加到Morris条形图。以下是我在阿贾克斯成功如何将动态数据添加到morris条形图

[{"x":"2014-10-02","y":"1"},{"x":"2014-10-19","y":"1"},{"x":"2014-10-20","y":"1"},{"x":"2014-11-13","y":"1"}]

下获得JSON是JS代码

var chart = Morris.Bar({ 
     element : 'normal-bar-graph', 
     data : [{ 
      "x" : null, 
      "y" : null 
     }], 
     xkey : 'x', 
     ykeys : ['y'], 
     labels : ['Added'] 
    }); 
$.ajax({ 
      type: "POST", 
      url: "some_url", 
      data: {'user_report':[k,v]}, 

      success: function(html)      
      { 
       if(html == "error") 
       { 
       alert('error'); 
       } 
       else 
       { 
        chart.setData(html); 

       } 
       hide_loading(); 
      } 
     });

正在使用/morris/raphael.2.1.0.min.js和/morris/morris.min.js。 chart.setData(html);功能在morris的文档中不起作用。

提前致谢。如果有任何错误，请指出我。

也取得了jsbin如果，可以帮助：morris

来源

2015-09-15 dhpratik

删除引号。 setData需要一个数组。当你使用引号时，它将它转换成一个字符串而不是数组。

像这样：chart.setData([{ "y": "2006", "a": 100, "b": 90 },{ "y": "2006", "a": 100, "b": 90 }]);

来源

2015-09-15 18:22:58 afrin216

但它只显示一张图。另外当我想通过ajax获取数据时，'chart.setData（）'。 – dhpratik

@dhpratik：你的意思是“*它只显示一个图表*”？上面提供的解决方案应该可以工作，否则，你不会告诉我们整个画面。 – D4V1D

是的。看起来是因为一个bug - https://github.com/morrisjs/morris.js/issues/105 更新您的脚本到最新版本的morris条形图，一切正常。 http://jsbin.com/kiduwuseda/edit?html,js,output。但我原来的解决方案是解决您的问题。 – afrin216

如何将动态数据添加到morris条形图

回答

相关问题