djangoでchartjs - tetsuyaf1100/hello-world GitHub Wiki

class Country(models.Model):
    name = models.CharField(max_length=30)

class City(models.Model):
    name = models.CharField(max_length=30)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)
    population = models.PositiveIntegerField()

python manage.py makemigrations polls
python manage.py migrat

1,Brazil
2,Turkey
3,Italy
4,Bangladesh
5,Canada
6,France
7,Peru
8,Argentina
9,Nigeria
10,Australia
11,Iran
12,Singapore
13,China
14,Chile
15,Thailand
16,Germany
17,Spain
18,Philippines
19,Indonesia
20,United States
21,South Korea
22,Pakistan
23,Angola
24,Mexico
25,India
26,United Kingdom
27,Colombia
28,Japan
29,Taiwan

1,Tokyo,36923000,28
2,Shanghai,34000000,13
3,Jakarta,30000000,19
4,Seoul,25514000,21
5,Guangzhou,25000000,13
6,Beijing,24900000,13
7,Karachi,24300000,22
8,Shenzhen,23300000,13
9,Delhi,21753486,25
10,MexicoCity,21339781,24
11,Lagos,21000000,9
12,SãoPaulo,20935204,1
13,Mumbai,20748395,25
14,NewYorkCity,20092883,20
15,Osaka,19342000,28
16,Wuhan,19000000,13
17,Chengdu,18100000,13
18,Dhaka,17151925,4
19,Chongqing,17000000,13
20,Tianjin,15400000,13
21,Kolkata,14617882,25
22,Tehran,14595904,11
23,Istanbul,14377018,2
24,London,14031830,26
25,Hangzhou,13400000,13
26,LosAngeles,13262220,20
27,BuenosAires,13074000,8
28,Xi'an,12900000,13
29,Paris,12405426,6
30,Changzhou,12400000,13
31,Shantou,12000000,13
32,RiodeJaneiro,11973505,1
33,Manila,11855975,18
34,Nanjing,11700000,13
35,Rhine-Ruhr,11470000,16
36,Jinan,11000000,13
37,Bangalore,10576167,25
38,Harbin,10500000,13
39,Lima,9886647,7
40,Zhengzhou,9700000,13
41,Qingdao,9600000,13
42,Chicago,9554598,20
43,Nagoya,9107000,28
44,Chennai,8917749,25
45,Bangkok,8305218,15
46,Bogotá,7878783,27
47,Hyderabad,7749334,25
48,Shenyang,7700000,13
49,Wenzhou,7600000,13
50,Nanchang,7400000,13
51,HongKong,7298600,13
52,Taipei,7045488,29
53,Dallas–FortWorth,6954330,20
54,Santiago,6683852,14
55,Luanda,6542944,23
56,Houston,6490180,20
57,Madrid,6378297,17
58,Ahmedabad,6352254,25
59,Toronto,6055724,5
60,Philadelphia,6051170,20
61,WashingtonD.C.,6033737,20
62,Miami,5929819,20
63,BeloHorizonte,5767414,1
64,Atlanta,5614323,20
65,Singapore,5535000,12
66,Barcelona,5445616,17
67,Munich,5203738,16
68,Stuttgart,5200000,16
69,Ankara,5150072,2
70,Hamburg,5100000,16
71,Pune,5049968,25
72,Berlin,5005216,16
73,Guadalajara,4796050,24
74,Boston,4732161,20
75,Sydney,5000500,10
76,SanFrancisco,4594060,20
77,Surat,4585367,25
78,Phoenix,4489109,20
79,Monterrey,4477614,24
80,InlandEmpire,4441890,20
81,Rome,4321244,3
82,Detroit,4296611,20
83,Milan,4267946,3
84,Melbourne,4650000,10

mydb2=# \copy polls_country from ./countries.csv with csv
COPY 29

mydb2=# \copy polls_city from ./cities.csv with csv;
COPY 84

mydb2=# select setval('polls_city_id_seq', 84);
 setval 
--------
     84
(1 row)

mydb2=# select setval('polls_country_id_seq', 29);
 setval 
--------
     29
(1 row)

from django.shortcuts import render
from mysite.core.models import City

def pie_chart(request):
    labels = []
    data = []

    queryset = City.objects.order_by('-population')[:5]
    for city in queryset:
        labels.append(city.name)
        data.append(city.population)

    return render(request, 'pie_chart.html', {
        'labels': labels,
        'data': data,
    })

from django.urls import path
from mysite.core import views

urlpatterns = [
    path('pie-chart/', polls/views.pie_chart, name='pie-chart'),
]

{% extends 'base.html' %}

{% block content %}
  <div id="container" style="width: 75%;">
    <canvas id="pie-chart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
  <script>

    var config = {
      type: 'pie',
      data: {
        datasets: [{
          data: {{ data|safe }},
          backgroundColor: [
            '#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3'
          ],
          label: 'Population'
        }],
        labels: {{ labels|safe }}
      },
      options: {
        responsive: true
      }
    };

    window.onload = function() {
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };

  </script>

{% endblock %}

<!DOCTYPE html>
<html>

<head>
  <title>DjangoBrosMemo</title>
</head>

<body>
  <h1>DjangoBrosMemo</h1>

  <div class="container">
    {% block content %}{% endblock %}
  </div>
</body>
</html>