Je suis en train de créer une application Flask, pour l'élément graphique que je souhaite utiliser Highcharts, j'ai réussi à afficher un graphique sur une page Web, mais dès que j'essaie d'afficher plusieurs graphiques, un seul
J'ai essayé un certain nombre de choses pour commencer, changer les noms de variables, vérifier ligne par ligne le code pour voir s'il y a un problème avec un graphique. Commenté un graphique puis l'autre pour s'assurer qu'ils fonctionnent tous les deux. Enfin, j'ai inspecté le script dans Chrome pour voir ce qui est renvoyé, tout semble bien.
Je pense que le problème est dans ma déclaration de variable dans mon élément de script. Si je le laisse comme chart_id pour les deux, je pense que le premier graphique est en cours d'écrasement, mais si je change le var en chart_id1 et chart_id2, aucun des graphiques ne retourne?
J'ai essayé d'étiqueter toutes les variables sous "div id = {{chart1ID | safe}} "comme chart1_id, series1 etc .... et toutes les variables sous" id = {{chart2ID | safe}} "comme 2. Lorsque j'inspecte le code dans Chrome, tout semble revenir correctement mais aucun graphique ne s'affiche.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500, chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
title1 = {"text": 'Chart 1 Title'}
xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis1 = {"title": {"text": 'yAxis Label'}}
chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
title2 = {"text": 'Second Chart Title'}
xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis2 = {"title": {"text": 'yAxis Label'}}
return render_template('index.html',
chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1,
chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)
if __name__ == "__main__":
app.run(debug = True)
HTML
..../templates/index.html
<body>
<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart1ID|safe }}
var series = {{ series1|safe }}
var title = {{ title1|safe }}
var xAxis = {{ xAxis1|safe }}
var yAxis = {{ yAxis1|safe }}
var chart = {{ chart1|safe }}
</script>
</div>
<br>
<P>***********************************************************************************</P>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart2ID|safe }}
var series = {{ series2|safe }}
var title = {{ title2|safe }}
var xAxis = {{ xAxis2|safe }}
var yAxis = {{ yAxis2|safe }}
var chart = {{ chart2|safe }}
</script>
</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 src="../static/main.js"></script>
</body>
Python
.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
chart1: chart1,
title1: title1,
xAxis1: xAxis1,
yAxis1: yAxis1,
series1: series1
})
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart2: chart2,
title2: title2,
xAxis2: xAxis2,
yAxis2: yAxis2,
series2: series2
})});
Je peux ' t voir le bois pour les arbres avec ça pour le moment, j'imagine que c'est quelque chose de basique que je surplombe. C'est tout le code avec lequel je travaille pour le moment, je l'ai supprimé d'une application plus grande pour le rendre plus clair lors de la publication de la question.
Merci
3 Réponses :
Dans votre premier bloc de code, vous fournissez des options de graphique aux highcharts comme chart1, title1 etc. Les Highcharts s'attendent à ce que ces options soient chart, title et cette structure doit être la même chose dans les deux graphiques (API: https://api.highcharts.com/highcharts/ ) :
..../templates/index.html
<body>
<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px"></div>
<br>
<P>***********************************************************************************</P>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; 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 src="../static/main.js"></script>
<script>
$(document).ready(function() {
var chart1_id = {{ chart1ID|safe }};
var chart2_id = {{ chart2ID|safe }};
$('#' + chart1_id).highcharts({
chart: {{ chart1|safe }},
title: {{ title1|safe }},
xAxis: {{ xAxis1|safe }},
yAxis: {{ yAxis1|safe }},
series: {{ series1|safe }}
});
$('#' + chart2_id).highcharts({
chart: {{ chart2|safe }},
title: {{ title2|safe }},
xAxis: {{ xAxis2|safe }},
yAxis: {{ yAxis2|safe }},
series: {{ series2|safe }}
});
});
</script>
</body>
Dans le code HTML, vous avez créé des variables globales js qui ont les mêmes noms aux deux endroits, c'est pourquoi les options du second graphique écraseront les premières. Une meilleure idée est peut-être de créer deux objets globaux avec des options de graphique (chartOptions1 et chartOptions2), puis d'utiliser ces objets pour initialiser les graphiques ou simplement d'utiliser des variables python pour initialiser le graphique dans l'objet graphique highcharts immédiatement:
HTML:
.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
chart: chart1,
title: title1,
xAxis: xAxis1,
yAxis: yAxis1,
series: series1
})
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart: chart2,
title: title2,
xAxis: xAxis2,
yAxis: yAxis2,
series: series2
})});
Merci pour la réponse @Wojciech mais cela ne fonctionne pas / j'ai toujours quelque chose qui ne va pas. Il n'y a pas d'erreurs, mais les graphiques ne s'afficheront pas, juste une page vierge?
La solution ci-dessus donne l'erreur suivante: Uncaught ReferenceError: chart_id n'est pas défini.
Je ne trouve pas chart_id dans le code que je vous envoie ci-dessus. Vous avez peut-être changé les noms des variables ici et laissé l'ancien nom chart_id quelque part. L'erreur devrait vous indiquer exactement où se situe le problème. Veuillez le corriger et vérifier à nouveau.
Il ne reconnaît pas chart1_id, il demande un chart_id. Ceci n'est mentionné nulle part dans le code.
Dans l'autre exemple fourni, j'obtiens la même réponse. Je change chart1_id en chart_id un graphique rendu. Je change ce nom de var en autre chose, erreur.
N'oubliez pas que ma réponse n'est qu'un conseil. Malheureusement, je n'ai aucune idée de l'apparence de l'ensemble de votre application et des raisons pour lesquelles cette erreur se produit.
Compris, pour le moment, ce qui précède est tout, car j'ai tout dépouillé. Je n'arrive pas à comprendre pourquoi, dès que je change le nom d'une variable (chart_id en chart1_id), les highcharts ne le reconnaissent pas. Si je ne change pas, je ne pourrai jamais renvoyer qu’un seul graphique.
Cette erreur n'est pas causée par Highcharts, mais par JS lui-même. Vous utilisez simplement une variable qui n'a jamais été déclarée. Malheureusement, je ne suis pas en mesure de vous dire où est l'erreur.
Tout ce dont vous avez besoin est de changer votre document HTML var en var series1, title1 etc. Mon code de travail:
HTML:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500,
chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
title1 = {"text": 'Chart 1 Title'}
xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis1 = {"title": {"text": 'yAxis Label'}}
chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
title2 = {"text": 'Second Chart Title'}
xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis2 = {"title": {"text": 'yAxis Label'}}
return render_template('index.html', chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1, chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)
if __name__ == "__main__":
app.run(debug = True, host='127.0.0.1', port=5000, passthrough_errors=True)
JavaScript:
$(document).ready(function() {
$(chart1_id).highcharts({
chart: chart1,
title: title1,
xAxis: xAxis1,
yAxis: yAxis1,
series: series1
});
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart: chart2,
title: title2,
xAxis: xAxis2,
yAxis: yAxis2,
series: series2
})});
Et Python :
<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={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 1000px"></div>
<script>
var chart1_id = {{ chart1ID|safe }}
var series1 = {{ series1|safe }}
var title1 = {{ title1|safe }}
var xAxis1 = {{ xAxis1|safe }}
var yAxis1 = {{ yAxis1|safe }}
var chart1 = {{ chart1|safe }}
</script>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 1000px">
<script>
var chart2_id = {{ chart2ID|safe }}
var series2 = {{ series2|safe }}
var title2 = {{ title2|safe }}
var xAxis2 = {{ xAxis2|safe }}
var yAxis2 = {{ yAxis2|safe }}
var chart2 = {{ chart2|safe }}
</script>
</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 src="../static/js/graph.js"></script>
</body>
Lorsque vous essayez de copier ce code Python, n'oubliez pas de formater les espaces avant les variables (par exemple, un onglet avant chaque variable - [tab] chart1 = {... } [tab] series1 = {...} etc).
Merci pour les commentaires, je viens de l'exécuter et cela renvoie une page vierge. Le script de la page html récupère les valeurs, je peux les voir quand je les inspecte, cependant, dans l'élément de console, il indique maintenant "Uncaught ReferenceError: chart_id is not defined"
Si je change var chart1_id en var chart_id et ainsi de suite pour cette section et que je réexécute, ce graphique s'affiche. var chart_id = {{chart1ID | safe}} var series = {{series1 | safe}} var title = {{title1 | safe}} var xAxis = {{xAxis1 | safe}} var yAxis = {{yAxis1 | safe}} var chart = {{chart1 | safe}} ..mais je ne peux pas faire cela pour les deux graphiques, je ne vois pas pour le moment comment afficher plusieurs car le seul nom de var qui fonctionne est chart_id ???
* MISE À JOUR * Je ne pouvais donc pas comprendre pourquoi cela ne fonctionnait pas. Cela a semblé trop simple pour ne pas fonctionner, avec deux bonnes réponses fournies ci-dessus.
J'ai supprimé le projet sur lequel je travaillais (construit dans PyCharm), puis j'ai reconstruit le projet et relancé. En utilisant l'exemple de Sebastian ci-dessus, j'ai pu afficher les deux graphiques sans problème. Je ne sais pas s'il y avait un problème de mise en cache, il y avait un espace de fin quelque part ou le projet était devenu corrompu. Mise à jour fournie à toute autre personne rencontrant ce problème.