2016-11-05 5 views
0

Flaskで簡単なハイチャートをレンダリングしようとしていて、すべて正常に動作しますが、y軸にx軸が表示されます。私はX軸とY軸上の温度で月をしたいです。これは私が得るものです(写真参照)。誰かが私が間違っていることを知っていますか?ここで enter image description here 私のコードです: app.py:ハイチャートの軸(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() 

は、ここに私のgraph.jsです:

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

そして、ここでは私の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> 

答えて

3

私は答えが見つかりました。グラフの種類はbarの代わりにcolumnでなければなりません。

チャート= { "renderTo":ChartIDに、 "タイプ":'列'、 "高さ":450}、同じ問題を苦労している皆のため は、ここでコードされ

関連する問題