基于django的数据可视化展现

今天给大家简单分享一下一个基于python的django的框架写的一个数据可视化的项目。

主要涉及技术：django基础，python基础，前端（html，echars）基础。

这个项目自然而然是基于python逻辑语言处理的，因为我们同学在学习python的过程中经常会到用python处理数据并对其经行数据可视化的任务章节，其实我们不借助python的web框架也可以经行数据可视化页面，我们无论使用plt或者echars也都可以基于python来实现，但是你会发现这样的话我们需要一次一次分别点击我们的文件代码或者html，略微繁琐且不美观，但是如果我们基于pythonweb的django框架来写就会发现高效美观许多，因为我们只需要启动django项目便可实现项目中含有的可视化页面来展现。

如我们拿两张图来经行简单的比较：

 如这张图：我是在pycharm编译器写的，数据我用python语言处理完毕之后用echars做的可视化，我们如果要预览页面的话需要一个一个点击打开html页面经行查看，但是我们再看下面这张使用django框架写的，如下图示：

 我们只需要启动django项目便可以使用导航栏目直达html页面预览，当然这一步也是django的处理核心（MVC模式），在url路由指定页面，在view里写入方法函数即可。

另外在此说明一下我这里（本次）写的项目是在kaggle数据拿的一个csv文件经行数据简单清洗可视化的，大家也可以用数据来练手，如果数据想和数据库sql有联系的话，那就要在models文件里声明字段类型，然后用到django的ORM架构来实现，也很容易的，细节就在不再详细说明了，本次博客旨在引导大家对django可视化的优点和了解，下次我将会具体分析讲解如何搭建django环境以及写一个简单的django项目。

接下来我把项目结构和代码贴出来：

代码（主要分享部分结构）：

这是view方法类的合集，进入页面执行方法：

from django.shortcuts import render

# Create your views here.
def kaggledata1(request):
    return render(request, "kaggledata1.html")
def kaggledata2(request):
    return render(request, "kaggledata2.html")
def kaggledata3(request):
    return render(request, "kaggledata3.html")

这是url路由，进入网址执行方法： 

from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('kaggle/data1/', views.kaggledata1),
    path('kaggle/data2/', views.kaggledata2),
    path('kaggle/data3/', views.kaggledata3),


]

这时数据处理的部分代码：

# 可视化展现
# 各频道包含的节目数量占比
# 盘点最受欢迎的前10节目名称+查看受众最低的频道ID
encodings='utf-8'
import csv
import json
filename = 'kaggledata.csv'
selected_field_city = 'video_id'
selected_values_city = []
with open(filename, 'r', encoding='utf-8') as csv_file:
    csv_reader = csv.DictReader(csv_file)
    for row in csv_reader:
        selected_values_city.append(row.get(selected_field_city))
distData = {}
for job in selected_values_city:
    if distData.get(job, -1) == -1:
        distData[job] = 1
    else:
        distData[job] += 1
result = []
for k, v in distData.items():
    result.append({
        "name": k,
        'value': v
    })


data = result
json_data1 = json.dumps(data)
html_template = '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Example</title>
    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 定义一个容器来呈现图表 -->
    <div id="chart1" style="height:550px;"></div>

    <!-- 定义JavaScript代码来配置和渲染图表 -->
    <script type="text/javascript">
        // 将JSON字符串解析为JavaScript对象
        var data = JSON.parse('{}');
        // 配置图表
                option = {{
  title: {{
    left: 'center'
  }},
  tooltip: {{
    trigger: 'item'
  }},
  legend: {{
width:1000,
    bottom: 20,
    left: 20,
  }},
  series: [
    {{
      type: 'pie',
      radius: '65%',
      center: ['80%', '50%'],
      selectedMode: 'single',
      data: data,
      emphasis: {{
        itemStyle: {{
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }}
      }}
    }}
  ]
}};

        // 创建图表并呈现到容器中
        var chart = echarts.init(document.getElementById('chart1'));
        chart.setOption(option);
    </script>
</body>
</html>
'''

# 格式化HTML模板，将数据插入到JavaScript代码中
html = html_template.format(json_data1)

# 将HTML写入到文件中
with open('videoid_count.html', 'w') as f:
    f.write(html)
##############################################################################################################
# 盘点最受你欢迎的前20频道节目合集
encodings='utf-8'
import csv
import json
filename = 'kaggledata.csv'
selected_field = 'channelTitle'
selected_field_salary = 'view_count'
selected_values = []
selected_values_salary=[]
with open(filename, 'r', encoding='utf-8') as csv_file:
    csv_reader = csv.DictReader(csv_file)
    for row in csv_reader:
        selected_values.append(row.get(selected_field))
        selected_values_salary.append(row.get(selected_field_salary))
dic={}
for k,v in zip(selected_values, selected_values_salary):    # 用zip()函数打包两个列表中的元素
    dic[k] = int(v)
print(dic)
dic1={}
for k, v in sorted(dic.items(), key=lambda k: k[1], reverse=True)[:20]:
    print(f"'{k}' has a value of {v}")
    dic1[k]=v
listx=[]
listy=[]
for k,v in dic1.items():
    listx.append(k)
    listy.append(v)

data={"x":listx,"y":listy}
# 将数据转换为JSON字符串
json_data = json.dumps(data)
# 定义HTML文件模板
html_template = '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Example</title>
    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 定义一个容器来呈现图表 -->
    <div id="chart" style="width: 600px;height:400px;"></div>

    <!-- 定义JavaScript代码来配置和渲染图表 -->
    <script type="text/javascript">
        // 将JSON字符串解析为JavaScript对象
        var data = JSON.parse('{}');
        // 配置图表
        option = {{
  xAxis: {{
    type: 'category',
    data: data.x,
    axisLabel: { interval: 0, rotate: 30 }

  }},
  yAxis: {{
    type: 'value'
  }},
  series: [
    {{
      data: data.y,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {{
        color: 'rgba(180, 180, 180, 0.2)'
      }}
    }}
  ]
}};
        // 创建图表并呈现到容器中
        var chart = echarts.init(document.getElementById('chart'));
        chart.setOption(option);
    </script>
</body>
</html>
'''

# 格式化HTML模板，将数据插入到JavaScript代码中
html = html_template.format(json_data)

# 将HTML写入到文件中
with open('likechannel.html', 'w') as f:
    f.write(html)
#######################################################################################################################
# 盘点最不受众的10大频道节目
selected_field = 'channelTitle'
selected_field_salary = 'view_count'
selected_values = []
selected_values_salary=[]
with open(filename, 'r', encoding='utf-8') as csv_file:
    csv_reader = csv.DictReader(csv_file)
    for row in csv_reader:
        selected_values.append(row.get(selected_field))
        selected_values_salary.append(row.get(selected_field_salary))
dic={}
for k,v in zip(selected_values, selected_values_salary):    # 用zip()函数打包两个列表中的元素
    dic[k] = int(v)
print(dic)
dic1={}
for k, v in sorted(dic.items(), key=lambda k: k[1], reverse=False)[:20]:
    print(f"'{k}' has a value of {v}")
    dic1[k]=v
print(dic1)
print("####################over")
listx=[]
listy=[]
for k,v in dic1.items():
    listx.append(k)
    listy.append(v)

data={"x":listx,"y":listy}
# 将数据转换为JSON字符串
json_data = json.dumps(data)
# 定义HTML文件模板
html_template = '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Example</title>
    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 定义一个容器来呈现图表 -->
    <div id="chart" style="width: 600px;height:400px;"></div>

    <!-- 定义JavaScript代码来配置和渲染图表 -->
    <script type="text/javascript">
        // 将JSON字符串解析为JavaScript对象
        var data = JSON.parse('{}');
        // 配置图表
        option = {{
  xAxis: {{
    type: 'category',
    data: data.x,
    axisLabel: { interval: 0, rotate: 30 }

  }},
  yAxis: {{
    type: 'value'
  }},
  series: [
    {{
      data: data.y,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {{
        color: 'rgba(180, 180, 180, 0.2)'
      }}
    }}
  ]
}};
        // 创建图表并呈现到容器中
        var chart = echarts.init(document.getElementById('chart'));
        chart.setOption(option);
    </script>
</body>
</html>
'''

# 格式化HTML模板，将数据插入到JavaScript代码中
html = html_template.format(json_data)

# 将HTML写入到文件中
with open('dislikechannel.html', 'w') as f:
    f.write(html)

 

项目结构和效果图： 

 

 

 

 好啦，今天的分享就到此了，如果需要这个项目的同学可以私信我，我会把源代码文件（含csv数据）一起打包发给你，另外如果需要django可视化项目作业的同学也可以私信我。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/34950.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CSDN创作常用操作说明

CSDN创作常用操作说明

CSDN创作 目录标题文本样式列表图片连接代码表格UML图Mermaid流程图Flowchart流程图classDiagram类图快捷键 目录 创建目录的方式&#xff1a; [TOC](目录)标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题文本样式 **加粗文本** ~…
阅读更多...
第一章 Android 基础--开发环境搭建

第一章 Android 基础--开发环境搭建

文章目录 1.Android 发展历程2.Android 开发机器配置要求3.Android Studio与SDK下载安装4.创建工程与创建模拟器5.观察App运行日志6.环境安装可能会遇到的问题7.练习题 本专栏主要在B站学习视频&#xff1a; B站Android视频链接 本视频范围&#xff1a;P1—P8 1.Android 发展历…
阅读更多...
Springboot整合mybatisplus实战

Springboot整合mybatisplus实战

Springboot整合mybatisplus&#xff0c;纯后端&#xff0c;验证结果是通过postman调用的&#xff0c;记录一下 1、建表语句以及初始化数据脚本 CREATE TABLE tbl_book (id int NOT NULL AUTO_INCREMENT,type varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT…
阅读更多...
Nginx 安装 headers-more-nginx-module 扩展，隐藏www服务信息

Nginx 安装 headers-more-nginx-module 扩展，隐藏www服务信息

通过Ubuntu APT安装的Nginx默认是没有扩展的&#xff0c;所以需要手动安装才可以。本文主要分享如何在 APT 安装 Nginx 的环境中安装 headers-more-nginx-module 扩展&#xff0c;隐藏www服务信息。 1、起因 今天收到一个高危漏洞的警告&#xff0c;该漏洞大意为&#xff1a;…
阅读更多...
Kubernetes 服务发布方式（蓝绿发布、灰度发布和滚动发布）

Kubernetes 服务发布方式（蓝绿发布、灰度发布和滚动发布）

目录 一、三种常用的项目发布方式1.1 蓝绿发布1.2 灰度发布&#xff08;金丝雀发布&#xff09;1.3 滚动发布 二、金丝雀的方式升级发布实验三、总结 一、三种常用的项目发布方式 应用程序升级面临最大挑战是新旧业务切换&#xff0c;将软件从测试的最后阶段带到生产环境&…
阅读更多...
阿里云国际站：为什么当初很多人不看好的阿里云做起来了？

阿里云国际站：为什么当初很多人不看好的阿里云做起来了？

标题&#xff1a;为什么当初很多人不看好的阿里云做起来了&#xff1f; 　　为什么人们曾经对阿里云的前景充满疑虑&#xff0c;而它现如今却成就了一番事业&#xff1f;这是个我们应当深思的议题。让我们共同走进阿里云的成长之旅&#xff0c;寻求答案的启示。 　　在阿里云初…
阅读更多...
hive关联键 NULL 关联 NULL

hive关联键 NULL 关联 NULL

结论&#xff1a;关联键 NULL NULL时&#xff0c;不进行关联&#xff0c;即两表关联失败 案例如下&#xff1a; 表A 表B 表A 关联 表B selecta.id as a_id,a.name as a_name,b.id as b_id,b.name as b_name from表A a left join表B b on a.id b.id …
阅读更多...
适用于Vue 3的最佳开源分页库

适用于Vue 3的最佳开源分页库

从头开始实现分页可能是一项耗时的任务&#xff0c;需要大量的精力和资源。幸运的是&#xff0c;有几个伟大的开源库可以简化这个过程&#xff0c;提高你的效率。使用分页库可以节省你的时间和精力&#xff0c;使你能够专注于建立你的应用程序的其他更重要的功能。 在这篇文章…
阅读更多...
分布式负载均衡 Ribbon

分布式负载均衡 Ribbon

一、Ribbon简介 是Netfix发布的负载均衡&#xff0c;Eureka一般配合Ribbon进行使用&#xff0c;基于HTTP和TCP的客户端负载均衡工具。 只有负载均衡的能力&#xff0c;不具有发送请求的能力&#xff0c;要配合服务通信组件。 RestTemplate 针对各种类型的 HTTP 请求都提供了相…
阅读更多...
《Java核心卷1》怎么样？读1，2章草记 | 第12版

《Java核心卷1》怎么样？读1，2章草记 | 第12版

文章目录 《Java核心技术卷 一》第一章 概述第二章 Java编程环境 图书推荐 《Java核心技术卷 一》 第一章 概述 前言&#xff1a;本书与一些”0基础入门“的书定位感觉是不太一样的&#xff0c;可能就像书名所说&#xff0c;是”核心技术“叭。书中经常将Java语言与 c 进行对比…
阅读更多...
什么是内存溢出，什么是内存泄漏？

什么是内存溢出，什么是内存泄漏？

文章目录 一、什么是内存溢出&#xff1f;二、什么是内存泄漏&#xff1f;三、如何避免&#xff1f; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、什么是内存溢出&#xff1f; 假设我们 JVM 中可用的内存空间只剩下 3M&#xff0c;但是我们要创…
阅读更多...
[PyTorch][chapter 41][卷积网络实战-LeNet5]

[PyTorch][chapter 41][卷积网络实战-LeNet5]

前言 这里结合前面学过的LeNet5 模型&#xff0c;总结一下卷积网络搭建&#xff0c;训练的整个流程 目录&#xff1a; 1&#xff1a; LeNet-5 2: 卷积网络总体流程 3&#xff1a; 代码 一 LeNet-5 LeNet-5是一个经典的深度卷积神经网络&#xff0c;由Yann LeCun在1998年提…
阅读更多...
虹科教程 | Linux网络命名空间与虹科PROFINET协议栈的GOAL中间件结合使用

虹科教程 | Linux网络命名空间与虹科PROFINET协议栈的GOAL中间件结合使用

前言 PROFINET是由PI推出的开放式工业以太网标准&#xff0c;它使用TCP/IP等IT标准&#xff0c;并由IEC 61158和IEC 61784 标准化&#xff0c;具有实时功能&#xff0c;并能够无缝集成到现场总线系统中。凭借其技术的开放性、灵活性和性能优势&#xff0c;PROFINET可应用于过程…
阅读更多...
动态规划-杨辉三角

动态规划-杨辉三角

动态规划-杨辉三角 1 [杨辉三角]1.1 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。1.2 示例1.2.1 示例 1:1.2.2 示例 2:1.2.3 提示: 1.3 算法解决方法1.3.1 算法解题思路1.3.1.1 确定状态1.3.1.2 转移方程1.3.1.3 初始条件以及边界情况1.3.1.4 计算顺…
阅读更多...
【CANoe示例分析】PythonCAPL_Call_Demo

【CANoe示例分析】PythonCAPL_Call_Demo

该工程由Vector官方提供，目的是演示Python如何调用CAPL文件里的自定义函数。里面除了CANoe工程文件外，还有python文件和CAPL： 提供了两种CANoe版本的工程文件，选择其中一种打开即可。 首先我们要确定CAPL文件AnalyseFunctions.can在CANoe工程内的什么地方？首先想到的是Si…
阅读更多...
sqlserver收缩数据库

sqlserver收缩数据库

1.收缩数据库 首先收缩的前提是需要有可用空间如下图&#xff0c;没有可用空间无法收缩数据库 2.减小数据库大小 通过链接: 查询数据库中各表的大小 如果查询的比较大而且无用的数据可以直接把表结构给拿出来&#xff0c;然后删除该表空间就直接释放出来了 3.收缩文件 我…
阅读更多...
2023年 vue使用腾讯地图搜索、关键字输入提示、地点显示

2023年 vue使用腾讯地图搜索、关键字输入提示、地点显示

先看结果 vue 在public文件下的index.html文件中引入&#xff1a; <script src"//map.qq.com/api/js?v2.exp&key你自己的key"></script><script src"https://map.qq.com/api/gljs?v1.exp&librariesservice&key你自己的key"&…
阅读更多...
计算机网络编程 | 多路I/O转接服务器

计算机网络编程 | 多路I/O转接服务器

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…
阅读更多...
Django框架-6

Django框架-6

向服务器传参 通过url - path传参 path(articles/<int:year>/<int:month>/<slug:slug>/, views.article_detail),查询字符串方式传参 http://localhost:8000?key1value1&key2value2 ;&#xff08;body&#xff09;请求体的方式传参&#xff0c;比如文…
阅读更多...
vue2【监听器】

vue2【监听器】

目录 1&#xff1a;监听器的作用 2&#xff1a;语法格式 3&#xff1a;示例 4&#xff1a;应用场景 4.1&#xff1a;axios发送请求 4.2&#xff1a;JQuery发送请求 5&#xff1a;监听器的格式&#xff1a; 5.1&#xff1a;函数格式的监听器&#xff1a; 缺点一&#x…
阅读更多...
最新文章

Copyright @ 2022~2023