Django Highcharts制作图表


Posted in Python onAugust 27, 2016

在运维工作总很多数据最终的展现方式要用到图表,毕竟用图来展示要比一堆数字更直观些,比如利用率、站点的PV,UV等,大家千万不要觉得看到很多漂亮的图就感觉很难,其实真心不是,因为现在有很多前端的绘图库,你只需要按它要求的格式(json)提供给前端接口,什么曲线图、饼图,还有你从来都不知道的图都可以生成出来,现在用的比较多的是highcharts,echarts等,django-highcharts是django的一个集成库,使用它在django里更方便绘制出我们想要的图表,所以这篇文章就使用它来完成一个超小项目,实现一个站点的PV,UV曲线图, 另外我一直认为公众号其实不太合适贴太多的代码,要看代码最好还是用专业的编辑器,如果通篇都是代码,我估计很多人直接就收藏了,时间久了自己都忘了,起不到真正学习的目的, 所以今天我重点还是讲使用步骤,确保下次大家开发的时候会用,代码只是辅助,当然核心的我也会全部贴出来,但完整的代码限于篇幅就不在贴了,另外这篇是需要小伙伴们有django一点点基础的,如果没有任何基础,可能需要先了解下基本mvc的概念,否则你可能会看的云里雾里, 其它不多说了,现在开始,我先介绍下开发环境:

python 2.7 + django1.8.2 + mysql (版本随意)

第一步,安装django-higchats,这个根据大家使用的环境即可,pip或直接用pycharm工具安装都可以。

第二步,新建project 和app

第三步,以上做完,就可以敲代码了,先建models,就是数据库表的表结构,日常站点访问数据PV,UV数据可以插入到这个表里,一会我们要使用。

第四步,图表模块代码编写,这部分主要是一个类从数据库表中获取数据,然后将数据提供给图形展示类,代码如下:

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数据给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函数将mindg.html 渲染出来了,最终图如下:

Django Highcharts制作图表

关于highcharts的使用就介绍到这里,如有疑问请我直接留言。

Python 相关文章推荐
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
Nov 28 Python
Python数据操作方法封装类实例
Jun 23 Python
用tensorflow搭建CNN的方法
Mar 05 Python
教你使用python画一朵花送女朋友
Mar 29 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
Jan 15 Python
python程序控制NAO机器人行走
Apr 29 Python
python批量识别图片指定区域文字内容
Apr 30 Python
python之mock模块基本使用方法详解
Jun 27 Python
使用浏览器访问python写的服务器程序
Oct 10 Python
python 实现让字典的value 成为列表
Dec 16 Python
Python 的 sum() Pythonic 的求和方法详细
Oct 16 Python
Python实现数据的序列化操作详解
Jul 07 Python
Python连接DB2数据库
Aug 27 #Python
使用python绘制常用的图表
Aug 27 #Python
python实现实时监控文件的方法
Aug 26 #Python
Python爬取京东的商品分类与链接
Aug 26 #Python
Python设计模式之抽象工厂模式
Aug 25 #Python
简单谈谈python中的Queue与多进程
Aug 25 #Python
利用Python自动监控网站并发送邮件告警的方法
Aug 24 #Python
You might like
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
品管员岗位职责
2013/11/10 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
运动会获奖感言
2014/02/11 职场文书
电子商务专业求职信
2014/03/08 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
信访稳定工作汇报
2014/10/27 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
python 字典和列表嵌套用法详解
2021/06/29 Python