无法使用expressJS显示morris.js图表

时间:2018-03-27 09:00:02

标签: node.js express mongoose morris.js

我使用expressJS,Handlebars如模板引擎和MongoDB,我想在我的网页上使用morris.js在我的index.hbs文件中使用此代码显示图形

<script  id="entry-template" type="text/x-handlebars-template">

     console.log("fooooo")
    new Morris.Line({
      // ID of the element in which to draw the chart.
      element: 'myfirstchart',
      // Chart data records -- each entry in this array corresponds to a point on
      // the chart.
      data: {{graph}},
      // The name of the data record attribute that contains x-values.
      xkey: 'version',
      // A list of names of data record attributes that contain y-values.
      ykeys: ['success'],
      // Labels for the ykeys -- will be displayed when you hover over the
      // chart.
      labels: ['success']
    });

   </script>
    <div id="myfirstchart" style="height: 250px;"></div>

但没有显示任何内容(甚至是日志) enter image description here

1 个答案:

答案 0 :(得分:3)

您应将您的脚本代码放在document ready

$(document).ready(function(){
new Morris.Line({
      // ID of the element in which to draw the chart.
      element: 'myfirstchart',
      // Chart data records -- each entry in this array corresponds to a point on
      // the chart.
      data: {{graph}},
      // The name of the data record attribute that contains x-values.
      xkey: 'version',
      // A list of names of data record attributes that contain y-values.
      ykeys: ['success'],
      // Labels for the ykeys -- will be displayed when you hover over the
      // chart.
      labels: ['success']
    });
})