Django显示可视化图表的实践


Posted in Python onMay 10, 2021

一 实战

1 Django_lab\urls.py

# -*- coding: utf-8 -*-
 
from django.conf.urls import url,include
from django.contrib import admin
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 定义图表url
    url(r'^chart/', include('chart.urls')),
]

2 在settings.py中添加图表应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 图表应用
    'chart',
]

3 chart\urls.py

# -*- coding: utf-8 -*-
from django.conf.urls import url,include
from . import views
urlpatterns = [
    # 折线图的url
    url(r'^linediagram/$', views.showlinediagram),
]

4 views.py

# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
 
from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.dates import DateFormatter
import matplotlib.pyplot as plt
 
import random
import datetime
 
# 折线图对应的的模板
def showlinediagram(request):
    return render(request, 'chart/showlinediagram.html')

5 模板showlinediagram.html

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
       text: '月平均气温'
   };
   var subtitle = {
        text: 'Source: runoob.com'
   };
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };
 
   var tooltip = {
      valueSuffix: '\xB0C'
   }
 
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
 
   var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      },
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      },
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      },
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];
 
   var json = {};
 
   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
 
   $('#container').highcharts(json);
});
</script>
</body>
</html>

二 测试结果

1 浏览器输入:http://localhost:8000/chart/linediagram

2 结果显示结果

Django显示可视化图表的实践

三 参考

https://blog.csdn.net/Temanm/article/details/54141759

https://my.oschina.net/jastme/blog/357142

https://www.hcharts.cn/demo/highcharts/

http://www.runoob.com/highcharts/highcharts-configuration-syntax.html

到此这篇关于Django显示可视化图表的实践的文章就介绍到这了,更多相关Django 可视化图表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python写的Tkinter程序屏幕居中方法
Mar 10 Python
Python基于回溯法子集树模板解决数字组合问题实例
Sep 02 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
Apr 23 Python
python下载微信公众号相关文章
Feb 26 Python
Python中使用logging和traceback模块记录日志和跟踪异常
Apr 09 Python
PyQt5 实现给窗口设置背景图片的方法
Jun 13 Python
如何用Python做一个微信机器人自动拉群
Jul 03 Python
Django REST framework 如何实现内置访问频率控制
Jul 23 Python
Django中使用极验Geetest滑动验证码过程解析
Jul 31 Python
python输出决策树图形的例子
Aug 09 Python
Python模拟登录和登录跳转的参考示例
Oct 30 Python
python3实现简单飞机大战
Nov 29 Python
python 中[0]*2与0*2的区别说明
May 10 #Python
Python超简单容易上手的画图工具库推荐
python爬虫请求库httpx和parsel解析库的使用测评
May 10 #Python
Python 中数组和数字相乘时的注意事项说明
May 10 #Python
python 实现的截屏工具
python实现的人脸识别打卡系统
Python词云的正确实现方法实例
You might like
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python仿抖音表白神器
2019/04/08 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python代码中怎么换行
2020/06/17 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
工程负责人任命书
2014/06/06 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
齐云山导游词
2015/02/06 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电