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 です。

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クライアントの出力ですここに画像の説明を入力

4

1 に答える 1

0

Flot は、プレースホルダー div の幅と高さを読み取ることができる必要があります。Jade 出力は、高さが設定されておらず、親要素または子要素から派生した高さのないプレースホルダーを生成します。したがって、その高さはゼロであり、Flot はそれを使用できません。

インライン スタイルを使用して幅と高さを設定したため、HTML の例が機能します。

于 2013-04-16T11:58:01.433 に答える