脚本之家，脚本语言编程技术及教程分享平台！
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|

服务器之家 - 脚本之家 - Python - Django显示可视化图表的实践

Django显示可视化图表的实践

2021-10-27 09:03chengqiuming Python

这篇文章主要介绍了Django显示可视化图表的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一 实战

1 Django_lab\urls.py

?
1
2
3
4
5
6
7
8
9
10
# -*- 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中添加图表应用

?
1
2
3
4
5
6
7
8
9
10
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

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

4 views.py

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# -*- 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

  1. <html> 
  2. <head> 
  3. <meta charset="UTF-8" /> 
  4. <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> 
  5. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
  6. <script src="http://code.highcharts.com/highcharts.js"></script> 
  7. </head> 
  8. <body> 
  9. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> 
  10. <script language="JavaScript"> 
  11. $(document).ready(function() { 
  12.    var title = { 
  13.        text: '月平均气温' 
  14.    }; 
  15.    var subtitle = { 
  16.         text: 'Source: runoob.com' 
  17.    }; 
  18.    var xAxis = { 
  19.        categories: ['一月', '二月', '三月', '四月', '五月', '六月' 
  20.               ,'七月', '八月', '九月', '十月', '十一月', '十二月'] 
  21.    }; 
  22.    var yAxis = { 
  23.       title: { 
  24.          text: 'Temperature (\xB0C)' 
  25.       }, 
  26.       plotLines: [{ 
  27.          value: 0, 
  28.          width: 1, 
  29.          color: '#808080' 
  30.       }] 
  31.    }; 
  32.   
  33.    var tooltip = { 
  34.       valueSuffix: '\xB0C' 
  35.    } 
  36.   
  37.    var legend = { 
  38.       layout: 'vertical', 
  39.       align: 'right', 
  40.       verticalAlign: 'middle', 
  41.       borderWidth: 0 
  42.    }; 
  43.   
  44.    var series =  [ 
  45.       { 
  46.          name: 'Tokyo', 
  47.          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 
  48.             26.5, 23.3, 18.3, 13.9, 9.6] 
  49.       }, 
  50.       { 
  51.          name: 'New York', 
  52.          data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
  53.             24.1, 20.1, 14.1, 8.6, 2.5] 
  54.       }, 
  55.       { 
  56.          name: 'Berlin', 
  57.          data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 
  58.             17.9, 14.3, 9.0, 3.9, 1.0] 
  59.       }, 
  60.       { 
  61.          name: 'London', 
  62.          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
  63.             16.6, 14.2, 10.3, 6.6, 4.8] 
  64.       } 
  65.    ]; 
  66.   
  67.    var json = {}; 
  68.   
  69.    json.title = title; 
  70.    json.subtitle = subtitle; 
  71.    json.xAxis = xAxis; 
  72.    json.yAxis = yAxis; 
  73.    json.tooltip = tooltip; 
  74.    json.legend = legend; 
  75.    json.series = series; 
  76.   
  77.    $('#container').highcharts(json); 
  78. }); 
  79. </script> 
  80. </body> 
  81. </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 可视化图表内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/chengqiuming/article/details/84891629

  • django
  • 可视化图表

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2048 　 6006 　 contextlib 　 SLOTS 　 MELIAE 　 FEEDPARSER 　 暂存 　 持久性管理 　 pickle模块 　 THREADING 　 reduce 　 nignx 　 装饰器 　 函数式编程 　 兔子毒药 　 监控文件 　 流量监控 　 Web框架 　 csv.DictReader 　 PIL库 　 高斯模糊 　 wxPython 　 import 　 自定义模块 　 Python开发 　 元类 　 metaclass 　 魔术方法 　 DNSPod 　 动态解析域名 　
    © 2019-2022 脚本之家 | 服务器之家(www.tuohang.net)旗下站点 版权所有关于我们联系我们版权申明网站地图