javascript - 刚接触 Jade 。想知道为什么图表没有显示？

Question

所以，我的代码编译没有错误，并且列表部分显示没有任何问题。然而，图表的代码没有显示任何内容(.script 中您看到 var tp 的部分。)HTML 输出仅显示图表的任何输出。其他一切似乎都是有效的。

extends layout
doctye html
html(lang='en')
  head
    script(language='javascript',type='text/javascript',src='jquery.min.js')
    script(language='javascript',type='text/javascript',src='jquery.jqplot.min.js')
    link(rel='stylesheet',type='text/css',href='jquery.jqplot.css')

   div(id='chartdiv',style='height:400px;width:700px;')

  body
    script.
        var tp = [95,85,73,10,0,55,80,118,45,47,60,65,36,78,99];
        $.jqplot('chartdiv',  [[[0, 15],[10,78]],[[0, tp[0]],[1,tp[1]],[2,tp[2]],
        [3,tp[3]],[4,tp[4]],[5,tp[5]],[6,tp[6]],[7,tp[7]]]],
        { title:'Temperatures',
          axes:{xaxis:{label:'Time (seconds)', min:0, max:15, numberTicks:16}, 
          yaxis:{label:'Temperature (F)', min:0, max:120, numberTicks:13}},
      series:[{color:'#5FAB78'},{color:'#000077'}],
      legend:{show:true, labels:['Cats','Dogs']}
    });
  block content
    h1.
        User List
    ul
        each user, i in userlist.reverse()
            li
                <p> TIME #{user.wd1} WD #{user.wd2} WS #{user.wd3} WS1HR #{user.wd4}     
                    TEMP #{user.wd5} CHILL #{user.wd6} ALT #{user.wd7} 
                    HUM #{user.wd8} PRESS #{user.wd9} SOIL #{user.wd10} 


  meta(http-equiv='refresh', content='5') 

Answer 1

您的代码中有很多问题，看看什么对我有用，然后我会检查问题列表:

extends layout
doctype html
html(lang='en')
  head
    script(language='javascript',type='text/javascript',src='jquery.min.js')
    script(language='javascript',type='text/javascript',src='jquery.jqplot.min.js')
    link(rel='stylesheet',type='text/css',href='jquery.jqplot.css')
  body
    script.
      $(document).ready(function(){
        var tp = [95,85,73,10,0,55,80,118,45,47,60,65,36,78,99];
        $.jqplot('chartdiv',  [[[0, 15],[10,78]],[[0, tp[0]],[1,tp[1]],[2,tp[2]],
        [3,tp[3]],[4,tp[4]],[5,tp[5]],[6,tp[6]],[7,tp[7]]]],
        { title:'Temperatures',
          axes:{xaxis:{label:'Time (seconds)', min:0, max:15, numberTicks:16}, 
          yaxis:{label:'Temperature (F)', min:0, max:120, numberTicks:13}},
          series:[{color:'#5FAB78'},{color:'#000077'}],
          legend:{show:true, labels:['Cats','Dogs']}
         });
      });
  block content
    div(id='chartdiv',style='height:400px;width:700px;')
    h1.
      User List
    ul
      each user, i in userlist.reverse()
        li
            <p> TIME #{user.wd1} WD #{user.wd2} WS #{user.wd3} WS1HR #{user.wd4}     
                TEMP #{user.wd5} CHILL #{user.wd6} ALT #{user.wd7} 
                HUM #{user.wd8} PRESS #{user.wd9} SOIL #{user.wd10} 

  meta(http-equiv='refresh', content='5') 

1. 您错过了 doctype 中的 p
2. 图表的 div 位于 body 标记上方。
3. 您的脚本错误，您错过了以 $(document).ready(function(){ 开头，然后以另一个 }) 结尾；

使用上面的代码，如果您正确嵌入了 *.js 和 *.css，则应该显示您的图表!