1

我似乎无法使用 flaskr 和 jinja2 获得 highcharts 的工作演示。打开页面时出现这三个错误。我打算使用 javascript 调用我的 python 代码将提供的 json 对象来呈现图表。

Uncaught TypeError: undefined is not a function highstock.js:287
Uncaught TypeError: Cannot read property 'prototype' of undefined exporting.js:9
Uncaught TypeError: Object [object Object] has no method 'highcharts' 127.0.0.1:32

这是我呈现模板的python代码

@app.route('/')
def route():
    return render_template('login.html')

我将 highcharts 和 jquery 的脚本 src 放在 layout.html 中的一个块中，并且应该在 login.html 中创建图表的函数。

这是layout.html

<title>Flaskr</title>
{% block head %}
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{% endblock %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>

</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>

这是我正在尝试呈现代码的 login.html

{% extends "layout.html" %}
{% block body %}
<h2>Login</h2>
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
<form action="" method=post>
<dl>
  <dt>Username:
  <dd><input type=text name=username>
  <dt>Password:
  <dd><input type=password name=password>
  <dd><input type=submit value=Login>
</dl>
</form>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) {

    // create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 2
        },

        title : {
            text : 'AAPL Stock Price'
        },

        series : [{
            type : 'ohlc',
            name : 'AAPL Stock Price',
            data : data,
            dataGrouping : {
                units : [[
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month', 
                    [1, 2, 3, 4, 6]
                ]]
            }
        }]
    });
});
});
</script>
<div id="container" style="height: 500px; min-width: 500px"></div>
{% endblock %}

我究竟做错了什么？另外我该如何解决这个问题以获得一个工作演示？

4

1 回答 1

4

首先加载 jQuery，然后是 Highstock，参见：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
于 2013-03-25T11:09:06.193 回答