2017-04-13 3 views
0

私はPython/Djangoを使い始めています。Chartitライブラリを使ってグラフを作成しようとしています。Django-Chartitを使ったハイチャート。グラフの行がウィンドウのサイズ変更なしで表示されない、または要素の検査

単純な行と縦棒グラフでプロジェクトをセットアップするには、の指示に従っています。グラフ上にカーソルを置くと値が表示されます。

ただし、以下のスクリーンショットに示すように、行または列自体は表示されません。

Line Chart

後、私はこれらのチャートのための場所を持っているコードです。

MODEL:

class MonthlyWeatherByCity(models.Model): 
    def __str__(self): 
     return str(self.month) + "(H: " + str(self.houston_temp) + ", B: " + 
str(self.boston_temp) + ")" 

    month = models.IntegerField() 
    boston_temp = models.DecimalField(max_digits=5, decimal_places=1) 
    houston_temp = models.DecimalField(max_digits=5, decimal_places=1) 

VIEW:

def weather_chart_view(request): 
    #Step 1: Create a DataPool with the data we want to retrieve. 
    weatherdata = \ 
     DataPool(
      series= 
      [{'options': { 
       'source': MonthlyWeatherByCity.objects.all()}, 
       'terms': [ 
       'month', 
       'houston_temp', 
       'boston_temp']} 
      ]) 

    #Step 2: Create the Chart object 
    lcht = Chart(
      datasource = weatherdata, 
      series_options = 
       [{'options':{ 
        'type': 'line', 
        'stacking': False}, 
       'terms':{ 
        'month': [ 
        'boston_temp', 
        'houston_temp'] 
        }}], 
      chart_options = 
       {'title': { 
        'text': 'Weather Data of Boston and Houston'}, 
       'xAxis': { 
        'title': { 
         'text': 'Month'}}, 
       'yAxis': { 
        'title': { 
         'text': 'Temperature'}} 
       }) 

    pcht = Chart(
      datasource = weatherdata, 
      series_options = 
       [{'options':{ 
        'type': 'pie', 
        'stacking': False}, 
       'terms':{ 
        'month': [ 
        'boston_temp', 
        'houston_temp'] 
        }}], 
      chart_options = 
       {'title': { 
        'text': 'Weather Data of Boston and Houston'}, 
       'xAxis': { 
        'title': { 
         'text': 'Month'}}, 
       'yAxis': { 
        'title': { 
         'text': 'Temperature'}} 
       })  
    #Step 3: Send the chart object to the template. 
    return render_to_response('polls/template.html', {'weatherCharts': [lcht, pcht]}) 

TEMPLATE:

<head> 
    <meta charset="UTF-8"> 
    <title>Results: Question {{ question.id }}</title> 

    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type ="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="/static/js/highcharts.js"></script> 

    {% load chartit %} 
    {{ weatherCharts|load_charts:"lcht, pcht" }} 
</head> 
<body> 
<div id='lcht'> Chart will be rendered here </div> 
<div id='pcht'> Chart will be rendered here </div> 
</body> 
</html> 

私が間違ってやっているんアイデア、と誰かができればそれは素晴らしいことです正しい方向に私を向ける。

P.S.私は非常に(以下の画像を参照してください)まだ1

デバッグが私にロードされているデータを示し

更新:)学習、Web開発を経験していないよ、とすべてが順序であるように思われます。ラインがなぜ表示されないのかについてはまだ失われています。 Source

アップデート2

Thisリンクが問題をポイントにピンに私を導きました。 Highchartsのバグかもしれない。 誰もがdjangoで解決する方法を提案できますか?

<script> 
    $(window).resize(); 
</script> 

または

<script> 
    document.getElementById('lcht').style.width = "100%"; 
</script> 

または

<script> 
    $('#lcht').resize(); 
</script> 

を追加

は、問題を解決しません。

+0

私はそれがHigchartsのバグであること、とは思いません。 Highchartsのどのバージョンが使用されていますか?単純なJavaScriptの例でエラーを再現できますか? Highchartsライブラリの上に別の抽象レイヤーを使用する必要がありますか?どのようなメリットがありますか? – stpoa

+0

Highcharts JS v2.1.7(2011-10-19) シンプルなJSの例で試してみませんでしたが、同じ問題があるスレッドがあります。 ラッパーを使用すると、Djangoテンプレート内から使用でき、JavaScriptは作成できません。 – PhoenixDev

+0

これは古く、サポートされていないHighchartsのバージョンです。4.XX/5.XXにアップデートできますか? – stpoa

答えて

0

「あまりにも繊細な」解決策hereは、最終的に私のために解決したものです。

私は私のテンプレートに以下を追加しました:

<script> 
    setTimeout(function() {$(window).resize();}, 0); 
</script> 
関連する問題