当前位置: 首页 > news >正文

Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)

专栏系列:Django学习教程

前言

  • highchart,国外。

  • echarts,国内。

本项目集成 hightchart和echarts图表库实现数据统计功能。

包括:折线图,柱状图,饼图和数据集图。

效果图

echats

4448ad3067f245d2930d6bc8ce2ff1d7.png

 Highcharts

aea9a39644df43b7a18386e31238dd0a.png

源代码

 编写模板(Template)

chart_html.html

echarts方案:通过jQuery自带ajax向服务端发送请求获取折线图、柱状图、饼图数据。

注意:需要去echats官方下载echarts.js文件并引入到模板。

{% extends 'layout.html' %}
{% load static %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折线图</div><div class="panel-body"><div id="m1" style="width: 100%;height: 300px"></div></div></div><div class="row"><div class="col-sm-8"><div class="panel panel-default"><div class="panel-heading">柱状图</div><div class="panel-body"><div id="m2" style="width: 100%;height: 400px;"></div></div></div></div><div class="col-sm-4"><div class="panel panel-default"><div class="panel-heading">饼图</div><div class="panel-body"><div id="m3" style="width: 100%;height: 400px;"></div></div></div></div></div></div>
{% endblock %}{% block js %}<script src="{% static 'js/echarts.js' %}"></script><script type="text/javascript">$(function () {initLine();initBar();initPie();})/*** 初始化折线图*/function initLine() {var myChart = echarts.init(document.getElementById('m1'));var option = {title: {text: '分公司业绩图',left: "center",},tooltip: {trigger: 'axis'},legend: {data: [],bottom: 0},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: []};$.ajax({url: '/chart/line/',type: "get",dataType: "JSON",success: function (res) {if (res.status) {option.legend.data = res.data.legend;option.xAxis.data = res.data.x_axis;option.series = res.data.series_list;myChart.setOption(option);}}})}/*** 初始化柱状图*/function initBar() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('m2'));// 指定图表的配置项和数据var option = {title: {text: '员工业绩阅读汇总信息',textAlign: "auto",left: "center",},tooltip: {},legend: {data: [],  // 后台获取bottom: 0},xAxis: {data: []  // 后台获取},yAxis: {},series: []  // 后台获取};$.ajax({url: "/chart/bar/",type: "get",dataType: "JSON",success: function (res) {// 将后台返回的数据,更新到option中。if (res.status) {option.legend.data = res.data.legend;option.xAxis.data = res.data.x_axis;option.series = res.data.series_list;// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}}})}/*** 初始化饼状图*/function initPie() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('m3'));var option = {title: {text: '部门人数占比',subtext: 'Johnny分公司',left: 'center'},tooltip: {trigger: 'item'},legend: {bottom: 0},series: [{name: '预算',type: 'pie',radius: '50%',data: [{value: 1048, name: 'IT部门'},{value: 735, name: '运营'},{value: 580, name: '新媒体'},],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};$.ajax({url: "/chart/pie/",type: "get",dataType: "JSON",success: function (res) {if (res.status) {option.series[0].data = res.data;myChart.setOption(option);}}})}</script>
{% endblock %}

highcharts.html

highcharts由于是国外网站非常慢,我这里使用CDN直接远程link hightcharts.js文件。

{% extends 'layout.html' %}{% block content %}<div class="container"><div id="m1" style="width: 100%;height:400px;"></div></div>
{% endblock %}{% block js %}<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script><script>// 图表配置var options = {chart: {type: 'column'},title: {text: '月平均降雨量'},subtitle: {text: '数据来源: WorldClimate.com'},xAxis: {categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],crosshair: true},yAxis: {min: 0,title: {text: '降雨量 (mm)'}},tooltip: {// head + 每个 point + footer 拼接成完整的 tableheaderFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {borderWidth: 0}},series: [{name: '东京',data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}, {name: '纽约',data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]}, {name: '伦敦',data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]}, {name: '柏林',data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]}]};// 图表初始化函数var chart = Highcharts.chart('m1', options);</script>{% endblock %}

编写视图函数

charts.py

 里面包含echarts和highcharts的函数。

from django.shortcuts import render
from django.http import JsonResponsedef chart_list(request):""" 数据统计页面 """return render(request, 'chart_list.html')def chart_bar(request):""" 构造柱状图的数据 """# 数据可以去数据库中获取legend = ["Smith", "Johnny"]series_list = [{"name": 'Smith',"type": 'bar',"data": [15, 20, 36, 10, 10, 10]},{"name": 'Johnny',"type": 'bar',"data": [45, 10, 66, 40, 20, 50]}]x_axis = ['1月', '2月', '4月', '5月', '6月', '7月']result = {"status": True,"data": {'legend': legend,'series_list': series_list,'x_axis': x_axis,}}return JsonResponse(result)def chart_pie(request):""" 构造饼图的数据 """db_data_list = [{"value": 2048, "name": 'IT部门'},{"value": 1735, "name": '运营'},{"value": 580, "name": '新媒体'},]result = {"status": True,"data": db_data_list}return JsonResponse(result)def chart_line(request):legend = ["上海", "广西"]series_list = [{"name": '上海',"type": 'line',"stack": 'Total',"data": [15, 20, 36, 10, 10, 10]},{"name": '广西',"type": 'line',"stack": 'Total',"data": [45, 10, 66, 40, 20, 50]}]x_axis = ['1月', '2月', '4月', '5月', '6月', '7月']result = {"status": True,"data": {'legend': legend,'series_list': series_list,'x_axis': x_axis,}}return JsonResponse(result)def highcharts(request):""" highcharts示例 """return render(request, 'highcharts.html')from django.forms import ModelForm, Form
from django import forms
from app01 import models# class TTModelForm(Form):
#     name = forms.CharField(label="用户名")
#     ff = forms.FileField(label="文件")
#
#
# def tt(request):
#     if request.method == "GET":
#         form = TTModelForm()
#         return render(request, 'change.html', {"form": form})
#     form = TTModelForm(data=request.POST, files=request.FILES)
#     if form.is_valid():
#         print(form.cleaned_data)
#     return render(request, 'change.html', {"form": form})class TTModelForm(ModelForm):class Meta:model = models.XXfields = "__all__"def tt(request):instance = models.XX.objects.all().first()if request.method == "GET":form = TTModelForm(instance=instance)return render(request, 'tt.html', {"form": form})form = TTModelForm(data=request.POST, files=request.FILES)if form.is_valid():form.save()return render(request, 'tt.html', {"form": form})

配置路由

    # 数据统计path('chart/list/', chart.chart_list),path('chart/bar/', chart.chart_bar),path('chart/pie/', chart.chart_pie),path('chart/line/', chart.chart_line),path('chart/highcharts/', chart.highcharts),

如果需要完整源码可以评论区给我留言。

如果本文对你有帮助,记得点赞关注,你的支持是我最大的动力!

相关文章:

Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)

专栏系列&#xff1a;Django学习教程 前言 highchart&#xff0c;国外。 echarts&#xff0c;国内。 本项目集成 hightchart和echarts图表库实现数据统计功能。 包括&#xff1a;折线图&#xff0c;柱状图&#xff0c;饼图和数据集图。 效果图 echats Highcharts 源代码…...

【机器学习 西瓜书】期末复习笔记整理

一些杂点&#xff1a; 测试集如何归一化&#xff1f; —— 不是用测试集的均值和标准差&#xff0c;而是用训练集的&#xff01; 机器学习&#xff1a; 对计算机一部分数据进行学习&#xff0c;然后对另外一些数据进行预测与判断。 参考计算例题&#xff1a; 机器学习【期末复习…...

回归预测 | Matlab基于SO-GRU蛇群算法优化门控循环单元的数据多输入单输出回归预测

回归预测 | Matlab基于SO-GRU蛇群算法优化门控循环单元的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SO-GRU蛇群算法优化门控循环单元的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SO-GRU蛇群算法优化门控循环单元的数…...

自然语言处理实战项目25-T5模型和BERT模型的应用场景以及对比研究、问题解答

大家好,我是微学AI,今天给大家介绍一下自然语言处理实战项目25-T5模型和BERT模型的应用场景以及对比研究、问题解答。T5模型和BERT模型是两种常用的自然语言处理模型。T5是一种序列到序列模型,可以处理各种NLP任务,而BERT主要用于预训练语言表示。T5使用了类似于BERT的预训…...

分布式搜索——Elasticsearch

Elasticsearch 文章目录 Elasticsearch简介ELK技术栈Elasticsearch和Lucene 倒排索引正向索引倒排索引正向和倒排 ES概念文档和字段索引和映射Mysql与Elasticsearch 安装ES、Kibana安装单点ES创建网络拉取镜像运行 部署kibana拉取镜像部署 安装Ik插件扩展词词典停用词词典 索引…...

用python实现调用nosql

要使用Python调用NoSQL数据库&#xff0c;您需要使用适当的Python库。以下是使用Python调用MongoDB和Redis两个流行的NoSQL数据库的示例&#xff1a; 调用MongoDB 要使用Python调用MongoDB&#xff0c;您需要安装pymongo库。您可以使用以下命令在终端或命令提示符中安装它&…...

setTimeout和setInterval定时器的返回值

nodejs中定时器返回Timer对象,window中定时器返回number,所以可以使用ReturnType预定义类型推断—或者使用window.setInterval代替setInterval https://mybj123.com/13153.html...

C/C++指针

指针&#xff08;pointer&#xff09;是C/C语言中的一种数据类型。指针与int、char等数据类型相似&#xff0c;都是在内存中开辟相应类型的数据区域使用&#xff0c;不同的是int存储的是整数值&#xff0c;而指针存储的是内存地址。指针是在内存中开辟指针类型的区域存储内存地…...

2024 基于 Rust 的 linter 工具速度很快

2024 年 Web 工具的一大趋势是使用 Rust 重写现有工具。Rust 是一种出色的编程语言&#xff0c;能生成运行速度惊人的二进制文件&#xff0c;且与其它 Web 工具的互操作性极佳&#xff0c;这得益于 WebAssembly 的帮助。swc 和 Turbopack 等工具的速度提升为快速开发体验带来了…...

JWT相关问题及答案(2024)

1、什么是 JWT&#xff0c;它通常用于什么目的&#xff1f; JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;用于在不同实体之间安全地传输信息。它由三个部分组成&#xff1a;头部&#xff08;Header&#xff09;、载…...

Linux例行性工作 at和crontab命令

1&#xff0c;例行性工作 例行性工作 —— 在某一时刻&#xff0c;必须要做的事情 —— 定时任务 &#xff08;比如&#xff1a;闹钟&#xff09; 例行性工作分为两种&#xff1a;“单一的例行性工作 at”和“循环的例行性工作 crontab” 2&#xff0c;单一执行的例行性工作 …...

cookie共享和session共享实例演示

1、cookie共享实例 1.test1.share.com/index.php setcookie(dangqian, value, [domain > test1.share.com]); setcookie(gen, value, [domain > share.com]);2、test2.share.com/index.php $cookies $_COOKIE; // 打印所有Cookie的名称和值 foreach ($cookies as $n…...

设计模式之开闭原则:如何优雅地扩展软件系统

在现代软件开发中&#xff0c;设计模式是解决常见问题的最佳实践。其中&#xff0c;开闭原则作为面向对象设计的六大基本原则之一&#xff0c;为软件系统的可维护性和扩展性提供了强大的支持。本文将深入探讨开闭原则的核心理念&#xff0c;以及如何在实际项目中运用这一原则&a…...

Python Pandera 用于数据验证和清洗:是一个强大的工具用起来

今天为大家分享一个非常好用的 Python 库 - pandera。 Github地址&#xff1a;https://github.com/unionai-oss/pandera 在数据科学和数据分析中&#xff0c;数据的质量至关重要。不良的数据质量可能导致不准确的分析和决策。为了确保数据的质量&#xff0c;Python Pandera 库…...

英诺赛科推出BMS方案,搭载100V双向导通VGaN

BMS 俗称电池保姆或电池管家&#xff0c;主要是为了智能化管理及维护各个电池单元&#xff0c;防止电池出现过充电和过放电&#xff0c;保障电池安全使用的同时延长使用寿命。 当前市面上出现的电池管理系统大多数采用 Si MOS&#xff0c;由于 Si MOSFET 具有寄生二极管&#x…...

如何用Mac工具制作“苹果高管形象照”

大伙儿最近有没有刷到“苹果高管形象照”风格&#xff0c;详细说来就是&#xff1a; 以苹果官网管理层简介页面中&#xff0c;各位高管形象照为模型&#xff0c;佐以磨皮、美白、高光等修图术&#xff0c;打造的看上去既有事业又有时间有氧的证件照&#xff0c;又称“苹…...

回环检测算法:Stable Trangle Descriptor

回环检测是指检测传感器的两次测量&#xff08;如图像、激光雷达扫描&#xff09;是否发生在同一场景&#xff0c;它是对于SLAM问题至关重要。基于激光雷达的回环检测应该满足如下要求&#xff1a; 无论视点如何变化&#xff0c;回环检测方法应该实现旋转和平移不变性&#xf…...

MetaGPT入门(二)

接着MetaGPT入门&#xff08;一&#xff09;&#xff0c;在文件里再添加一个role类 class SimpleCoder(Role):def __init__(self,name:str"Alice",profile:str"SimpleCoder",**kwargs):super().__init__(name,profile,**kwargs)self._init_actions([Write…...

AI嵌入式K210项目(4)-FPIOA

文章目录 前言一、FPIOA是什么&#xff1f;二、FPIOA代码分析总结 前言 磨刀不误砍柴工&#xff0c;在正式开始学习之前&#xff0c;我们先来了解下K210自带的FPIOA&#xff0c;这个概念可能与我们之前学习STM32有很多不同&#xff0c;STM32每个引脚都有特定的功能&#xff0c…...

FPGA开发设计

一、概述 FPGA是可编程逻辑器件的一种&#xff0c;本质上是一种高密度可编程逻辑器件。 FPGA的灵活性高、开发周期短、并行性高、具备可重构特性&#xff0c;是一种广泛应用的半定制电路。 FPGA的原理 采用基于SRAM工艺的查位表结构&#xff08;LUT&#xff09;&#xff0c;…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...