Django+Hightcharts搭建数据可视化网站讲些东西大一暑假的时候（离现在很久了），在一家教育机构做兼职，然

讲些东西

大一暑假的时候（离现在很久了），在一家教育机构做兼职，然后发现那家机构利用学生的个人数据（每次小测的数据）进行可视化分析，返回将结果反馈给家长。当时就觉得数据可视化好像还挺有意思的，还想着自己也做一个玩玩，不过那个时候很多东西都不懂，根本无法实现。

但是我又比较执着，觉得我可以做数据可视化，之后花了一段时间摸爬滚打，最后在大三时做了一个超级无敌简单，没有什么特别功能的数据可视化网站...基本的实现了能看到可视化的图。当然这个我只是写着玩的，和机构那种可视化网站没法比。

我这个是基于招聘信息的数据可视化，都快要毕业的人了，看点招聘信息焦虑焦虑

项目传送门

结果展示

招聘信息概览

这个页面支持搜索和分页

企业相关的

词云

薪资情况

学历情况

后台

后台是Django自带的，只不过是换了个皮。

登录界面

管理界面

运行环境

python3.8

使用方式

新建一个数据库，数据库名设置为recruitinfo, 用户名密码均为：Recruitinfo，然后将项目中sql文件导入数据库中
配置settings文件，下文有具体步骤
在目录下新建一个static文件，把boostsrap文件放进去
数据迁移,在终端输入一下两条命令： python manage.py makemigrations python manage.py migrate
创建你自己的超级用户，命令如下： python manage.py createsuperuser
最后运行就ok了，命令如下： python manage.py runserver

项目详情

目录结构

│  .gitignore
│  manage.py
│  pip.ini
│  README.md
│  requirements.txt
│
├─analyse
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  views.py
|
├─recruit
│  │  settings.py
│  │  urls.py
│  │  wsgi.py
│  │  __init__.py
│  │
└─templates
    │  base.html
    │
    └─recruit
            Company.html
            Degree.html
            index.html
            learning.html
            resource.html
            result.html
            Salary.html
            table.html
            Welfare.html

数据模型设计

配置settings

在项目中，settings.py我没有传上去，所以要配置几处地方路径：recruit/recruit/settings.py

配置INSTALLED_APPS

# 以下是额外增加的，其他不需要动
INSTALLED_APPS = [
    'simpleui', 
    'analyse.apps.AnalyseConfig',
    'pure_pagination',
]

简单解释一下:

simpleui

它是一个美化后台的插件，需要安装后才能使用，安装命令如下：

pip install django-simpleui

analyse.apps.AnalyseConfig

本项目所创建的子应用

pure_pagination

这是一个分页插件，也是需要安装才能使用，安装命令如下：

pip install django-pure-pagination

分页配置

# django-pure-pagination 分页设置
PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 4,  # 分页条当前页前后应该显示的总页数（两边均匀分布，因此要设置为偶数）
    'MARGIN_PAGES_DISPLAYED': 2,  # 分页条开头和结尾显示的页数
    'SHOW_FIRST_PAGE_WHEN_INVALID': True,  # 当请求了不存在页，显示第一页
}

配置DATABASES

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'recruitinfo',
        'HOST': '127.0.0.1',
        'PORT':'3306',
        'USER':'RecruitInfo',
        'PASSWORD':'RecruitInfo'
    }
}

路由

文件路径： recruit/analyse/urls.py

urlpatterns = [
    path('', IndexView.as_view(), name='index'), 
    path('tables/', TableView.as_view(), name='tables'), 
    path('chart/company/', views.company, name='company'),
    path('wordCloud/welfare/', views.welfare, name='welfare'), 
    path('basic/salary/', views.salary, name='salary'), 
    path('basic/degree/', views.degree, name='degree'), 
    path('search/table/', views.search, name='search'), 
    path('learning', LearningRecommendView.as_view(), name='learning'), 
    path('resource/', LearningView.as_view(), name='resource'), 
]

其中包括9个url

/ : 首页
/tables/ :招聘信息概览页面
/chart/company/ :招聘公司的页面
/wordCloud/welfare/ :词云页面
/basic/salary/ :薪资数据相关页面
/basic/degree/ :招聘学历数据相关页面
/search/table/ :搜索页面
/learning/ :导航页面
/resource/ :课程推荐页面

视图

文件路径：recruit/analyse/views.py 这里只简单的讲一下分页的使用方法，代码如下：

class TableView(PaginationMixin, ListView):
    model = Recruit
    template_name = 'recruit/table.html'
    context_object_name = 'recruit_list'
    paginate_by = 15

model = Recruit

指定数据模型为 Recruit
template_name = 'recruit/table.html'

指定模板位置
context_object_name = 'recruit_list'

模板变量
paginate_by = 15

设置一页展示15条数据

视图设置好之后，就需要到指定模板中使用，代码如下：

<!-- 文件路径： recruit/templates/recruit/table.html -->
<!-- 分页-->
          <nav class="pag" aria-label="..." >

           <ul class="pagination justify-content-center">

                    {% if page_obj.has_previous %}
                        <li class="page-item disabled">
                        <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number.querystring }}" >Previous</a>
                        </li>


                    {% endif %}

                    {% for page in page_obj.pages %}
                        {% if page %}
                            {% ifequal page page_object.number %}
                               <li class="page-item active" aria-current="page">
                                <a class="page-link" href="#">{{ page }}</a>
                               </li>
                            {% else %}

                               <li class="page-item"><a class="page-link" href="?{{ page.querystring }}">{{ page }}</a></li>
                            {% endifequal %}
                        {% else %}
                        ...
                        {% endif %}
                    {% endfor %}


                    {% if page_obj.has_next %}
                        <li class="page-item">
                      <a class="page-link" href="?{{ page_obj.next_page_number.querystring }}">Next</a>
                    </li>
                    {% else %}

                    {% endif %}

           </ul>
         </nav>

免责声明

本网站使用的数据仅用于研究和学习用途，不得用于任何商业用途。使用者如将数据应用于商业用途，则由使用者自行衡量其合法性，并承担相关的法律责任。

Django+Hightcharts搭建数据可视化网站