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实现对PPT文件进行截图操作的方法
Apr 28 Python
利用numpy实现一、二维数组的拼接简单代码示例
Dec 15 Python
对Python 数组的切片操作详解
Jul 02 Python
python2 与 pyhton3的输入语句写法小结
Sep 10 Python
python将一组数分成每3个一组的实例
Nov 14 Python
python3.6使用urllib完成下载的实例
Dec 19 Python
详解Python传入参数的几种方法
May 16 Python
python 设置输出图像的像素大小方法
Jul 04 Python
python opencv图片编码为h264文件的实例
Dec 12 Python
利用PyQt中的QThread类实现多线程
Feb 18 Python
Python爬虫爬取糗事百科段子实例分享
Jul 31 Python
Pytorch1.5.1版本安装的方法步骤
Dec 31 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
浅谈Koa服务限流方法实践
2017/10/23 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
Python使用pymysql小技巧
2017/06/04 Python
python字符串常用方法
2018/06/14 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python多线程并发实例及其优化
2019/06/27 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
调解协议书
2014/04/16 职场文书
男女朋友协议书
2014/04/23 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
人民的好儿女观后感
2015/06/18 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android