Question

我正在尝试使用烧瓶的高级图表。我创建了两个例子。更简单的一个如下：

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

第一个按预期工作，第二个没有。谁能告诉我为什么？

Answer 1

查找下面您给出的相同示例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>

错误在第323行。字符串封闭不正确，我在那边添加了转义序列\'。

Html没有呈现图表

1 个答案: