0

尝试使用浮点图显示实时数据时，客户端代码中出现以下错误

  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。

应用程序.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'  });
};

索引.jade

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

Style.css h1, h2, h3 { font-size: 22px; 颜色：#464646；}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
placeholder {
  width:600px;
  height:300px;
}

我有一个 index.jade 的等效 html 客户端，它工作正常。我在将客户端的html版本转换为jade时遇到了上述错误。客户端的 html 版本是 -

索引.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>

这是html客户端的输出在此处输入图像描述

4

1 回答 1

0

Flot 需要能够读取占位符 div 的宽度和高度。您的 Jade 输出会生成一个占位符，它没有设置高度，也没有从任何父元素或子元素派生的高度。因此它的高度为零，这阻止了 Flot 使用它。

您的 HTML 示例有效，因为您使用内联样式设置了宽度和高度。

于 2013-04-16T11:58:01.433 回答