Django使用echarts进行可视化展示的实践


Posted in Python onJune 10, 2021

本文以学生成绩折线图展示为例

条件准备

  • 电脑上有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 数据库教程在其他文章中,这里不再细说

导入数据

可以直接在 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='成绩')

数据库内容:

Django使用echarts进行可视化展示的实践

使用echarts可视化展示

设置静态文件目录(即 static 目录)

# settings.py 文件

STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)

创建如下目录结构:

Django使用echarts进行可视化展示的实践

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>

现在使用的静态数据,先来看一下页面效果

Django使用echarts进行可视化展示的实践

已经可以看到图表了

现在,我们来修改为 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())

Django使用echarts进行可视化展示的实践

修改 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使用echarts进行可视化展示的实践

没有图表

不要慌,打开控制台看下报错信息

Django使用echarts进行可视化展示的实践

这是因为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 %}

Django使用echarts进行可视化展示的实践

现在可以看到,x轴坐标变为了数据库中的学生姓名,y轴变为了数据库中的学生成绩

如果需要使用其他的 echarts 图表进行可视化展示,只需修改 script 中的代码即可

到此这篇关于Django使用echarts进行可视化展示的实践的文章就介绍到这了,更多相关Django echarts可视化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python通过websocket与js客户端通信示例分析
Jun 25 Python
Python中的闭包实例详解
Aug 29 Python
初学Python函数的笔记整理
Apr 07 Python
在Django的form中使用CSS进行设计的方法
Jul 18 Python
Python输入二维数组方法
Apr 13 Python
对python的文件内注释 help注释方法
May 23 Python
pycharm中使用anaconda部署python环境的方法步骤
Dec 19 Python
python pandas写入excel文件的方法示例
Jun 25 Python
python 批量解压压缩文件的实例代码
Jun 27 Python
Python 词典(Dict) 加载与保存示例
Dec 06 Python
Jupyter Notebook内使用argparse报错的解决方案
Jun 03 Python
OpenCV图像变换之傅里叶变换的一些应用
Jul 26 Python
教你如何使用Python Tkinter库制作记事本
Jun 10 #Python
Python中常见的反爬机制及其破解方法总结
Jun 10 #Python
Pytorch可视化的几种实现方法
OpenCV-Python实现怀旧滤镜与连环画滤镜
OpenCV-Python实现轮廓的特征值
Jun 09 #Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
Jun 09 #Python
Python的这些库,你知道多少?
You might like
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
srcElement表格样式
2006/09/03 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python关闭占用端口方式
2019/12/17 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
技术员岗位职责
2015/02/04 职场文书
天气温馨提示语
2015/07/14 职场文书
python某漫画app逆向
2021/03/31 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android