如何將動態數據添加到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條形圖

回答

相關問題