达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么在Django中利用Highcharts实现数据可视化-创新互联
本篇文章为大家展示了怎么在Django中利用Highcharts 实现数据可视化，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
开发环境
使用 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，内容如下：
{% load static %}
#set-content ul li #chart {
width: 60px;
font-size: 12px;
height: 22px;
}
// 设定开始日期和结束日期，默认为最近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 = "" + regionsDict[id] + "";
$("#region").append(regionOption);
}
},
"json"
)
});
// 动态获取数据库中chart数据，填充入下拉列表
$(function() {
$.get("/getWinstoreCharts",
{"limit": "0"},
function(chartsDict) {
for (var id in chartsDict) {
chartOption = "" + chartsDict[id] + "";
$("#chart").append(chartOption);
}
},
"json"
)
});
// 动态获取数据库中category数据，填充入下拉列表
$(function() {
$.get("/getWinstoreCategories",
{"limit": "0"},
function(categoriesDict) {
for (var id in categoriesDict) {
categoryOption = "" + categoriesDict[id] + "";
$("#category").append(categoryOption);
}
},
"json"
)
});
// 动态获取数据库中app名字，填充入下拉列表
$(function() {
$.get( "/getWinstoreApps",
{"limit":"0",},
function(dataDict) {
// 循环添加下拉列表的option
for (var id in dataDict) {
appOption = "" + dataDict[id] + "";
$("#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: '{point.key}
',
pointFormat: '\u25AC {series.name}: {point.y}
',
},
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"
);
}
-
Country/Region:
-
Begin Date:
-
End Date:
-
Chart:
-
Category:
-
App:
-
Query
