文档章节

Django+Echarts画图实例

SEOwhywhy
 SEOwhywhy
发布于 2018/11/26 08:02
字数 1366
阅读 15
收藏 0

  阅读此篇文章你可以:
  
  了解Django中aggregate和annotate函数的使用方法
  
  获取一个Django+Echarts绘制柱状图的完整示例
  
  需求说明
  
  一张会议记录表,里边有一个字段存放会议举行的地点,例如北京、上海、洛阳等等,需要取举行会议最多的前20个地点绘制成柱状图展示,项目为前后端分离的架构
  
  需求分析
  
  看了需求主要有三个关键点:
  
  1.前后端分离:前端只负责页面渲染,后端提供API负责数据输出
  
  2.需要绘制成柱状图:绘制图表的第三方插件有很多,我们这里就选择百度开源的echarts,简单好用且功能强大
  
  3.取举行会议最多的前20个地点:了解一点SQL知识的话就知道需要先要对地点字段进行group by,然后order by desc倒序,最后limit取前20
  
  那么在Django中应该如何group by,并在group by之后order by排序,最后limit呢?这里我们介绍django的两个函数aggregate和annotate
  
  aggregate
  
  aggregate聚合函数,用于对QuerySet整个对象结果的汇总,例如获取员工总数(COUNT),平均(AVG)年龄,最大(MAX)年龄,最小(MIN)年龄,销售总额(SUM)等,输出的结果是一个字典
  
  我们有一个model如下:
  
  class Employee(models.Model):
  
  name = models.CharField(max_length=32, verbose_name='姓名')
  
  age = models.IntegerField(verbose_name='年龄')
  
  salary = models.DecimalField(max_digits=10, decimal_places=2, verbose_name='薪资')
  
  想要获取员工的工资总额,我们可以这样写
  
  >>> from django.db.models import Sum
  
  >>> Employee.objects.aggregate(Sum('salary'))
  
  {'salary__sum': Decimal('5000.00')}
  
  想要同时获取员工的平均年龄、最大年龄和最小年龄,我们可以这样写
  
  >>> from django.db.models import Avg, Max, Min
  
  >>> Employee.objects.aggregate(Avg('age'), Max('age'), Min('age'))
  
  {'age__avg': 23.333333333333332, 'age__max': 30, 'age__min': 18}
  
  annotate
  
  annotate函数区别于aggregate函数的一个最重要的地方是annotate函数输出的结果是一个QuerySet对象,这个非常重要,aggregate函数最后输出的结果是个字典,也就不能再在字典的基础上进行QuerySet操作了,而annotate函数执行完成后输出QuerySet对象可以继续调用Django内置的filter、order_by等函数来完成更加复杂的查询计算操作
  
  用到annotate函数的逻辑往往比较复杂,Django非常人性化的提供了query方法,方便查看annotate生成的SQL语句帮助我们确定执行过程
  
  以上边的实际需求为例,model如下:
  
  class EventInfo(models.Model):
  
  event_location = models.CharField(max_length=30)
  
  class Meta:
  
  db_table = "app_event_info"
  
  我们需要先对地点event_location进行group by:
  
  >>> _t = EventInfo.objects.values_list('event_location').annotate(Count('id'))
  
  # values_list可以获取evnet_location的元组列表。
  
  # values_list方法加个参数flat=True可以获取event_location的值列表。
  
  group by之后我们就需要order by排序了,如果我们不知道order by的字段,我们可以通过query先查看group by生成的SQL语句
  
  >>> print(_t.query)
  
  SELECT "app_event_info"."event_location", COUNT("app_event_info"."id") AS "id__count" FROM "app_event_info" GROUP BY "app_event_info"."event_location"
  
  这个时候可以看到实际上输出的结果有一个叫id__count的字段表示地点的总数,那么我们就可以接着对地点总数进行排序了,因为是要倒叙,需要在字段名id__count前边加上-号来表示倒序
  
  >>> _x = _t.order_by('-id__count')
  
  >>>
  
  >>> print(_x.query)
  
  SELECT "app_event_info"."event_location", COUNT("app_event_info"."id") AS "id__count" FROM "app_event_info" GROUP BY "app_event_info"."event_location" ORDER BY "id__count" DESC
  
  最后limit取前二十,Django中limit可以直接通过QuerySet结果后加python的数组切片语法来实现,就像[0:20](其中0可以省略)相当于limit 20一样,[10:20]意思为取第10到第20条数据
  
  >>> _y = _x[:20]
  
  >>>
  
  >>> print(_y.query)
  
  SELECT "app_event_info"."event_location", COUNT("app_event_info"."id") AS "id__count" FROM "app_event_info" GROUP BY "app_event_info"."event_location" ORDER BY "id__count" DESC LIMIT 20
  
  上边的每一步我们都通过query打印了SQL,确定是我们想要的结果了。需求分析清楚,所有的关键点我们也都知道怎么处理了,那么接下来实现就水到渠成了。
  
  实现代码
  
  URL如下:
  
  from django.urls import path
  
  from django.views.generic.base import TemplateView
  
  from .views import echarts_data
  
  urlpatterns = [
  
  path('echarts/', TemplateView.as_view(template_name='echarts.html'), name='echarts-url'),
  
  path('api/echarts/', echarts_data, name='api-echarts')
  
  ]
  
  因为是前后端分离的,所以我这里用了两个urlecharts和api/echarts
  
  echarts为前台访问地址,对应下边的html代码,通过ajax方式调用后端接口,所以这里直接用了TemplateView,不需要再写额外的view代码
  
  api/echarts为后端API的地址,对应下边的view代码,为前台提供数据接口
  
  前端HTML:
  
  <!DOCTYPE html>
  
  <html>
  
  <head>
  
  <meta charset="utf-8">
  
  <title>ops-coffee</title>
  
  <!-- 引入 echarts.js -->
  
  <script src="www.mingcheng178.com /static/js/jquery.min.js"></script>
  
  <script src=www.chuangshi88.cn"/static/js/echarts/echarts.common.min.js"></script>
  
  </head>
  
  <body>
  
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  
  <div id="main" style="height:400px;"></div>
  
  <script type="text/javascript">
  
  // 基于准备好的dom,初始化echarts实例
  
  var myChart =www.furong157.com echarts.init(document.getElementById('main'));
  
  $.ajax({
  
  type: "get",
  
  url: "/api/echarts",
  
  dataType: "json",
  
  success: function www.dfgjpt.com (data) {
  
  // 指定图表的配置项和数据
  
  var option = {
  
  title: {
  
  left: 'center',
  
  text: 'ops-coffee 运维咖啡吧'
  
  },
  
  tooltip: {},
  
  xAxis: {
  
  data: data.key
  
  },
  
  yAxis: {},
  
  series: [{
  
  name: '数量',
  
  type: 'bar',
  
  data: data.www.gcyl159.com/ value
  
  }]
  
  };
  
  // 使用刚指定的配置项和数据显示图表。
  
  myChart.setOption(option);
  
  },
  
  error: function () {
  
  alert('Error: ajax 请求出错!')
  
  }
  
  });
  
  </script>
  
  </body>
  
  </html>

© 著作权归作者所有

SEOwhywhy
粉丝 8
博文 155
码字总数 342404
作品 0
私信 提问
Django+Echarts画图实例

所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会议记录表,里边有一个字段存放...

运维咖啡吧
2018/11/26
1K
2
Django集成Markdown编辑器【附源码】

专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m...

运维咖啡吧
01/24
38
0
Django开发密码管理表实例【附源码】

  文章及代码比较基础,适合初、中级人员,高手略过      阅读此篇文章你可以:      获取一个Django实现增删改查的案例源码      了解数据加密的使用场景和方法以及如何在Pyt...

SEOwhywhy
2018/12/06
19
0
Unity的动画图和人形动画初探

版权声明:本文所有文章均为原创,原文链接:blog.uwa4d.com,如需转载请联系support@uwa4d.com https://blog.csdn.net/UWA4D/article/details/87172998 这是侑虎科技第504篇文章,感谢作者加...

UWA
02/20
0
0
matlab导入txt数据画图

因为最近需要观察txt保存的一堆数据,则需要使用这些数据画图。 强大的matlab分分钟解决了。 实例 数据:data.txt 步骤: ①打开matlab -> HOME(主页) -> Import Data(导入数据) ②选择data....

Devil-wei
02/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

反编译9.png图片还原

本文链接:https://blog.csdn.net/a1140778530/article/details/10528507 经常反编译apk文件找资源,9.png的文件处理起来很麻烦。 最近使用Ant自动编译打包app时,从别处搜罗来的9.png文件导...

shzwork
18分钟前
4
0
Shell脚本应用 – for、while循环语句

一、for循环语句 在实际工作中,经常会遇到某项任务需要多次执行的情况,而每次执行时仅仅是处理的对象不一样,其他命令相同。例如:根据通讯录中的姓名列表创建系统账号等情况。 当面对各种...

linux-tao
18分钟前
5
0
RPA风潮下企业财务工作模式的变革

RPA(机器人流程自动化)在财务领域的应用,正给企业财务带来前所未有的改变。 前RPA时代,财务领域面临的痛点 在RPA机器人应用之前,企业财务工作进程的推进,主要通过财务人员人工操作或信...

UiBot
23分钟前
5
0
Hive之命令行修改表注释

最近遇到一个需求,在不重建表的情况下,修改表的注释,hive有没有类似关系型数据库的SQL命令来修改呢,找了下,亲测有效,如下List-1 List-1 hive>use your_schemahvie>ALTER TABLE tabl...

克虏伯
23分钟前
5
0
是什么,它的作用是什么

在HTML文档的首部往往会有这么一句话<!DOCTYPE html>,许多时候我们忽视了它的存在,它实际上是一个声明,告诉浏览器用哪种HTML版本的规范来解读HTML文档。 尽管我们不给出这句声明浏览器照样...

前端老手
29分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部