Question

尝试使用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'  });
};

index.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版本是 -

的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>

这是html客户端 enter image description here

的输出

Answer 1

剧情需要能够读取宽度和宽度。占位符div的高度。您的Jade输出生成一个没有设置高度的占位符，并且没有任何父元素或子元素的派生高度。因此它的高度为零，这可以防止Flot使用它。

您的HTML示例有效，因为您已设置宽度＆amp;高度使用内联样式。

在jade客户端中使用flot显示动态图表时表达app抛出错误

1 个答案: