将对象显示为莫里斯图表

Question

我尝试将我的数据显示为莫里斯条形图。我在 nodejs 中写了一个函数，return 我的数据为：

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

我不明白怎么了。谁能帮帮我？

Answer 1

很有可能，问题出在这三件事上。让我们再检查一下。

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。它不应该是空的。
我还注意到你也没有包括 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>

将对象显示为莫里斯图表

Display an object as a morris chart

javascript

morris.js