使用 Django Highcharts 实现数据可视化

最新推荐文章于 2024-08-01 09:57:19 发布

feishicheng

最新推荐文章于 2024-08-01 09:57:19 发布

阅读量8.4k

点赞数 5

分类专栏：白菜系列--Python 文章标签： django 数据可视化 highcharts python

本文链接：https://blog.csdn.net/feishicheng/article/details/79259939

版权

本文介绍如何使用Django和Highcharts插件django-echarts将winstore app排名信息进行数据可视化。详细阐述了开发环境、需求、问题解析及前端页面、服务器端和数据库的实现步骤，提供完整的项目代码供下载。

摘要由CSDN通过智能技术生成

使用 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' %}">
    <link rel="stylesheet" href="{% static 'css/jquery.multiselect.css' %}">
    <link rel="stylesheet" href="{% static 'css/screen1.css' %}">

    <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"},