2016-05-15 135 views
1

我正在試用highcharts使用燒瓶。我創建了兩個例子。比較簡單的一種是如下:Html沒有渲染圖表

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> Title!</title> 
    </head> 
    <body> 
     <div id="chart" style="height: 100px; width: 500px"></div> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("#chart").highcharts({ 
      chart: {'renderTo': 'chart', 'type': 'line', 'height': 350}, 
      title: {'text': 'My Title'}, 
      xAxis: {'categories': ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}, 
      yAxis: {'title': {'text': 'yAxis Label'}}, 
      series: [{'data': [1, 2, 3], 'name': 'Label1'}] 
      }); 
      }); 


     </script> 
    </body> 
</html> 

第二個,這是比較複雜的,如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script type=text/javascript src="/static/js/jquery.js"></script> 
    <script src="/static/js/bootstrap.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8"> 

<link href="/static/css/view_doc.css" rel="stylesheet" media="screen"> 
<script src="/static/js/popover.js"></script> 
<script src="/static/js/tooltip.js"></script> 
<script src="/static/js/view_doc.js"></script> 
<script src="/static/js/plotly-latest.min.js"></script> 


</head> 

<body> 
<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/">Copy Cats</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/about">About Us</a></li> 
      <li><a href="/select_doc">Detect Plag!</a></li> 
      <li><a href="/select_folder">Bulk Analysis!</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 





         <br/> 



         </p> 
        </div> 

       </div> 
       <!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>--> 
       <br> 
       <div id='chart' style="height: 100px; width: 500px"></div> 
       </br> 
      </div> 

      <div class="col-md-3"> 
       <div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400" 
        data-offset-bottom="200"> 
        <div class="panel-heading"> 
         Passage Details 
        </div> 
        <div class="panel-body" id="feature_box" style="font-size:12px"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script> 
    $(document).ready(function() { 
       $('#chart').highcharts({ 
     chart: {'renderTo': 'chart', 'type': 'line', 'height': 350}, 
     title: {'text': 'My Title'}, 
     xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']}, 
     yAxis: {'title': {'text': 'yAxis Label'}}, 
     series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': u'coleman_liau_index'}] 
    }); 
}); 
</script> 



</body> 
</html> 

第一個按預期工作,第二個沒有。有人可以告訴我爲什麼嗎?

+0

您應該縮寫段落文本(段落),刪除不必要的空行,並縮進您的JS的可讀性 – mgmcdermott

+1

''和''您包含JQUERY兩次 –

回答

2

查找下面被你給

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script type=text/javascript src="/static/js/jquery.js"></script> 
    <script src="/static/js/bootstrap.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8"> 

<link href="/static/css/view_doc.css" rel="stylesheet" media="screen"> 
<script src="/static/js/popover.js"></script> 
<script src="/static/js/tooltip.js"></script> 
<script src="/static/js/view_doc.js"></script> 
<script src="/static/js/plotly-latest.min.js"></script> 


</head> 

<body> 
<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/">Copy Cats</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/">Home</a></li> 
      <li><a href="/about">About Us</a></li> 
      <li><a href="/select_doc">Detect Plag!</a></li> 
      <li><a href="/select_folder">Bulk Analysis!</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 



<div class="container"> 
    <h1>Where's the plag?</h1> 
    <div class="jumbotron"> 
     <small> 
      <p>Atom Type: paragraph </p> 
      <p>Cluster Method: kmeans </p> 
      <p>k: 2 </p> 
     </small> 

     <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table"> 
      Hide/Show Table 
     </button> 

     <div class="row collapse in" id="full_table"> 
      <div class="col-md-9"> 
       <div class="table-responsive" style="font-size:12px;"> 
        <table class="table table-condensed table-scrollable table-bordered"> 
         <thead> 
         <tr> 
          <th>Start Index</th> 

          <th>coleman_liau_index</th> 

          <th>Plag. Conf.</th> 
          <th>Plag. Span</th> 
         </tr> 
         </thead> 
         <tbody> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 0</td> 

          <td class="passage_row"> -372.5000</td> 



          <td class="passage_row"> 0.0586</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 264</td> 

          <td class="passage_row"> -434.5500</td> 



          <td class="passage_row"> 0.0083</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 720</td> 

          <td class="passage_row"> -465.3300</td> 



          <td class="passage_row"> 0.0203</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 1470</td> 

          <td class="passage_row"> -334.2100</td> 



          <td class="passage_row"> 0.0848</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 1850</td> 

          <td class="passage_row"> -611.2200</td> 



          <td class="passage_row"> 0.1567</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 2057</td> 

          <td class="passage_row"> -1104.7500</td> 



          <td class="passage_row"> 0.6179</td> 



          <td class="passage_row"></td> 

         </tr> 

         <tr class="passage_starting_at_"> 
          <td class="passage_row"> 3189</td> 

          <td class="passage_row"> -1922.5900</td> 



          <td class="passage_row"> 0.7834</td> 



          <td class="passage_row"></td> 

         </tr> 

         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-md-9"> 

       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         rowling_and_dickens 
        </div> 
        <div class="panel-body" id="document_content"> 
         <p> 

         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;0, 262&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0586207920596&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-372.5000&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say 
that they were perfectly normal, thank you very much. They were the last 
people you'd expect to be involved in anything strange or mysterious, 
because they just didn't hold with such nonsense. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;264, 718&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0082820834237&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-434.5500&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          Mr. Dursley was the director of a firm called Grunnings, which made 
drills. He was a big, beefy man with hardly any neck, although he did 
have a very large mustache. Mrs. Dursley was thin and blonde and had 
nearly twice the usual amount of neck, which came in very useful as she 
spent so much of her time craning over garden fences, spying on the 
neighbors. The Dursleys had a small son called Dudley and in their 
opinion there was no finer boy anywhere. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;720, 1468&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0203418720353&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-465.3300&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          The Dursleys had everything they wanted, but they also had a secret, and 
their greatest fear was that somebody would discover it. They didn't 
think they could bear it if anyone found out about the Potters. Mrs. 
Potter was Mrs. Dursley's sister, but they hadn't met for several years; 
in fact, Mrs. Dursley pretended she didn't have a sister, because her 
sister and her good-for-nothing husband were as unDursleyish as it was 
possible to be. The Dursleys shuddered to think what the neighbors would 
say if the Potters arrived in the street. The Dursleys knew that the 
Potters had a small son, too, but they had never even seen him. This boy 
was another good reason for keeping the Potters away; they didn't want 
Dudley mixing with a child like that. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;1470, 1847&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0848471305357&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-334.2100&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story 
starts, there was nothing about the cloudy sky outside to suggest that 
strange and mysterious things would soon be happening all over the 
country. Mr. Dursley hummed as he picked out his most boring tie for 
work, and Mrs. Dursley gossiped away happily as she wrestled a screaming 
Dudley into his high chair. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;1850, 2055&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.156673905811&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-611.2200&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          My father's family name being Pirrip, and my Christian name Philip, my infant 
tongue could make of both names nothing longer or more explicit than Pip. So, I 
called myself Pip, and came to be called Pip. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;2057, 3187&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.617870345797&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-1104.7500&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          I give Pirrip as my father's family name, on the authority of his tombstone and my 
sister - Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or 
my mother, and never saw any likeness of either of them (for their days were long 
before the days of photographs), my first fancies regarding what they were like, 
were unreasonably derived from their tombstones. The shape of the letters on my 
father's, gave me an odd idea that he was a square, stout, dark man, with curly 
black hair. From the character and turn of the inscription, "Also Georgiana Wife of 
the Above," I drew a childish conclusion that my mother was freckled and sickly. To 
five little stone lozenges, each about a foot and a half long, which were arranged 
in a neat row beside their grave, and were sacred to the memory of five little 
brothers of mine - who gave up trying to get a living, exceedingly early in that 
universal struggle - I am indebted for a belief I religiously entertained that they 
had all been born on their backs with their hands in their trousers-pockets, and 
had never taken them out in this state of existence. 
         </div> 

         <br/> 



         <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;3189, 4158&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.78340505141&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;coleman_liau_index&lt;/p&gt;&lt;p&gt;-1922.5900&lt;/p&gt;&lt;hr size = &#34;10&#34;" style="font-size:14px;display:inline;"> 
          Ours was the marsh country, down by the river, within, as the river wound, twenty 
miles of the sea. My first most vivid and broad impression of the identity of 
things, seems to me to have been gained on a memorable raw afternoon towards 
evening. At such a time I found out for certain, that this bleak place overgrown 
with nettles was the churchyard; and that Philip Pirrip, late of this parish, and 
also Georgiana wife of the above, were dead and buried; and that Alexander, 
Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were 
also dead and buried; and that the dark flat wilderness beyond the churchyard, 
intersected with dykes and mounds and gates, with scattered cattle feeding on it, 
was the marshes; and that the low leaden line beyond, was the river; and that the 
distant savage lair from which the wind was rushing, was the sea; and that the 
small bundle of shivers growing afraid of it all and beginning to cry, was Pip. 

         </div> 

         <br/> 



         </p> 
        </div> 

       </div> 
       <!--<br><div id="myDiv" style="width: 1100px; height: 400px;"></div>--> 
       <br> 
       <div id='chart' style="height: 100px; width: 500px"></div> 
       </br> 
      </div> 

      <div class="col-md-3"> 
       <div class="panel panel-default" data-spy="affix" id="feature_panel" data-offset-top="400" 
        data-offset-bottom="200"> 
        <div class="panel-heading"> 
         Passage Details 
        </div> 
        <div class="panel-body" id="feature_box" style="font-size:12px"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script> 
    $(document).ready(function() { 
       $('#chart').highcharts({ 
     chart: {'renderTo': 'chart', 'type': 'line', 'height': 350}, 
     title: {'text': 'My Title'}, 
     xAxis: {'categories': ['0', '264', '720', '1470', '1850', '2057', '3189']}, 
     yAxis: {'title': {'text': 'yAxis Label'}}, 
     series: [{'data': [-372.5, -434.55, -465.33, -334.21, -611.22, -1104.75, -1922.59], 'name': 'u\'coleman_liau_index'}] 
    }); 
}); 
</script> 



</body> 
</html> 

錯誤相同例二的工作代碼上線329串圍是不妥當的,我已經加入轉義序列\'那邊。