私はPython/Djangoを使い始めています。Chartitライブラリを使ってグラフを作成しようとしています。Django-Chartitを使ったハイチャート。グラフの行がウィンドウのサイズ変更なしで表示されない、または要素の検査
単純な行と縦棒グラフでプロジェクトをセットアップするには、の指示に従っています。グラフ上にカーソルを置くと値が表示されます。
ただし、以下のスクリーンショットに示すように、行または列自体は表示されません。
後、私はこれらのチャートのための場所を持っているコードです。
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開発を経験していないよ、とすべてが順序であるように思われます。ラインがなぜ表示されないのかについてはまだ失われています。
アップデート2
Thisリンクが問題をポイントにピンに私を導きました。 Highchartsのバグかもしれない。 誰もがdjangoで解決する方法を提案できますか?
<script>
$(window).resize();
</script>
または
<script>
document.getElementById('lcht').style.width = "100%";
</script>
または
<script>
$('#lcht').resize();
</script>
を追加
は、問題を解決しません。
私はそれがHigchartsのバグであること、とは思いません。 Highchartsのどのバージョンが使用されていますか?単純なJavaScriptの例でエラーを再現できますか? Highchartsライブラリの上に別の抽象レイヤーを使用する必要がありますか?どのようなメリットがありますか? – stpoa
Highcharts JS v2.1.7(2011-10-19) シンプルなJSの例で試してみませんでしたが、同じ問題があるスレッドがあります。 ラッパーを使用すると、Djangoテンプレート内から使用でき、JavaScriptは作成できません。 – PhoenixDev
これは古く、サポートされていないHighchartsのバージョンです。4.XX/5.XXにアップデートできますか? – stpoa