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 相关文章推荐
sqlalchemy对象转dict的示例
Apr 22 Python
详谈python http长连接客户端
Jun 12 Python
Python使用Pickle库实现读写序列操作示例
Jun 15 Python
解决python3读取Python2存储的pickle文件问题
Oct 25 Python
Python使用sklearn库实现的各种分类算法简单应用小结
Jul 04 Python
Python3内置模块random随机方法小结
Jul 13 Python
pytorch 在sequential中使用view来reshape的例子
Aug 20 Python
python3中的eval和exec的区别与联系
Oct 10 Python
Python 静态方法和类方法实例分析
Nov 21 Python
基于Python爬取京东双十一商品价格曲线
Oct 23 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
Dec 01 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
Mar 03 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
php正则校验用户名介绍
2008/07/19 PHP
PHP 快速排序算法详解
2014/11/10 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jquery中get和post的简单实例
2014/02/04 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[01:13]这,就是刀塔
2014/07/16 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
请说出以下代码输出什么
2013/08/30 面试题
小型女装店的创业计划书
2014/01/09 职场文书
领导视察欢迎词
2014/01/15 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年市场部工作总结
2015/04/30 职场文书
英语读书笔记
2015/07/02 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA