使用 Django Highcharts 实现数据可视化过程解析
概述
最近在一家公司实习，入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化。大概挑选了下，排除了Flask和Echarts。最终选择使用Django和它的插件django-echarts来实现。文末有项目的完整代码，不想看的可以直接去下载，拆箱可用。
本篇博客主要用于记录整体的实现步骤，以及在实现过程中遇到的各个问题。
开发环境
本次搭建使用 Python 2.7.14，django 1.11.8，highcharts 4.0.1
直接命令行输入以下语句，即可安装django 1.11.8。
pip install django==1.11.8
至于Highcharts，可以去官网下载。我用的是之前前辈给的模板，js不是太懂，所以基本没改，只是为了方便进行拓展，对功能模块进行了注释。
开发需求
手头已有爬取的winstore不同app，不同榜单，不同地区的多天rank数据。这些rank数据存放在MySQL服务器中，库名为winstore，表名为winstore_rank。
现在需要将这些rank数据用折线图的方式展示出来。同时在网页上需要可以根据选择的日期，地区，榜单来动态产生折线图。
问题解析
根据开发需求，可以将这次任务分为三个部分。
前端页面
a. ajax动态获取地区列表、榜单列表，生成对应的下拉列表，必要时需将传统下拉列表转换成多选下拉列表
b. 根据搜索结果，将符合条件的app的rank添加到折线图中
服务器端
a. 接受前端的请求，与数据库通信，返回所请求数据
MySQL数据库
a. 根据服务器端传输的sql语句进行对应的查询
根据上述的分析，前端肯定是js + jQuery + Echarts + jquery.multiselect了，服务器端采用Django，数据库方面Django有对应的驱动模块，不用管。
1. 前端页面
新建一个文件rank.html，内容如下：
<head>
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/highcharts.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/exporting.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.multiselect.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}" rel="external nofollow" >
<link rel="stylesheet" href="{% static 'css/jquery.multiselect.css' %}" rel="external nofollow" >
<link rel="stylesheet" href="{% static 'css/screen1.css' %}" rel="external nofollow" >
<style type="text/css">
#set-content ul li #chart {
width: 60px;
font-size: 12px;
height: 22px;
}
</style>
<script type="text/javascript">
// 设定开始日期和结束日期，默认为最近10天
$(function() {
$("#beginDate").datepicker({dateFormat: "yy-mm-dd"});
$("#endDate").datepicker({dateFormat: "yy-mm-dd"});
var dateNow = new Date();
var str_dateNow = dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + dateNow.getDate();
var dateBegin = new Date(dateNow - 10 * 1000 * 3600 * 24);
var str_dateBegin = dateBegin.getFullYear() + "-" + (dateBegin.getMonth() + 1) + "-" + dateBegin.getDate();
$("#beginDate").datepicker("setDate", str_dateBegin);
$("#endDate").datepicker("setDate", str_dateNow);
});
// 动态获取数据库中region数据，填充入下拉列表
$(function() {
$.get("/getWinstoreRegions",
{"limit": "0"},
function(regionsDict) {
for (var id in regionsDict) {
regionOption = "<option value='" + id + "'>" + regionsDict[id] + "</option>";
$("#region").append(regionOption);
}
},
"json"
)
});
// 动态获取数据库中chart数据，填充入下拉列表
$(function() {
$.get("/getWinstoreCharts",
{"limit": "0"},
function(chartsDict) {
for (var id in chartsDict) {
chartOption = "<option value='" + id + "'>" + chartsDict[id] + "</option>";
$("#chart").append(chartOption);
}
},
"json"
)
});
// 动态获取数据库中category数据，填充入下拉列表
$(function() {
$.get("/getWinstoreCategories",
{"limit": "0"},
function(categoriesDict) {
for (var id in categoriesDict) {
categoryOption = "<option value='" + id + "'>" + categoriesDict[id] + "</option>";
$("#category").append(categoryOption);
}
},
"json"
)
});
// 动态获取数据库中app名字，填充入下拉列表
$(function() {
$.get( "/getWinstoreApps",
{"limit":"0",},
function(dataDict) {
// 循环添加下拉列表的option
for (var id in dataDict) {
appOption = "<option value='" + id + "'>" + dataDict[id] + "</option>";
$("#appName").append(appOption);
}
// 初始化多选
$("#appName").multiselect({header: false,});
// 选中所有下拉列表项
$("#appName").multiselect("checkAll");
// 动态设置多选框的宽度
var ulList = $(".ui-multiselect-checkboxes")[0];
// 必须先单击多选下拉列表，然后才可以获取对应元素的宽度值
$(".ui-multiselect")[0].click();
var maxWidth = 0;
for (var i = 0; i < ulList.childElementCount; i++) {
var currentInputWidth = $(ulList.childNodes[i]).find("input")[0].offsetWidth;
var currentSpanWidth = $(ulList.childNodes[i]).find("span")[0].offsetWidth;
var currentWidth = currentSpanWidth + currentInputWidth * 3;
if (currentWidth > maxWidth) {
maxWidth = currentWidth;
}
}
// 设置对应标签的宽度
$($(".ui-multiselect")[0]).width(maxWidth);
$($(".ui-multiselect-menu")[0]).width(maxWidth + 6);
// 二次单击
$(".ui-multiselect")[0].click();
},
"json");
});
// 绑定query按钮的单击操作
$(function() {
$("#query").click(function() {
var region = $("#region").val();
var beginDate = $("#beginDate").val();
var endDate = $("#endDate").val();
var chart = $("#chart").val();
var appNames = $("#appName").val();
var category = $("#category").val();
// 将appNames连接成字符串
queryReport(region, beginDate, endDate, chart, category, appNames.join("@"));
});
})
var lineChart;
// 获取绘图数据
function queryReport(region, beginDate, endDate, chart, category, appNames) {
// 清空原有绘图数据
$("#container")[0].innerHTML = "";
// 初始化折线图参数
var lineChart = new Highcharts.Chart({
chart: {
renderTo: 'container', type: 'line'
},
title: {
text: 'Daily Ranking',
style: {fontFamily: 'Helvetica', fontWeight: '200'}
},
subtitle: {
text: 'By Product',
style: {fontFamily: 'Helvetica', fontWeight: '200'}
},
xAxis: [{ // master axis
type: 'datetime',
gridLineWidth:1,
gridLineDashStyle: 'longdash',
tickInterval: 24 * 3600 * 1000,
}, { // slave axis
type: 'datetime',
linkedTo: 0,
opposite: true,
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {return Highcharts.dateFormat('%a', this.value);}
}
}], tooltip: {
headerFormat: '<span>{point.key}</span><br/>',
pointFormat: '<span style="color:{series.color}">\u25AC</span> {series.name}: <b>{point.y}</b><br/>',
},
yAxis: [{ // Primary yAxis
min:1,
reversed: true,
labels: {
format: 'No. {value}',
style: {
color: '#4572A7'
}
},
title: {
text: 'Ranking',
style: {
color: '#4572A7'
}
}
},
{ // Secondary yAxis
min:1,
reversed: true,
title: {
text: 'Ranking',
style: {
color: '#4572A7'
}
},
labels: {
format: 'No. {value}',
style: {
color: '#4572A7'
}
},
opposite: true,
}],
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
},
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [],
});
// 构造url参数
parameters = {'region': region,
'beginDate': beginDate,
'endDate': endDate,
'chart': chart,
'category': category,
'appNames': appNames
};
// 请求绘图数据
$.get("/getWinstoreRank",
parameters,
function(rankDict) {
var ranksOfApp = new Array();
for (var app in rankDict) {
lineChart.addSeries({
name: app,
data: rankDict[app]
});
}
},
"json"
);
}
</script>
</head>
<body>
<div id="set-content">
<ul>
<li>
<label for="region">Country/Region: </label>
<select id="region"></select>
</li>
<li>
<label for="beginDate">Begin Date: </label>
<input type="text" id="beginDate">
</li>
<li>
<label for="endDate">End Date: </label>
<input type="text" id="endDate">
</li>
<li>
<label for="chart">Chart: </label>
<select id="chart"></select>
</li>
<li>
<label for="category">Category: </label>
<select id="category"></select>
</li>
<li>
<label for="appName">App:</label>
<select id="appName" multiple="multiple" size="4"></select>
</li>
<li>
<button id='query'>Query</button>
</li>
</ul>
</div>
<div id="container"></div>
</body>
这里稍微解释下，在实际使用中，使用highcharts生成折线图，根据不同的数据，只需要修改series参数即可。而series参数是个啥，可以在上面的HTML代码中搜索series即可。稍微观察下，就明白了。
至于你想换个大饼图，柱状图，可以 点击这里 找现成的例子，稍作修改就可以使用了。当然也许你有更多个性化的需求，那可以 点击这里 找到对应的配置项进行修改。
2. 服务器端
1、首先命令行进入到你想放置项目代码的地方
django_admin startproject winstore
2、进入刚刚新建的项目文件夹
cd winstore
3、创建新的应用rank。这里的应用可以理解成具有独立功能的一组网页的结合，当然在本篇博客里，只有一个网页了。
python manage.py startapp rank
4、在rank文件夹中新建文件夹templates和static，将刚刚新建的rank.html放入templates文件夹，同时将引用的js库文件放入static文件夹下，注意文件夹层级。
5.、打开winstore文件夹下的settings.py ，在INSTALL_APPS 下添加rank，添加之后如下：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rank' # 添加的部分 ]
将DATABASES修改成你自己的MySQL数据库的控制信息。下面是我的数据库设置：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'winstore', # 数据库名
'HOST': '127.0.0.1', # IP
'PORT': '3306', # 端口号
'USER': 'root', # 用户名
'PASSWORD': '111111', # 密码
}
}
6、编辑rank文件夹下的views.py文件，在rank.html中加入必要的网页动态功能的实现。由于app的排名数据是根据其所处的榜单chart和应用类别category，以及不同的地区region来确定的，所以这里里的功能实现就需要包括5个部分。分别对appName、chart、category、region 实现从数据库动态获取其取值集合以及获取排名数据。对应的实现分别如下：
appName
def getWinstoreApps(request):
"""
根据接收到的GET请求返回app的取值集合
"""
# 构造SQL语句
sql = 'SELECT DISTINCT appName FROM winstore_rank'
# 默认appNames的key和value相同
appNames = {}
try:
result = getDataFromSQL(sql)
result = [r[0] for r in result]
for key in result:
appNames[key] = key
except Exception as e:
print('getWinstoreApps ERROR: ' + str(e))
appNames['QQ'] = 'QQ'
return JsonResponse(appNames)
chart
def getWinstoreCharts(request):
"""
根据接收到的GET请求返回chart的取值集合
"""
# 构造SQL语句
sql = 'SELECT DISTINCT chart FROM winstore_rank'
# 默认charts的key和value相同
charts = {}
try:
result = getDataFromSQL(sql)
result = [r[0] for r in result]
for key in result:
charts[key] = key
except Exception as e:
print('getWinstoreCharts ERROR: ' + str(e))
charts['Free'] = 'Free'
return JsonResponse(charts)
category
def getWinstoreCategories(request):
"""
根据接收到的GET请求返回category的取值集合
"""
# 构造SQL语句
sql = 'SELECT DISTINCT category FROM winstore_rank'
# 默认categories的key和value相同
categories = {}
try:
result = getDataFromSQL(sql)
result = [r[0] for r in result]
for key in result:
categories[key] = key
except Exception as e:
print('getWinstoreCategories ERROR: ' + str(e))
categories['Education'] = 'Education'
return JsonResponse(categories)
region
def getWinstoreRegions(request):
"""
根据接收到的GET请求返回region的取值集合
"""
# 构造SQL语句
sql = 'SELECT DISTINCT region FROM winstore_rank'
# 默认regions的key和value相同
regions = {}
try:
result = getDataFromSQL(sql)
result = [r[0] for r in result]
for key in result:
regions[key] = key
except Exception as e:
print('getWinstoreRegions ERROR: ' + str(e))
regions['EN-US'] = 'EN-US'
return JsonResponse(regions)
获取排名数据
def getWinstoreRank(request):
"""
根据接收到的GET请求返回对应app的排名数据
"""
# 从GET请求中获取参数
region = request.GET.get("region", "EN-US")
chart = request.GET.get("chart", "Free")
category = request.GET.get("category", "Education")
beginDate = request.GET.get("beginDate", "2018-01-22")
endDate = request.GET.get("endDate", "2018-02-02")
appNames = request.GET.get("appNames", "QQ").split("@")
# 构造SQL语句
sqlTemp = 'SELECT the_date, rank FROM winstore_rank WHERE ' \
'region="%s" AND chart="%s" AND category="%s" AND ' \
'the_date BETWEEN "%s" AND "%s" AND ' \
'appName=' % (region, chart, category, beginDate, endDate)
# 以每个appName作为key，对应的排名数据列表作为value
appRank = {}
for appName in appNames:
sql = sqlTemp + '"' + appName + '"'
try:
result = getDataFromSQL(sql)
# 根据数据库返回的结果将缺少rank数据的日期补0
result = addZeroToRank(beginDate, endDate, result)
appRank[appName] = result
except Exception as e:
print('getWinstoreRank ERROR: ' + str(e))
return JsonResponse(appRank)
def addZeroToRank(beginDate, endDate, result):
"""
以beginDate和endDate为日期的起始，将result中缺少的日期补全，同时设定排名为0
Param：
beginDate: 开始日期字符串，“2018-01-23”
endDate: 结束日期字符串， “2018-02-02”
result: 形如[(date, 23L), (date, 12L), [date, 3L]......]
Return：
按照日期顺序排列的排名数据，缺省排名为0
"""
# 将日期字符串转变为date类型数据，方便日期加减
y, m, d = [int(i) for i in beginDate.split("-")]
begin = datetime.date(y, m, d)
y, m, d = [int(i) for i in endDate.split("-")]
end = datetime.date(y, m, d)
current = begin
# 获取result中的日期，方便进行判断
resultTemp = [r[0] for r in result]
while current <= end:
if not (current in resultTemp):
result.append((current, 0))
current += datetime.timedelta(days=1)
result.sort(key=lambda x: x[0])
return [int(r[1]) for r in result]
这里主要就是构造SQL语句，然后访问数据库获取对应的数据集合。其中getDataFromSQL() 是对访问MySQL数据库的简单封装，具体代码如下：
def getDataFromSQL(sql): """ 根据sql语句获取数据库的返回数据 """ cursor = connection.cursor() cursor.execute(sql) return list(cursor.fetchall())
一些涉及到的引用可以参考文末给出的项目代码。
最终绑定一下首页
def index(request): """ 绑定网站首页 """ return render(request, 'rank.html')
3. MySQL数据库
实际应用时，相关的rank数据是通过爬虫获取的。在这里，就直接填充一些随机的rank数据进去了，不影响最终的结果。
最终成果展示
首页
rank数据展示
可以看到虽然前端页面很简陋，但是功能是实现了。不过有个问题 就是重新点击query按钮后，highcharts提供的右侧页面中间下载图片的那个三道杠会出现并排的两个。
本文的完整项目代码 点击这里 就可以获取了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
django mysql数据库及图片上传接口详解
前言 我们在 django-rest-framework解析请求参数 文章中完成了接口文档到参数解析, 一个完整的流程中还缺少对数据库的操作. 本篇内容为django连接数据库, 并编写一个image表用来存储图片路径, 编写图片上传接口和查看数据库中所有图片路径的接口. 前期准备 django操作图片需要安装一个三方库叫做,Pillow workon python35 pip install pillow pip install pymysql Pillow这个库可以对图片进行操作, 例如生成
-
Django上使用数据可视化利器Bokeh解析
前言 最近在实验室做的一个项目中,需要把大量的数据在 web 端进行可视化,需要绘制各类图表.数据都是以 csv 文件的形式保存在服务器中.本来是想使用 D3.js 这个数据可视化前端库来画图,但是需要编写大量的 js 代码.后来发现了 Bokeh 这个框架,只需要在后端编写及少量的 Python 代码生成对应的 html 与 js,再传送到前端让浏览器解析,大大的减少了工作量. 1. 波形图 这里绘制一个包含了数千个数据点的信号波形图,绘制方法和 Matlab 如出一辙.学习成本为零. imp
-
解决Django数据库makemigrations有变化但是migrate时未变动问题
写models.py时缺少了一个 verbose_name,导致数据库出现问题,整了很久,摸索出重新建立数据库的方法: 首先删除每个app中的migrations中的除了init.py的文件,在数据库中清空所有的表,然后执行migrate,这时会自动生成系统默认的那些表,然后执行makemigrations,再执行migrate 如果只是众多应用中的一个出了问题的话,删除与之相关的表,然后进入django_migrations表中,将相应的app那项记录删除,然后再执行 makemigratio
-
django框架使用orm实现批量更新数据的方法
本文实例讲述了django框架使用orm实现批量更新数据的方法.分享给大家供大家参考,具体如下: 好久没有用django来改版博客了,突然感觉到生疏了.没办法,业余玩python,django,工作用java的原因,也只能如此.在用django写一个类别更新的时候同时更新子类的parentcode, 如果是自己写原生的sql的话,很好解决.但既然用 django 就用 django 的 orm 去实现: 最简单的方法: MyModel.objects.filter(parentcode=ori_
-
django迁移数据库错误问题解决
django.db.migrations.graph.NodeNotFoundError: Migration order.0002_auto_20181209_0031 dependencies reference nonexistent parent node ('user', '0001_initial') 删除所有的pyc文件,迁移文件 然后重新运行 python manage.py makemigrations django.db.utils.InternalError: (1060,
-
使用 Django Highcharts 实现数据可视化过程解析
概述 最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化.大概挑选了下,排除了Flask和Echarts.最终选择使用Django和它的插件django-echarts来实现.文末有项目的完整代码,不想看的可以直接去下载,拆箱可用. 本篇博客主要用于记录整体的实现步骤,以及在实现过程中遇到的各个问题. 开发环境 本次搭建使用 Python 2.7.14,django 1.11.8,highcharts 4.0.1 直接命令行输入以下语句,即可
-
python教程网络爬虫及数据可视化原理解析
目录 1 项目背景 1.1Python的优势 1.2网络爬虫 1.3数据可视化 1.4Python环境介绍 1.4.1简介 1.4.2特点 1.5扩展库介绍 1.5.1安装模块 1.5.2主要模块介绍 2需求分析 2.1 网络爬虫需求 2.2 数据可视化需求 3总体设计 3.1 网页分析 3.2 数据可视化设计 4方案实施 4.1网络爬虫代码 4.2 数据可视化代码 5 效果展示 5.1 网络爬虫 5.1.1 爬取近五年主要城市数据 5.1.2 爬取2019年各省GDP 5.1.3 爬取豆瓣电影
-
springmvc处理模型数据Map过程解析
这篇文章主要介绍了springmvc处理模型数据Map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 SpringmvcTest.java @RequestMapping("/springmvc") @Controller public class SpringmvcTest { private static final String SUCCESS = "success"; @RequestMapping
-
Django重设Admin密码过程解析
这篇文章主要介绍了Django重设Admin密码过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 如果你忘记了Admin的密码的话,就要用Django shell: python manage.py shell 然后获取你的用户名,并且重设密码: >>>from django.contrib.auth.models import User >>>user = User.objects.get(username='
-
Vue引入highCharts实现数据可视化
本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码,供大家参考,具体内容如下 效果图 文档Api地址 安装 npm install highcharts-vue 在main.js进行全局配置 import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue) <highcharts :options="chartOptions"></highcharts> <scrip
-
Python爬取豆瓣数据实现过程解析
代码如下 from bs4 import BeautifulSoup #网页解析,获取数据 import sys #正则表达式,进行文字匹配 import re import urllib.request,urllib.error #指定url,获取网页数据 import xlwt #使用表格 import sqlite3 import lxml 以上是引用的库,引用库的方法很简单,直接上图: 上面第一步算有了,下面分模块来,步骤算第二步来: 这个放在开头 def main(): baseurl
-
Python爬取YY评级分数并保存数据实现过程解析
前言 当需要进行大规模查询时(比如目前遇到的情形:查询某个省所有发债企业的YY评级分数),人工查询显然太过费时,那就写个爬虫吧. 由于该爬虫实在过于简单,就只简单概述下. 一.请求端 通过观察YY评级的网页信息,如下图(F12或右击进入检查,点击network->XHR->headers). 红色框表明是个get请求(其实这种网页基本都是Ajax get,需要总结实际url的规律的). 绿色框即为实际URL,通过分析该URL,其由两部分组成.前半部分为" https://web.ra
-
Python爬虫爬取博客实现可视化过程解析
源码: from pyecharts import Bar import re import requests num=0 b=[] for i in range(1,11): link='https://www.cnblogs.com/echoDetected/default.html?page='+str(i) headers={'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
-
Feign远程调用传递对象参数并返回自定义分页数据的过程解析
目录 Feign介绍 Feign测试 1.在yml文件里面增加了配置信息 2.在客户端pom.xml文件中引入的依赖(消费者端) 3.服务调用端接口为 4.服务调用端Service代码 5.服务调用端Fallback为 6.服务提供端代码为 7.测试 Feign调用分页接口报错:MethodhastoomanyBodyparameters 解决方法 Feign介绍 Feign是Netflix公司开源的轻量级rest客户端,使用Feign可以非常方便的实现Http 客户端.Spring Cloud