顯示一個對象作爲morris圖表

我嘗試將我的數據顯示爲morris條形圖。我寫的NodeJS一個函數，返回我的數據：顯示一個對象作爲morris圖表

[{date: 32, energiep1: 3, energiep2: 0},{date: 32, energiep1: 4, energiep2: 0}]

我的代碼是：

var calcule=function(callback) 

     { 

    mesure_energie = new calcul_energie(function(mesures) 
     { 
     var l=mesures.length; 
     for(i=0; i<l; i++) 
     { 
    var mesure_Valeur = JSON.parse(mesures[i]); 

     data=data+"{date: "+mesure_Valeur.date 
     +", energiep1: "+mesure_Valeur.energiep1 
     +", energiep2: "+mesure_Valeur.energiep2+"},"; 

     } 
    data=data.substr(0,data.length-1); 
    data=data+"]"; 
    datas=data.toString(); 

    callback(datas);   

     });

後，我試圖顯示莫里斯圖，因爲這

<head> 
<title>MongoDB Web App</title> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael- 
min.js"></script> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> 
</head> 
<body> 
<!-- Use EJS to print out our data--> 

<div id="bar-example"></div> 


<script> 

Morris.Bar({ 
element: 'bar-example', 
data:datas, 
xkey: 'date', 
ykeys: ['energiep1', 'energiep2'], 
labels: ['Series A', 'Series B'], 
pointSize: 2, 
hideHover: 'auto', 
resize: true 

}); 
</script> 
</body>

我不不明白什麼是錯的。任何人都可以幫助我嗎？

來源

2017-07-27 Sirine Abed

很可能，問題出在這三件事情上。讓我們再檢查一次。

CDN路徑（替換爲這些）如morrisjs網站上所述。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

還要確保定義了變量datas。它不應該是emppty。
我也注意到你沒有包含morris.css。

我試過你的代碼，通過做這些事情和它的工作。看看下面的jsfiddle。

var datas = [{date: 32, energiep1: 3, energiep2: 0},{date: 32, energiep1: 4, energiep2: 0}]; 
 
new Morris.Bar({ 
 
element: 'bar-example', 
 
data:datas, 
 
xkey: 'date', 
 
ykeys: ['energiep1', 'energiep2'], 
 
labels: ['Series A', 'Series B'], 
 
pointSize: 2, 
 
hideHover: 'auto', 
 
resize: true 
 

 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 

 
<div id="bar-example" style="height: 250px;"></div>

來源

2017-07-27 11:23:29

感謝。是的，它現在正在工作。你知道我們是否可以用morris.js顯示格式日期嗎？ –

@SirineAbed如果它在工作，請通過勾選正確的圖標來接受我的答案。謝謝 –

讓我看看格式日期的事情，並會回覆給你。 –

顯示一個對象作爲morris圖表

回答

相關問題