Javascript 在jade客户端中使用flot显示动态图表时，express应用程序抛出错误

在尝试使用flot图表显示实时数据时，我在客户端代码中遇到以下错误

  Uncaught Invalid dimensions for plot, width = 1584, height = 0 

无法理解为什么高度为0。我想我的index.jade文件有问题。在index.jade中的以下语句中似乎出现了抛出错误

var plot = $.plot($("#placeholder"), [ getInitData() ], options);  

下面是我的app.js、index.js、index.jade和style.css

App.js

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
app.use(express.errorHandler());
});

app.get('/', routes.index);

var httpServer = http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});

var io = require('socket.io').listen(httpServer);   
io.sockets.on('connection', function(socket) {
socket.emit('welcome', {'salutation':'TMP36 Sensor output!'});      
});

index.js文件

exports.index = function(req, res){  
res.render('index', { title: 'Temperature Monitor',
          domain: 'localhost'  });
};

doctype 5
html
  head
    title= title
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js')       
script(type='text/javascript', src='/javascripts/flot/jquery.js')
script(type='text/javascript', src='/javascripts/flot/jquery.flot.js')      
script(type='text/javascript', src='./socket.io/socket.io.js')  
script
  $(document).ready(function(){ 
    var socket = io.connect();
    var val = 10;
    var temp;
    var totalPoints = 300;
    var res = [];      
    function getInitData() {// zip the generated y values with the x values
      for (var i = 0; i < totalPoints; ++i){
        res.push([i, 0]);        
      }
      return res;        
    }      
    // Options for Flot plot        
    var options = {        
        series: { shadowSize: 0 }, // drawing is faster without shadows        
        yaxis: { min: 0, max: 50, color: "#bbbb00" },            
        xaxis: { show: false },   
    };  
    var plot = $.plot($("#placeholder"), [ getInitData() ], options);
    socket.on('welcome', function(data) {  
      val = data.salutation ;
      res.push([totalPoints, val]); // push on the end side
      res.shift(); // remove first value to maintain 300 points
      for (i=0;i<totalPoints;i++) { res[i][0] = i; }
      plot.setData([ res ]);
      plot.draw(); 
      $('#temperature').text("Current Temperature: :" + val );          
    });        
  });
link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}
    #placeholder
    p graph here
    #temperature
    p temperature val

index.jade

exports.index = function(req, res){  
res.render('index', { title: 'Temperature Monitor',
          domain: 'localhost'  });
};

doctype 5
html
  head
    title= title
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js')       
script(type='text/javascript', src='/javascripts/flot/jquery.js')
script(type='text/javascript', src='/javascripts/flot/jquery.flot.js')      
script(type='text/javascript', src='./socket.io/socket.io.js')  
script
  $(document).ready(function(){ 
    var socket = io.connect();
    var val = 10;
    var temp;
    var totalPoints = 300;
    var res = [];      
    function getInitData() {// zip the generated y values with the x values
      for (var i = 0; i < totalPoints; ++i){
        res.push([i, 0]);        
      }
      return res;        
    }      
    // Options for Flot plot        
    var options = {        
        series: { shadowSize: 0 }, // drawing is faster without shadows        
        yaxis: { min: 0, max: 50, color: "#bbbb00" },            
        xaxis: { show: false },   
    };  
    var plot = $.plot($("#placeholder"), [ getInitData() ], options);
    socket.on('welcome', function(data) {  
      val = data.salutation ;
      res.push([totalPoints, val]); // push on the end side
      res.shift(); // remove first value to maintain 300 points
      for (i=0;i<totalPoints;i++) { res[i][0] = i; }
      plot.setData([ res ]);
      plot.draw(); 
      $('#temperature').text("Current Temperature: :" + val );          
    });        
  });
link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}
    #placeholder
    p graph here
    #temperature
    p temperature val

我有一个相当于index.jade的html客户端，它工作得很好。我在将客户端的html版本转换为jade时遇到了上述错误。 客户端的html版本为-

index.html

<!--!DOCTYPE html-->
<html lang='en'>
<head>
    <title>Data Collector</title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>      
    <script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.flot.js"></script>        
    <script src='/socket.io/socket.io.js'></script>     
    <script>
    $(document).ready(function(){
        var socket = io.connect();
        var val = 10;
        var temp ;          
        var totalPoints = 300;
        var res = [];
        function getInitData() {
            // zip the generated y values with the x values
            for (var i = 0; i < totalPoints; ++i){
                res.push([i, 0]);
            }
            return res;
        }
        // Options for Flot plot
        var options = {
            series: { shadowSize: 0 }, // drawing is faster without shadows
            yaxis: { min: 0, max: 50, color: "#bbbb00" },
            xaxis: { show: false },             
        };
        var plot = $.plot($("#placeholder"), [ getInitData() ], options);           
        socket.on('welcome', function(data) {
            // Convert value to integer
            //val = ((parseInt(data.salutation) / 1023)*100)*10;
            val = data.salutation ;
            // Push new value to Flot Plot
            res.push([totalPoints, val]); // push on the end side
            res.shift(); // remove first value to maintain 300 points
            // reinitialize the x axis data points to 0 to 299.
            for (i=0;i<totalPoints;i++) { res[i][0] = i; }
            // Redraw the plot
            plot.setData([ res ]);
            plot.draw();                
            $('#temperature').text("Current Temperature: :" + val );                                
        });
    });
    </script>       
</head>
<body>      
    <h1>Temperature Monitor</h1>        
    <div id="placeholder" style="width:600px;height:300px;"></div>
    <div id='temperature'><p>Temperature</p></div>      
</body>

数据采集器
$（文档）.ready（函数（）{
var socket=io.connect（）；
var=10；
无功温度；
var totalPoints=300；
var-res=[]；
函数getInitData（）{
//用x值压缩生成的y值
对于（变量i=0；ifor（i=0；iFlot需要能够读取占位符div的宽度和高度。您的Jade输出生成的占位符没有设置高度，也没有从任何父元素或子元素派生的高度。因此，它的高度为零，这会阻止Flot使用它

您的HTML示例之所以有效，是因为您使用内联样式设置了宽度和高度。
DNS，我忘了提到我有一个用于jade客户端的样式表。在原始线程中添加了style.css内容。sytle.css指定了flot图表的宽度和高度。但是我注意到，当jade文件被编译为HTML时，它会被删除oesn没有高度和宽度。可能这就是问题所在？？那么这是否意味着我必须使用内联样式在index.jade中设置宽度和高度？？谢谢DNS。我可以通过将行“#占位符”替换为“#占位符（style='width:600px；height:300px；”来修复它#'。知道我指定样式表链接时#占位符无法获取宽度和高度的原因吗？这是因为您的“占位符”CSS规则缺少前导哈希标记。您的规则适用于元素；要使其与id具有该值的元素一起工作，您应该改为使用#占位符。