2016-11-05 1 views
0

J'essaie de rendre un Highchart simple à travers Flask et tout fonctionne bien, mais il me montre l'axe des x sur l'axe des y et vice versa! Je veux avoir les mois sur l'axe X et la température sur l'axe Y. C'est ce que je reçois (voir photo). Est-ce que quelqu'un sait ce que je fais mal? enter image description here Voici mon code: app.py:Axes dans Highcharts (Python/Flask)

from flask import Flask, render_template 
app = Flask(__name__) 

@app.route("/chart3/") 
def chart_3(): 
    chartID = 'chart_ID' 
    chart = {"renderTo": chartID, "type": 'bar', "height": 450} 
    title = {"text": 'Average Monthly Temperature'} 
    xAxis = {"categories": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} 
    yAxis = {"labels": {"format": '{value}°C'}, "title": {"text": 'Temperature'}} 
    series = [ {"name": 'City', "data": [1,2,3,4,5,6,7,80,9,10,11]} ] 
    return render_template("chart3.html", chartID=chartID, chart=chart, title=title, xAxis=xAxis, yAxis=yAxis, series=series) 

if __name__ == "__main__": 
    app.run() 

Voici mes graph.js:

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

Et voici mon chart3.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"> 
    </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="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 
     <script src="https://code.highcharts.com/highcharts.js"></script> 
     <script src="../static/js/graph.js"></script> 
    </body> 
</html> 

Répondre

3

I trouvé la réponse. Le type de graphique doit être column au lieu de bar. Pour tous ceux qui se bat le même problème, voici le code:

diagramme = { "renderTo": ChartID, "type": 'colonne', "hauteur": 450}