在運(yùn)維工作總很多數(shù)據(jù)最終的展現(xiàn)方式要用到圖表，畢竟用圖來展示要比一堆數(shù)字更直觀些，比如利用率、站點(diǎn)的PV，UV等，大家千萬不要覺得看到很多漂亮的圖就感覺很難，其實(shí)真心不是，因?yàn)楝F(xiàn)在有很多前端的繪圖庫，你只需要按它要求的格式（json）提供給前端接口，什么曲線圖、餅圖，還有你從來都不知道的圖都可以生成出來，現(xiàn)在用的比較多的是highcharts,echarts等，django-highcharts是django的一個(gè)集成庫，使用它在django里更方便繪制出我們想要的圖表，所以這篇文章就使用它來完成一個(gè)超小項(xiàng)目，實(shí)現(xiàn)一個(gè)站點(diǎn)的PV,UV曲線圖， 另外我一直認(rèn)為公眾號其實(shí)不太合適貼太多的代碼，要看代碼最好還是用專業(yè)的編輯器，如果通篇都是代碼，我估計(jì)很多人直接就收藏了，時(shí)間久了自己都忘了，起不到真正學(xué)習(xí)的目的， 所以今天我重點(diǎn)還是講使用步驟，確保下次大家開發(fā)的時(shí)候會用，代碼只是輔助，當(dāng)然核心的我也會全部貼出來，但完整的代碼限于篇幅就不在貼了，另外這篇是需要小伙伴們有django一點(diǎn)點(diǎn)基礎(chǔ)的，如果沒有任何基礎(chǔ)，可能需要先了解下基本mvc的概念，否則你可能會看的云里霧里， 其它不多說了，現(xiàn)在開始，我先介紹下開發(fā)環(huán)境：

python 2.7 + django1.8.2 + mysql （版本隨意）

第一步，安裝django-higchats，這個(gè)根據(jù)大家使用的環(huán)境即可，pip或直接用pycharm工具安裝都可以。

第二步，新建project 和app

第三步，以上做完，就可以敲代碼了，先建models,就是數(shù)據(jù)庫表的表結(jié)構(gòu)，日常站點(diǎn)訪問數(shù)據(jù)PV,UV數(shù)據(jù)可以插入到這個(gè)表里，一會我們要使用。

第四步，圖表模塊代碼編寫，這部分主要是一個(gè)類從數(shù)據(jù)庫表中獲取數(shù)據(jù)，然后將數(shù)據(jù)提供給圖形展示類，代碼如下：

class pudata(object):
 
  def __init__(self, dbobj):
    self.dbobj = dbobj
    self.pdays = self.dbobj.objects.all()
 
  def mpvdate(self):
    res = {}
    for v in self.pdays:
      res[v.days] = v.pvisitor
    res = collections.OrderedDict(sorted(res.items(), key=lambda d: d[0]))
    return res
 
  def muvdate(self):
    res = {}
    for v in self.pdays:
      res[v.days] = v.uvisitor
    res = collections.OrderedDict(sorted(res.items(), key=lambda d: d[0]))
    return res
 
class MindgViewPv(HighChartsMultiAxesView):
  p = pudata(mindg)
  title = 'mindg.cn'
  tooltip = {'shared': 'true'}
  chart_type = 'spline'
  categories = p.mpvdate().keys()
 
  @property
  def yaxis(self):
    y_axis = [
    {
      'title': {
        'text': 'PV'
      },
    }
    ]
    return y_axis
 
  @property
  def series(self):
    p = pudata(mindg)
    series = [
      {
      'name': 'mindg.cn',
      'data': p.icypvdate().values()
      }]
    return series
 

第五步，模板層代碼，模板采用ajax方式，從后臺獲取的json數(shù)據(jù)給highcharts然后繪制曲線圖，代碼如下：

{% extends 'head_css.html' %}
{% load highcharts_tags %}
 
{% block js %}
 <script type="text/javascript">
  $(function (){
    $.getJSON("{% url 'mpv' %}", function(data) {
      $('#container').highcharts(data);
    });
  });
  </script>
 {% endblock %}

有了上面的代碼，就可以通過view函數(shù)將mindg.html 渲染出來了，最終圖如下：

關(guān)于highcharts的使用就介紹到這里，如有疑問請我直接留言。

最新評論