使用 Django Highcharts 實現(xiàn)數(shù)據(jù)可視化過程解析

更新時間：2019年07月31日 11:36:26 作者：feishicheng

這篇文章主要介紹了使用 Django Highcharts 實現(xiàn)數(shù)據(jù)可視化過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

概述

最近在一家公司實習，入職第一個大一點的需求是將公司開發(fā)的兩個winstore app的排名信息進行可視化。大概挑選了下，排除了Flask和Echarts。最終選擇使用Django和它的插件django-echarts來實現(xiàn)。文末有項目的完整代碼，不想看的可以直接去下載，拆箱可用。

本篇博客主要用于記錄整體的實現(xiàn)步驟，以及在實現(xiàn)過程中遇到的各個問題。

開發(fā)環(huán)境

本次搭建使用 Python 2.7.14，django 1.11.8，highcharts 4.0.1
直接命令行輸入以下語句，即可安裝django 1.11.8。

pip install django==1.11.8

至于Highcharts，可以去官網(wǎng)下載。我用的是之前前輩給的模板，js不是太懂，所以基本沒改，只是為了方便進行拓展，對功能模塊進行了注釋。

開發(fā)需求

手頭已有爬取的winstore不同app，不同榜單，不同地區(qū)的多天rank數(shù)據(jù)。這些rank數(shù)據(jù)存放在MySQL服務器中，庫名為winstore，表名為winstore_rank。

現(xiàn)在需要將這些rank數(shù)據(jù)用折線圖的方式展示出來。同時在網(wǎng)頁上需要可以根據(jù)選擇的日期，地區(qū)，榜單來動態(tài)產生折線圖。

問題解析

根據(jù)開發(fā)需求，可以將這次任務分為三個部分。

前端頁面

a. ajax動態(tài)獲取地區(qū)列表、榜單列表，生成對應的下拉列表，必要時需將傳統(tǒng)下拉列表轉換成多選下拉列表

b. 根據(jù)搜索結果，將符合條件的app的rank添加到折線圖中

服務器端

a. 接受前端的請求，與數(shù)據(jù)庫通信，返回所請求數(shù)據(jù)

MySQL數(shù)據(jù)庫

a. 根據(jù)服務器端傳輸?shù)膕ql語句進行對應的查詢

根據(jù)上述的分析，前端肯定是js + jQuery + Echarts + jquery.multiselect了，服務器端采用Django，數(shù)據(jù)庫方面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);
  });
  // 動態(tài)獲取數(shù)據(jù)庫中region數(shù)據(jù)，填充入下拉列表
  $(function() {
   $.get("/getWinstoreRegions",
     {"limit": "0"},
     function(regionsDict) {
      for (var id in regionsDict) {
       regionOption = "<option value='" + id + "'>" + regionsDict[id] + "</option>";
       $("#region").append(regionOption);
      }
     },
     "json"
     )
  });

  // 動態(tài)獲取數(shù)據(jù)庫中chart數(shù)據(jù)，填充入下拉列表
  $(function() {
   $.get("/getWinstoreCharts",
     {"limit": "0"},
     function(chartsDict) {
      for (var id in chartsDict) {
       chartOption = "<option value='" + id + "'>" + chartsDict[id] + "</option>";
       $("#chart").append(chartOption);
      }
     },
     "json"
     )
  });
  // 動態(tài)獲取數(shù)據(jù)庫中category數(shù)據(jù)，填充入下拉列表
  $(function() {
   $.get("/getWinstoreCategories",
     {"limit": "0"},
     function(categoriesDict) {
      for (var id in categoriesDict) {
       categoryOption = "<option value='" + id + "'>" + categoriesDict[id] + "</option>";
       $("#category").append(categoryOption);
      }
     },
     "json"
     )
  });
  // 動態(tài)獲取數(shù)據(jù)庫中app名字，填充入下拉列表
  $(function() {
   $.get( "/getWinstoreApps",
    {"limit":"0",},
    function(dataDict) {
     // 循環(huán)添加下拉列表的option
     for (var id in dataDict) {
      appOption = "<option value='" + id + "'>" + dataDict[id] + "</option>";
      $("#appName").append(appOption);
     }
     // 初始化多選
     $("#appName").multiselect({header: false,});
     // 選中所有下拉列表項
     $("#appName").multiselect("checkAll");
     // 動態(tài)設置多選框的寬度
     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;
  // 獲取繪圖數(shù)據(jù)
  function queryReport(region, beginDate, endDate, chart, category, appNames) {
   // 清空原有繪圖數(shù)據(jù)
   $("#container")[0].innerHTML = "";
   // 初始化折線圖參數(shù)
    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參數(shù)
   parameters = {'region': region,
      'beginDate': beginDate,
      'endDate': endDate,
      'chart': chart,
      'category': category,
      'appNames': appNames
      };

   // 請求繪圖數(shù)據(jù)
   $.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生成折線圖，根據(jù)不同的數(shù)據(jù)，只需要修改series參數(shù)即可。而series參數(shù)是個啥，可以在上面的HTML代碼中搜索series即可。稍微觀察下，就明白了。

至于你想換個大餅圖，柱狀圖，可以點擊這里找現(xiàn)成的例子，稍作修改就可以使用了。當然也許你有更多個性化的需求，那可以點擊這里找到對應的配置項進行修改。

2. 服務器端

1、首先命令行進入到你想放置項目代碼的地方

django_admin startproject winstore

2、進入剛剛新建的項目文件夾

cd winstore

3、創(chuàng)建新的應用rank。這里的應用可以理解成具有獨立功能的一組網(wǎng)頁的結合，當然在本篇博客里，只有一個網(wǎng)頁了。

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數(shù)據(jù)庫的控制信息。下面是我的數(shù)據(jù)庫設置：

DATABASES = {
 'default': {
  'ENGINE': 'django.db.backends.mysql',
  'NAME': 'winstore', # 數(shù)據(jù)庫名
  'HOST': '127.0.0.1', # IP
  'PORT': '3306',  # 端口號
  'USER': 'root',  # 用戶名
  'PASSWORD': '111111', # 密碼
 }
}

6、編輯rank文件夾下的views.py文件，在rank.html中加入必要的網(wǎng)頁動態(tài)功能的實現(xiàn)。由于app的排名數(shù)據(jù)是根據(jù)其所處的榜單chart和應用類別category，以及不同的地區(qū)region來確定的，所以這里里的功能實現(xiàn)就需要包括5個部分。分別對appName、chart、category、region 實現(xiàn)從數(shù)據(jù)庫動態(tài)獲取其取值集合以及獲取排名數(shù)據(jù)。對應的實現(xiàn)分別如下：

appName

def getWinstoreApps(request):
 """
 根據(jù)接收到的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):
 """
 根據(jù)接收到的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):
 """
 根據(jù)接收到的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):
 """
 根據(jù)接收到的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)

獲取排名數(shù)據(jù)

def getWinstoreRank(request):
 """
 根據(jù)接收到的GET請求返回對應app的排名數(shù)據(jù)
 """
 # 從GET請求中獲取參數(shù)
 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，對應的排名數(shù)據(jù)列表作為value
 appRank = {}
 for appName in appNames:
  sql = sqlTemp + '"' + appName + '"'
  try:
   result = getDataFromSQL(sql)
   # 根據(jù)數(shù)據(jù)庫返回的結果將缺少rank數(shù)據(jù)的日期補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：
  按照日期順序排列的排名數(shù)據(jù)，缺省排名為0
 """
 # 將日期字符串轉變?yōu)閐ate類型數(shù)據(jù)，方便日期加減
 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語句，然后訪問數(shù)據(jù)庫獲取對應的數(shù)據(jù)集合。其中getDataFromSQL() 是對訪問MySQL數(shù)據(jù)庫的簡單封裝，具體代碼如下：

def getDataFromSQL(sql):
 """
 根據(jù)sql語句獲取數(shù)據(jù)庫的返回數(shù)據(jù)
 """
 cursor = connection.cursor()
 cursor.execute(sql)
 return list(cursor.fetchall())

一些涉及到的引用可以參考文末給出的項目代碼。

最終綁定一下首頁

def index(request):
 """
 綁定網(wǎng)站首頁
 """
 return render(request, 'rank.html')

3. MySQL數(shù)據(jù)庫

實際應用時，相關的rank數(shù)據(jù)是通過爬蟲獲取的。在這里，就直接填充一些隨機的rank數(shù)據(jù)進去了，不影響最終的結果。

最終成果展示

首頁

rank數(shù)據(jù)展示

可以看到雖然前端頁面很簡陋，但是功能是實現(xiàn)了。不過有個問題就是重新點擊query按鈕后，highcharts提供的右側頁面中間下載圖片的那個三道杠會出現(xiàn)并排的兩個。

本文的完整項目代碼點擊這里就可以獲取了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

如何利用python執(zhí)行txt文件中的代碼
這篇文章主要介紹了如何利用python執(zhí)行txt文件中的代碼，python這么強大的語言當然可以做大，只需使用內置的exex()函數(shù)，進入主題前我們先來看看什么是exec()函數(shù)，需要的小伙伴可以參考一下
2022-03-03
python如何去除字符串兩端的引號
這篇文章主要介紹了python如何去除字符串兩端的引號問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-08-08
pip 20.3 新版本發(fā)布!即將拋棄 Python 2.x(推薦)
這篇文章主要介紹了pip 20.3 新版本發(fā)布!即將拋棄 Python 2.x,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
Python從wsgi導入失敗的問題解決方法
本文主要介紹了Python從wsgi導入失敗的問題解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2025-04-04
Python3 虛擬開發(fā)環(huán)境搭建過程(圖文詳解)
這篇文章主要介紹了Python3 虛擬開發(fā)環(huán)境搭建過程，本文通過圖文實例代碼相結合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
教你用Python實現(xiàn)一個輪盤抽獎小游戲
Python提供了許多個圖像開發(fā)界面的庫,比如現(xiàn)在主流的Tkinter,wxPython,pyqt5等,三種各有優(yōu)點,也各有缺點,下面對其分別進行介紹和對比,并編寫代碼實現(xiàn)一個輪盤轉盤抽獎小游戲.需要的朋友可以參考下
2021-05-05
python?Pandas之DataFrame索引及選取數(shù)據(jù)
這篇文章主要介紹了python?Pandas之DataFrame索引及選取數(shù)據(jù)，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-07-07
詳解Python 2.6 升級至 Python 2.7 的實踐心得
本篇文章主要介紹了詳解Python 2.6 升級至 Python 2.7 的實踐心得，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
python使用socket實現(xiàn)圖像傳輸功能
這篇文章主要為大家詳細介紹了python使用socket實現(xiàn)圖像傳輸功能，linux服務器與win10主機間的圖像傳輸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
python實現(xiàn)WebP格式轉成JPG、PNG和JPEG的方法
平時在網(wǎng)上搜索圖片,另存為時常常遇到 WebP 格式,而非常見的 JPG、PNG、JPEG 格式,所以以此文記錄一下WebP的讀取和轉換方法,希望對大家有所幫助,需要的朋友可以參考下
2024-06-06