2017-07-27 10 views
0

私はモリスの棒グラフとして自分のデータを表示しようとしています。私はこのオブジェクトをモリスチャートとして表示

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

Iドンとしてモリスチャートを表示しようとしたその後

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);   

     }); 

:私のコードがある

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

:私は私のデータを返すnodejsで関数を書きます何が間違っているのか理解していない。誰も私を助けることができますか?

答えて

0

おそらく、問題はこれらの3つのことです。もう一度チェックしてみましょう。同様morrisjsウェブサイト上で述べたように

  • CDN経路(これらに置き換え)。

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

+0

感謝。はい、今働いています。 morris.jsでフォーマット日付を表示できるかどうか知っていますか? –

+0

@SirineAbedそれが動作している場合は、正しいアイコンを押して私の答えを受け入れてください。ありがとうございます –

+0

私はフォーマットの日付の事を見てみましょう、あなたに戻ってきます。 –

関連する問題