我正在尝试做一个仪表板,以使用mongodb从数据库服务器打印一些数据。好吧,我在Flask和Highcharts中使用python,在~/proyecto/中,这是我的python代码:

from flask import Flask
from flask import render_template
from pymongo import MongoClient
import json
from bson import json_util
from bson.json_util import dumps

app = Flask(__name__)

@app.route("/")
def index():
 return render_template("index.html")

 @app.route("/dashboard")

def donorschoose_projects():
count = 1
connection = MongoClient('ip:port')
collection = connection.correos.observations
data = []
for project in collection.find({},{"data":1}):
    count += 1
    if count > 20: break
    data.append(project["data"]["data1"])
connection.close()

chart = {"renderTo": "chart_ID", "type": "bare", "height": 350}
series = [{"name": 'data1', "data": data}] # I also tried with [1,2,3]
title = {"text": 'Intento dashboard 1'}
xAxis = {"categories": ['Medidas']}
yAxis = {"title": {"text": 'PPM'}}
return render_template('index.html', chartID="chart_ID", chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis)

if __name__ == "__main__":
app.run(host='0.0.0.0',port=port,debug=True)


我的~/proyecto/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    {% block head %}
        <title>{% block title %} Title!{% endblock %}</title>
    {% endblock %}
</head>

<body>
    <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div>
    <script>
        var chart_id = {{ chartID|safe }}
        var series = {{ series|safe }}
        var title = {{ title|safe }}
        var xAxis = {{ xAxis|safe }}
        var yAxis = {{ yAxis|safe }}
        var chart = {{ chart|safe }}
    </script>
        <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 src="/../static/js/main.js"></script>
</body>
</html>


还有我的~/proyecto/static/js/main.js

$(document).ready(function() {
    $(chart_id).highcharts({
        chart: chart,
        title: title,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series
    });
});


我做错了什么???
资料来源:https://gist.github.com/vgoklani/5347161

最佳答案

刚刚修改裸露吧,它的工作原理!

关于javascript - Highcharts中的空白页,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30266324/

10-09 16:48