django+Highcharts.js可视化数据的一个小例子

参考资料

文章1 https://simpleisbetterthancomplex.com/tutorial/2018/04/03/how-to-integrate-highcharts-js-with-django.html
文章2：csv文件读入数据库 https://abhishekchhibber.com/django-importing-a-csv-file-to-database-models/
b站视频1 https://www.bilibili.com/video/BV1c4411X7hp/?spm_id_from=333.788.videocard.3
b站视频2 https://www.bilibili.com/video/BV147411x7Wj?from=search&seid=5982157302671432985

我的django版本是2.2，python版本是3.6.3

步骤

新建project和app

代码语言：javascript复制

django-admin startproject highcharts
cd highcharts
python manage.py startapp clusterbar

使用pycharm打开highcharts文件夹

在clusterbar/models.py文件里添加代码

代码语言：javascript复制

class PopulationByRegion(models.Model):
    region = models.CharField(max_length=50)
    pp1800 = models.IntegerField()
    pp1900 = models.IntegerField()
    pp2012 = models.IntegerField()

配置路由

highcharts/urls.py文件代码

代码语言：javascript复制

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('clusterbar/',include('clusterbar.urls')),
]

在clusterbar文件夹下新建urls.py文件，写入代码

代码语言：javascript复制

from django.urls import path
from . import views

urlpatterns = [
    path('popbyregion/',views.popbyregion,name="popbyregion"),
]

编写视图函数

在clusterbar的views.py文件中写入代码

代码语言：javascript复制

from django.shortcuts import render
from .models import PopulationByRegion

# Create your views here.

def popbyregion(request):
    df = PopulationByRegion.objects.all()
    region = []
    pp1800 = []
    pp1900 = []
    pp2012 = []
    for info in df:
        region.append(info.region)
        pp1800.append(info.pp1800)
        pp1900.append(info.pp1900)
        pp2012.append(info.pp2012)

    context = {'region':region,'pp1800':pp1800,'pp1900':pp1900,'pp2012':pp2012}
    return render(request,'popbyregion.html',context=context)

配置模板

在highcharts文件夹下新建templates文件夹，在templates文件夹下新建popbyregion.html文件并写入代码

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Highcharts Example</title>
</head>
<body>
  <div id="container"></div>
  <script src="https://code.highcharts.com/highcharts.src.js"></script>
  <script>
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        xAxis: {
            categories: {{ region | safe }}
        },
        series: [{
            name: 'Year 1800',
            data: {{ pp1800 }}
        }, {
            name: 'Year 1900',
            data: {{ pp1900 }}
        }, {
            name: 'Year 2012',
            data: {{ pp2012 }}
        }]
    });
  </script>
</body>
</html>

修改配置文件

注册app

添加模板路径

迁移数据库

代码语言：javascript复制

python manage.py makemigrations
python manage migrate

给数据库中添加数据

代码语言：javascript复制

python manage.py shell
import csv
from clusterbar.models import PopulationByRegion

with open('example.csv') as csvfile:
    reader = csv.DictReader(csvfile)
    for row in reader:
        p = PopulationByRegion(region=rwo['continent'],
                               pp1800=int(row["year_1800"]),
                               pp1900=int(row['year_1900']),
                               pp2012=int(row['year_2012']))
        p.save()
quit()

创建管理员，登录后台查看数据

代码语言：javascript复制

python manage.py createsuperuser

依次输入用户名、邮箱密码注册数据在clusterbar文件夹下的admin.py中添加代码

代码语言：javascript复制

from django.contrib import admin
from .models import PopulationByRegion
# Register your models here.

admin.site.register(PopulationByRegion)

启动服务器可以看到数据已经添加过来了

安装django-simpleui美化后台界面

https://github.com/sea-team/simpleui#开始使用

按照以上链接进行配置后台变成了这样

输入链接http://127.0.0.1:8000/clusterbar/popbyregion/

可以看到结果

过程中我遇到了一个报错

django.core.exceptions.ImproperlyConfigured: The included URLconf '<module 'clusterbar.urls' from 'C:UsersmingyDesktopPythonDjango_Practicehighchartsclusterbarurls.py'>' does not appear to have any patterns in it. If you see valid patterns in the file then the issue is probably caused by a circular import.

是因为我将新建的urls.py文件中的urlpatterns写成了urlpattern

python highcharts https 网络安全 django

0 人点赞