django+highcharts实现数据可视化

最新推荐文章于 2023-02-22 15:44:41 发布

FENGYU406

最新推荐文章于 2023-02-22 15:44:41 发布

阅读量6k

点赞数 6

分类专栏： python 文章标签： python django highcharts

本文链接：https://blog.csdn.net/u012751272/article/details/79400058

版权

python 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

引言

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的话直接运行就好了，到此看效果

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

FENGYU406

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
9
评论
django+highcharts实现数据可视化

引言 Django是Python的一个Web框架，网站或者是App都可以通过这个框架进行开发。它是一个MVC框架，某些细节上和Google的Angular比较类似，比如需要设置路由表进行跳转等等。但是Django其实属于一项上了年纪的技术，它的第一个版本早在2005年就已面世。因为他是Web框架，因此他和数据可视化挂钩的时候，自然就想到了非常熟悉highcharts图表技术，看似非常...
复制链接

扫一扫