Question

我尝试将我的数据显示为morris条形图。我在nodejs中编写了一个函数，它将我的数据返回为：

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

将对象显示为morris图表

1 个答案: