使用Django Highcharts制作图表
在运维工作总很多数据最终的展现方式要用到图表,毕竟用图来展示要比一堆数字更直观些,比如利用率、站点的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' %}
{% loadhighcharts_tags %}
{% blockjs %}
<scripttype="text/javascript">
$(function (){
$.getJSON("{% url 'mpv' %}", function(data) {
$('#container').highcharts(data);
});
});
</script>
{% endblock %}
有了上面的代码,就可以通过view函数将mindg.html渲染出来了,最终图如下:
文章来源:mindg
使用Django Highcharts制作图表相关推荐
- Django显示可视化图表
一 实战 1 Django_lab\urls.py # -*- coding: utf-8 -*-from django.conf.urls import url,include from djang ...
- Django(part39)--制作图书管理系统
学习笔记,仅供参考,有错必究 文章目录 制作图书管理系统 第一步 第二步 第三步 制作图书管理系统 我们基于上一个博客Django(part38)–制作登录界面的mywebsite_bookstore ...
- 在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码 我们这里写的都是些死的数 ...
- 使用web设计器制作图表报表
课程二十六:如何制作图表报表 说明:在报表中,使用图表展示数据会更清晰明了.本课程以"销量"表为例,讲解如何用盈帆报表做图表. 第一步:认识图表 点击菜单栏"插入&quo ...
- echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图 工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
- 如何用excel制作图表?
Excel是一个非常强大的电子表格软件,其中包含了很多绘制图表的功能.下面是一些基本步骤,可以帮助你用Excel制作图表: 打开Excel并输入数据.在Excel中,首先需要输入需要制作图表的数据.可 ...
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...
- 使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
- 使用Excel制作图表的实例教程 Excel图表制作大全
Excel图表:创建基本图表 Excel图表可以将数据图形化,更直观的显示数据,使数据的比较或趋势变得一目了然,从而更容易表达我们的观点. 本课我们将通过"图表向导"创建最基本的图 ...
最新文章
- 空气质量html模板,基于HTML5+CSS3移动端空气质量APP的设计与实现
- Oracle中用一个序列给两个表创建主键自增功能的后果
- python 扩展_用Python方法对Cursor进行扩展
- TextBoxWatermarkExtender扩展器与RequiredFieldValidator控件相冲突的解决方案
- 淘宝分布式NOSQL框架:Tair
- new hashmap 初始大小_你们要的HashMap工作原理!它来了!!!
- 详解文本分类之DeepCNN的理论与实践
- 磁盘:最容易被忽略的性能洼地
- 2018年1月西邻雪山自驾游攻略
- gggggggggggg
- vue插槽,分分钟理解
- 第十六篇 晶体管之电流放大器
- 一段很现实的话适合发朋友圈文案
- 解决GitHub连不上的问题fatal: unable to access ‘https://github.com/..’: Failed to connect to github.com port
- 对未来的打算和本专业的认识
- [luogu1710]地铁涨价(bfs)
- 什么是响应式设计?响应式设计的基本原理是什么?如何做
- http的长连接 和短连接
- QualityCenter(QC)—测试管理工具
- 玩转物联网外设之步进电机