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中用startswith()函数判断字符串开头的教程
Apr 07 Python
python自然语言编码转换模块codecs介绍
Apr 08 Python
python爬虫之百度API调用方法
Jun 11 Python
Python中的二维数组实例(list与numpy.array)
Apr 13 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
Apr 19 Python
Django model序列化为json的方法示例
Oct 16 Python
Python常见数字运算操作实例小结
Mar 22 Python
Django 限制访问频率的思路详解
Dec 24 Python
Keras自定义IOU方式
Jun 10 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
Nov 17 Python
深入理解Python变量的数据类型和存储
Feb 01 Python
Python 读取千万级数据自动写入 MySQL 数据库
Jun 28 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python 实现登录网页的操作方法
2018/05/11 Python
python中的协程深入理解
2019/06/10 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
大学生读书笔记范文
2015/07/01 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers