2016-11-05 8 views
0

플라스크를 통해 간단한 하이 차트를 렌더링하려고하는데 모든 것이 잘 작동하지만 x 축은 y 축에 표시되고 반대의 경우도 마찬가지입니다. 저는 X 축과 Y 축에서 몇 달을 보내고 싶습니다. 이것은 내가 얻는 것입니다 (그림 참조). 아무도 내가 뭘 잘못하고 있는지 알아? 여기 하이 차트의 축 (파이썬/플라스크)

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입니다 : app.py : 여기 enter image description here 내 코드입니다

<!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

I : 여기

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

그리고 나의 chart3.html입니다 대답을 찾았습니다. 차트 유형은 bar 대신 column이어야합니다.

차트 = { "renderTo": chartID, "유형"'열', "높이": 450} 같은 문제에 어려움을 겪고 모두를 위해 , 여기에 코드입니다