备忘录

django+highcharts实现数据可视化

引言

  Django是Python的一个Web框架,网站或者是App都可以通过这个框架进行开发。它是一个MVC框架,某些细节上和Google的Angular比较类似,比如需要设置路由表进行跳转等等。但是Django其实属于一项上了年纪的技术,它的第一个版本早在2005年就已面世。

  因为他是Web框架,因此他和数据可视化挂钩的时候,自然就想到了非常熟悉highcharts图表技术,看似非常高大上,称为数据可视化,实则使用Django框架读取数据库数据绑定到前台显示罢了。

实现

安装

  网上各大教程网址例如菜鸟,w3cshool等等,对于这些Django的安装已经讲的很清楚了,基本没什么重复的必要菜鸟教程。我这里使用的是Python3.6和Django 1.10.6。

创建项目

选定一个你想要新建项目的文件夹,shift+右击,打开命令行窗口,输入以下命令创建项目:

django-admin startproject TestPro

盗用一下菜鸟的目录结构:

TestPro
|-- TestPro
|   |-- __init__.py
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
`-- manage.py

  其中的TestPro就是项目的名称。当然你要是使用的是IDE,例如PyCharm,那你直接新建Django项目就好了。

  想要连接数据库,就需要使用到Django模型,诸如MySql,Oracle等主流数据库都是支持的(SqlServer好像不行?!)。我这里使用的是MySql,所以需要安装一下MySql的驱动:

pip install mysqlclient

  Django连接数据库的信息保存在了settings.py中,按需求做如下修改:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 或者使用 mysql.connector.django
        'NAME': 'test',
        'USER': 'test',
        'PASSWORD': 'test123',
        'HOST':'localhost',
        'PORT':'3306',
    }
}

  Django中使用模型的话,须新建一个App,这里命名为TestModel,直接在项目根目录创建,创建指令代码如下:

django-admin startapp TestModel

  再次盗用:

TestPro
|-- TestModel
|   |-- __init__.py
|   |-- admin.py
|   |-- models.py
|   |-- tests.py
|   `-- views.py

  再创建一个模板文件夹,存放我们的html页面,于是总的结构图:

TestPro
|-- TestModel
|   |-- __init__.py
|   |-- admin.py
|   |-- models.py
|   |-- tests.py
|   `-- views.py
|-- TestPro
|   |-- __init__.py
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
|-- templates   #模板文件夹
`-- manage.py

  接下来呢,在models.py中新建一个Model:

...
class UserTest(models.Model):
    name=models.CharField(max_length=20)
    age=models.CharField(max_length=20)

  我的主键自增id,这里不需要定义(我也是初学,暂时不讲为什么,以后更新补上)。实际上这个模型对应的数据库表有前缀,就像这样:django_usertest

  现在模型有了,获取数据就是了。我新建了一个ca_user.py,里面写操作数据库的代码。
  引入这几个包:

from django.http import HttpResponse
from django.shortcuts import render
from TestModel.models import UserTest   #实体类(模型)的引入

  写一个方法,获取数据,拼成想要的格式,方便前台Highcharts显示,实际也就是拼JSON:

def user_show(request):
    users=UserTest.objects.all()  #获取全部数据
    listx = []
    listy = []
    for user in users:  #遍历,拼横纵坐标
        listx.append(str(user.name))  
        listy.append(int(user.age))
    return render(request, "show.html", {'users':users, 'X':listx, 'Y':listy})  #跳转到show.html,并将拼好的数据({'users':users, 'X':listx, 'Y':listy})传递到该页面

  python的代码还是很通俗的。前台页面在templates文件夹下创建,templates文件夹需要设置为模板文件夹,找到settings.py中的TEMPLATES,作如下修改:

'DIRS': [os.path.join(BASE_DIR,'templates')]     #templates就是你上面建的模板文件夹的名字    

  新建一个show.html ,引入Jquery的包,写好Highcharts的代码,然后绑定数据。数据绑定和Angular类似,使用{{ }}来绑定。在这个过程中,遇到一个问题,那就是我的x轴坐标使用的是字符串数组,数组项中的引号在前台被强行转义了,变成了' ,于是图表显示不出来了。这里呢需要修改一下设置settings.py中的MIDDLEWARE配置,注释如下语句:

'django.middleware.csrf.CsrfViewMiddleware'

  并且在绑定不需要转义的对象时,在对象名之后加|safe,例如{{x}}便成{{x|safe}}。修改完成后的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 静态资源没解决,调用网络资源 -->
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="container"></div>
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '年龄对比图'
                },
                xAxis: {
                    categories: {{ X|safe }},   
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '年龄',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: '岁'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true,
                            allowOverlap: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: '年龄',
                    data: {{ Y }}
                }]
            });
        });
    </script>
</body>
</html>

到此,启动服务器运行项目:

python manage runserver 0.0.0.0:8000

IDE的话直接运行就好了,到此看效果
show.png

附上代码下载连接:点击Demo下载