Django显示可视化图表的实践
作者:chengqiuming 发布时间:2023-04-13 02:42:38
标签:Django,可视化图表
一 实战
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 结果显示结果
三 参考
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
来源:https://blog.csdn.net/chengqiuming/article/details/84891629
0
投稿
猜你喜欢
- 在python开发的过程中,经常会遇到需要打印各种信息。海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性。这时候,如
- 赋值:其实就是对象的引用(相当于取别名)。浅拷贝(copy):拷贝父对象,不会拷贝对象内部的子对象,会引用子对象。深拷贝(deepcopy)
- SvnPeer.php <?php /** * * This class for execute the external progr
- 如果原来没有使用过正则表达式,那么可能对这个术语和概念会不太熟悉。不过,它们并不是您想象的那么新奇。请回想一下在硬盘上是如何查找文件的。您肯
- Internet Explorer 9 Platform 1.9.7916.6000 Preview 4微软今天公布了IE9 Platfor
- 若数据库是sql server,我以前为了返回插入记录的id,一般是用下面的存储过程:程序代码 create procedure&
- 前言:数据库是大多数 Web 应用的基础设施,只要想把数据存储下来,就离不开数据库,下面将一起学习一下如何给 Flask 应用添加数据库支持
- <script type="text/javascript"> var params&n
- 要写爬虫爬取大量的数据,就会面临ip被封的问题,虽然可以通过设置延时的方法来延缓对网站的访问,但是一旦访问次数过多仍然会面临ip被封的风险,
- F.avg_pool1d()数据是三维输入input维度: (batch_size,channels,width)channel可以看成高度
- 最近有个需求,用多线程比较合适,但是我需要每个线程的返回值,这就需要我在threading.Thread的基础上进行封装import thr
- HTML与CSS在Flash中的应用:不小心看到同事Den在弄个小东西:在Flash里使用HTML和CSS,代码是这样:var m
- 任何语言都离不开字符,那就会涉及对字符的操作,尤其是脚本语言更是频繁,不管是生产环境还是面试考验都要面对字符串的操作。python的字符串操
- 这篇文章主要介绍了简单了解Python3 bytes和str类型的区别和联系,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 话不多说,小工具需求如下: 功能需求 -- 电脑开机后自动执行时间同步 非功能需求 -- 安装执行简单,无需安装额外环境一、代码实现基于以上
- 前几天看到一个python框架win10toast,它可以用来做windows的消息通知功能。通过设定通知的间隔时间来实现一些事件通知的功能
- 前言在开发工作中,我们经常需要用到日期与时间,如:作为日志信息的内容输出计算某个功能的执行时间用日期命名一个日志文件的名称记录或展示某文章的
- 1、二者的区别apply(): 非异步(子进程不是同时执行的),堵塞主进程。它的非异步体现在:一个一个按顺序执行子进程, 子进程不
- 在应用程序的开发中,有些输入信息是动态的,比如我们要注册一个员工的工作经历,比如下图如果做成死的,只能填写三个,如果是四个呢?或者更多呢,那