Chart.jsのグラフが全て表示できるようにしたいです。

Chart.jsのグラフが全て表示させる方法を教えてください。

python
1from flask import Flask, render_template
2import pandas as pd
3import pandas_datareader.data as web
4
5app = Flask(__name__)
6
7@app.route("/")
8@app.route("/index")
9def index():
10    return render_template("index.html")
11
12start="1900/1/1"
13WILL5000INDFC = pd.DataFrame()#Wilshire5000
14WILL5000INDFC = web.DataReader("WILL5000INDFC", 'fred',start)
15WILL5000INDFC = WILL5000INDFC["WILL5000INDFC"]
16
17
18lists ={"WILL5000INDFC":WILL5000INDFC}
19
20print(WILL5000INDFC.tail())
21@app.route("/company/<name>")
22def company(name):
23    l = lists.get(name, '不明')
24    return render_template('company.html', lists=l)
25
26if __name__ == "__main__":
27    app.run(debug=True)

html
1<html lang="ja">
2<head>
3	<meta charset="UTF-8">
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
5
6</head>
7
8<body>
9{% for date in lists.index %}
10{{date.strftime('%Y/%m/%d')}}
11{% endfor %}
12<div class="chart_container" style="position: relative; height:70vh; width:80vw">
13<canvas id="stage"></canvas>
14</div>
15<script type="text/javascript">
16//「月別データ」
17var mydata = {
18  labels: [{% for date in lists.index %}
19          "{{date.strftime('%Y/%m/%d')}}",
20          {% endfor %}],
21    datasets:[{
22            label:"Sample",
23            backgroundColor: "rgba(128,128,128,1)",
24            data : [{% for lists in lists.dropna() %}
25                          {{lists}},
26                        {% endfor %}]
27    }
28  ]
29};
30
31//「オプション設定」
32
33var canvas = document.getElementById('stage');
34var chart = new Chart(canvas, {
35  type: 'bar',  //グラフの種類
36  data: mydata  //表示するデータ
37});
38</script>
39
40</body>
41<html>

値が入っているはずなのですが2009年から表示されなくなってしまいます。
データが大きすぎるという事でしょうか？
わかる方教えてくださいよろしくお願いいたします。

kyoya0819

2020/03/01 09:15

一回データを表示させてみてください。

行動規範の内容に同意します

回答1件

html側でdropnaをしているため，Nanの分左にデータずれています．
例えば，以下のようにすれば正しく表示できます．

python
1def company(name):
2    l = lists.get(name, '不明')
3    return render_template('company.html', lists=l.fillna(0))

html
1            data : [{% for lists in lists %}
2                          {{lists}},
3                        {% endfor %}]

投稿2020/12/11 18:20

TakeSeijin

総合スコア2

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Chart.jsのグラフが全て表示できるようにしたいです。

関連した質問