1、
在flask-bootstrap的base.html模板中加載highstock.js
以下是base.html的源碼中，調用js文件的例子。
文件路徑：
python2.7/site-packages/flask_bootstrap/templates/bootstrap/base.html
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
在例子中，使用了
bootstrap_find_resource(filename,cdn)這個函數調用了js文件，顯然在flask-bootstrap我們也需要這樣做。
<script src="{{bootstrap_find_resource('highstock.js', cdn='highstock')}}"></script>
不過單純的使用以上的格式調用，你會發現沒有什么卵用。
2、
真正的調用.js文件的方法。
如果想要真正的調用.js文件，我們需要知道bootstrap_find_resource(filename,cdn)這個函數的來源。
根據flask框架的原理，一般這種函數應該存在與這個flask-bootstrap模板的__init__.py文件中，那我們
去查看這個文件。
pwd：python2.7/site-packages/flask_bootstrap/__init__.py
首先我們需要備份__init__.py文件。以免你的修改造成了無法挽回的問題，這是一個運維人員的必要素質。
通過閱讀源代碼，我們關注到了以下幾個函數或者內容：
a、
調用js的模板變量：
JQUERY_VERSION = '1.12.4'
HTML5SHIV_VERSION = '3.7.3'
RESPONDJS_VERSION = '1.4.2'
b、
bootstrap_find_resource(filename, cdn, use_minified=None, local=True):
這個函數中的use_minified參數，我們調用的highstock模板沒有mini版本。
這點需要注意。
c、
def lwrap(cdn, primary=static)
jquery = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
JQUERY_VERSION), local)
這兩個例子是js模板連接的拼接函數以及實例，我們也需要根據他的格式造出highstock.js的鏈接變量。
d、
app.extensions['bootstrap'] = {
'cdns': {
'local': local,
'static': static,
'bootstrap': bootstrap,
'jquery': jquery,
'html5shiv': html5shiv,
'respond.js': respondjs,
這個字典對應了js模板的名稱，在添加的時候也需要注意。
3、
修改源碼關鍵部分：
__init__.py
HIGHSTOCK_VERSION = '4.2.6'
app.config.setdefault('BOOTSTRAP_USE_MINIFIED', False)
highstock = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/highstock/%s/' %
HIGHSTOCK_VERSION))
app.extensions['bootstrap'] = {
'cdns': {
'highstock': highstock,
base.html
<script src="{{bootstrap_find_resource('highstock.js', cdn='highstock')}}"></script>
4、
最后的障礙
ok，我們以為經過這樣的處理，一切就沒有問題了，但是我們還是太年輕了。
查看頁面，審查元素，我們的頁面報了這樣一個問題：
Uncaught ReferenceError: $ is not defined (anonymous function)
經過我們睿智的思考（各種baidu）
我們得到的結論是：
jquery加載順序或者位置錯誤。
看到這我們再檢查base.html恍然大悟，我們的js的加載位置是在js代碼的后邊，
導致這種未定義的問題出現。那么解決辦法就是，將
base.html模板調用js的位置提前到<head>中，這就完美的解決了我們的問題。
5、成功的喜悅與界面
很明顯，highstock的表格已經完美的與flask-bootstrap結合到了一起。