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 mysqlclientDjango连接数据库的信息保存在了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}}。修改完成后的代码如下：
<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>Titletitle>
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:8000IDE的话直接运行就好了，到此看效果
附上代码下载连接：点击Demo下载