Django如何显示可视化图表的实践

这篇文章主要介绍Django如何显示可视化图表的实践,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一实战

1Django_lab\urls.py

#-*-coding:utf-8-*-

fromdjango.conf.urlsimporturl,include
fromdjango.contribimportadmin

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-*-
fromdjango.conf.urlsimporturl,include
from.importviews
urlpatterns=[
#折线图的url
url(r'^linediagram/$',views.showlinediagram),
]

4 views.py

#-*-coding:utf-8-*-
fromdjango.shortcutsimportrender
fromdjango.httpimportHttpResponse

frommatplotlib.figureimportFigure
frommatplotlib.backends.backend_aggimportFigureCanvasAgg
frommatplotlib.datesimportDateFormatter
importmatplotlib.pyplotasplt

importrandom
importdatetime

#折线图对应的的模板
defshowlinediagram(request):
returnrender(request,'chart/showlinediagram.html')

5模板showlinediagram.html




Highcharts教程|菜鸟教程(runoob.com)




$(document).ready(function(){ vartitle={ text:'月平均气温' }; varsubtitle={ text:'Source:runoob.com' }; varxAxis={ categories:['一月','二月','三月','四月','五月','六月' ,'七月','八月','九月','十月','十一月','十二月'] }; varyAxis={ title:{ text:'Temperature(\xB0C)' }, plotLines:[{ value:0, width:1, color:'#808080' }] }; vartooltip={ valueSuffix:'\xB0C' } varlegend={ layout:'vertical', align:'right', verticalAlign:'middle', borderWidth:0 }; varseries=[ { 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:'NewYork', 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] } ]; varjson={}; json.title=title; json.subtitle=subtitle; json.xAxis=xAxis; json.yAxis=yAxis; json.tooltip=tooltip; json.legend=legend; json.series=series; $('#container').highcharts(json); });

二测试结果

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

2结果显示结果

以上是“Django如何显示可视化图表的实践”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注恰卡编程网行业资讯频道!

发布于 2021-05-10 20:36:58
分享
海报
177
上一篇:IntelliJ IDEA安装目录和设置目录的示例分析 下一篇:ps如何移动某一块
目录

    推荐阅读

    忘记密码?

    图形验证码