Django使用echarts进行可视化展示的实践
本文以学生成绩折线图展示为例
条件准备
- 电脑上有myslq数据库
- 有 echarts 的 js 文件
连接mysql
# settings.py 文件
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
# mysql 数据库名
'NAME': 'chaochao',
# mysql 登陆用户名
'USER': 'root',
# myslq 登陆密码
'PASSWORD': 'chaochao666',
'HOST': '',
'PORT': '',
}
}
Django 连接 mysql 数据库教程在其他文章中，这里不再细说
Django连接mysql数据库文章地址：https://www.jb51.net/article/176066.htm
导入数据
可以直接在 mysql 数据库中添加数据，也可以使用超级用户在 admin 管理页面中添加数据
# models.py 文件
class Person(models.Model):
# 姓名 str类型
name = models.CharField(max_length=20,verbose_name='姓名')
# 年龄 int型
age=models.IntegerField(verbose_name='年龄')
# 成绩 float类型
score = models.FloatField(verbose_name='成绩')
数据库内容：
使用echarts可视化展示
设置静态文件目录（即 static 目录）
# settings.py 文件 STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
创建如下目录结构：
js 目录中为 echarts的 js 文件，大家可以在 echarts官网下载自己需要的版本
css 目录中为 展示页面用到的 css 文件
在 echarts 官网找到想展示的实例代码
这里使用的折线图的官网地址为：https://echarts.apache.org/examples/zh/editor.html?c=line-simple
实例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
index.css 文件内容：
#chart{
height: 500px;
width: 500px;
}
echarts 展示的图表需要和 html 中的 div 元素 联系起来，并且该 div 元素必须指定 height 和 width 属性
index.html 文件内容
现在使用的 echarts 官网实例中的静态数据，下面将修改为使用mysql数据库中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个django展示页面</title>
<link rel="stylesheet" href="/static/css/index.css" rel="external nofollow" >
<script src="/static/js/echarts.min.js"></script>
</head>
<body>
<h1>学生成绩简单可视化</h1>
<div id="chart"></div>
<script>
{#初始化 echarts 对象#}
var mychart = echarts.init(document.getElementById('chart'));
{#可视化展示选项#}
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
{#将 echarts对象与展示选项结合起来#}
mychart.setOption(option);
</script>
</body>
</html>
现在使用的静态数据，先来看一下页面效果
已经可以看到图表了
现在，我们来修改为 myslq 数据库中的数据
首先，编写 views.py 文件，将数据库中的数据传到前端页面中
from django.shortcuts import render
from .models import Person
# Create your views here.
def index(request):
# 查询出Person对象信息，也就是数据表中的所有数据
# 一行数据就是一个对象，一个格子的数据就是一个对象的一个属性值
objs = Person.objects.all()
# locals函数可以将该函数中出现过的所有变量传入到展示页面中，即index.html文件中
return render(request,'index.html',locals())
修改 index.html 页面，引用数据库中的信息
只需要修改了 js 内容即可，以下为 script标签中的内容
<script>
{#初始化 echarts 对象#}
var mychart = echarts.init(document.getElementById('chart'));
{#首先，声明两个 javascript 的数组#}
var series_data = [];
var xAxis_data = [];
{#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
{% for stu in objs %}
series_data.push({{ stu.score }})
xAxis_data.push({{ stu.name}})
{% endfor %}
{#可视化展示选项#}
var option = {
xAxis: {
type: 'category',
{#将x轴坐标修改为数据库中的学生姓名#}
data: xAxis_data
},
yAxis: {
type: 'value'
},
series: [{
{#将y轴的数据修改为数据库中学生的成绩，即score#}
data: series_data,
type: 'line'
}]
};
{#将 echarts对象与展示选项结合起来#}
mychart.setOption(option);
</script>
现在，我们来看一下展示效果
没有图表
不要慌，打开控制台看下报错信息
这是因为Django的模板文件中，js代码接受数据库的数据时，不会判断当前数据的数据类型
也就是这里它把 “超超” 这个字符串当作了变量名
解决办法很简单，在 js 接受数据时添加上一对双引号
<script>
{#初始化 echarts 对象#}
var mychart = echarts.init(document.getElementById('chart'));
{#首先，声明两个 javascript 的数组#}
var series_data = [];
var xAxis_data = [];
{#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
{% for stu in objs %}
series_data.push({{ stu.score }})
{#注意这里的双引号#}
xAxis_data.push("{{ stu.name}}")
{% endfor %}
{#可视化展示选项#}
var option = {
xAxis: {
type: 'category',
{#将x轴坐标修改为数据库中的学生姓名#}
data: xAxis_data
},
yAxis: {
type: 'value'
},
series: [{
{#将y轴的数据修改为数据库中学生的成绩，即score#}
data: series_data,
type: 'line'
}]
};
{#将 echarts对象与展示选项结合起来#}
mychart.setOption(option);
</script>
双引号的位置是：
{% for stu in objs %}
series_data.push({{ stu.score }})
{#注意这里的双引号#}
xAxis_data.push("{{ stu.name}}")
{% endfor %}
现在可以看到，x轴坐标变为了数据库中的学生姓名，y轴变为了数据库中的学生成绩
如果需要使用其他的 echarts 图表进行可视化展示，只需修改 script 中的代码即可
到此这篇关于Django使用echarts进行可视化展示的实践的文章就介绍到这了,更多相关Django echarts可视化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
使用 Django Highcharts 实现数据可视化过程解析
概述 最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化.大概挑选了下,排除了Flask和Echarts.最终选择使用Django和它的插件django-echarts来实现.文末有项目的完整代码,不想看的可以直接去下载,拆箱可用. 本篇博客主要用于记录整体的实现步骤,以及在实现过程中遇到的各个问题. 开发环境 本次搭建使用 Python 2.7.14,django 1.11.8,highcharts 4.0.1 直接命令行输入以下语句,即可
-
Django展示可视化图表的多种方式
1. 前言 大家好,我是安果! 使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示 常见方案包含:Highcharts.Matplotlib.Echarts.Pyecharts,其中后 2 种方案使用频率更高 本篇文章将聊聊 Django 结合 Echarts.Pyecharts 实现图表可视化的具体流程 2. Echarts Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型 以展示简单的柱状图为例,讲讲 Django
-
Django上使用数据可视化利器Bokeh解析
前言 最近在实验室做的一个项目中,需要把大量的数据在 web 端进行可视化,需要绘制各类图表.数据都是以 csv 文件的形式保存在服务器中.本来是想使用 D3.js 这个数据可视化前端库来画图,但是需要编写大量的 js 代码.后来发现了 Bokeh 这个框架,只需要在后端编写及少量的 Python 代码生成对应的 html 与 js,再传送到前端让浏览器解析,大大的减少了工作量. 1. 波形图 这里绘制一个包含了数千个数据点的信号波形图,绘制方法和 Matlab 如出一辙.学习成本为零. imp
-
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中添加图表应用 IN
-
Django使用echarts进行可视化展示的实践
本文以学生成绩折线图展示为例 条件准备 电脑上有myslq数据库 有 echarts 的 js 文件 连接mysql # settings.py 文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # mysql 数据库名 'NAME': 'chaochao', # mysql 登陆用户名 'USER': 'root', # myslq 登陆密码 'PASSWORD': 'chaochao666', 'HOST'
-
基于vue+echarts数据可视化大屏展示的实现
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
-
基于vue+echarts 数据可视化大屏展示的方法示例
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
-
Python中Django与Echarts的结合用法图文详解
目录 前言 什么是Echarts 选一个示例-简单的饼图 图形分析 前端核心代码分析 图形的生成基本步骤 django的操作 数据构造 渲染关键点 最终效果 稍复杂示例-河流图 图形分析 前端核心代码分析 django操作 数据构造 最终效果 添加示例没有的标题 添加时间轴的缩放 操控示例-获得没有示例的堆叠柱状图 其他 配色调整 数据拟合注意点 总结 前言 今天为大家分享Echarts在Python 的Django框架中的使用 项目仓库为https://gitcode.net/sabian2/
-
Python爬取当网书籍数据并数据可视化展示
目录 一.开发环境 二.模块使用 三.爬虫代码实现步骤 1. 导入所需模块 2. 发送请求, 用python代码模拟浏览器发送请求 3. 解析数据, 提取我们想要数据内容 4. 多页爬取 5. 保存数据, 保存csv表格里面 四.数据可视化 1.导入所需模块 2.导入数据 3.可视化 一.开发环境 Python 3.8 Pycharm 2021.2 专业版 二.模块使用 csv 模块 把爬取下来的数据保存表格里面的 内置模块requests >>> pip install request
-
一文详解Vue如何整合Echarts实现可视化界面
目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript
-
Vue Echarts实现可视化世界地图代码实例
Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js
-
浅析Django 接收所有文件,前端展示文件（包括视频，文件，图片）ajax请求
如果是后台上传文件: setting配置: STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), os.path.join(BASE_DIR, "media"), ] # Django用户上传的都叫media文件 MEDIA_URL = "/media/" # media配置,用户上传的文件都默认放在这个文件夹下 MEDIA_ROOT = os.path.join
-
Python爬虫爬取疫情数据并可视化展示
目录 知识点 开发环境 爬虫完整代码 导入模块 分析网站 发送请求 获取数据 解析数据 保存数据 数据可视化 导入模块 读取数据 死亡率与治愈率 各地区确诊人数与死亡人数情况 知识点 爬虫基本流程 json requests 爬虫当中 发送网络请求 pandas 表格处理 / 保存数据 pyecharts 可视化 开发环境 python 3.8 比较稳定版本 解释器发行版 anaconda jupyter notebook 里面写数据分析代码 专业性 pycharm 专业代码编辑器 按照年份与月