我正在尝试做一个仪表板,以使用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/