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基础教程之数字处理(math)模块详解
Mar 25 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
May 26 Python
Linux 下 Python 实现按任意键退出的实现方法
Sep 25 Python
python中快速进行多个字符替换的方法小结
Dec 15 Python
用pickle存储Python的原生对象方法
Apr 28 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
Aug 18 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
Dec 04 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
Dec 04 Python
python生成大写32位uuid代码
Mar 03 Python
TensorFlow固化模型的实现操作
May 26 Python
浅谈matplotlib 绘制梯度下降求解过程
Jul 12 Python
Python爬虫之Selenium设置元素等待的方法
Dec 04 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 中使用随机数的三个步骤
2006/10/09 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
一分钟理解js闭包
2016/05/04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python的命名规则知识点总结
2019/10/04 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python安装whl文件过程图解
2020/02/18 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
护士实习自我鉴定
2013/10/22 职场文书
客服工作职责
2013/12/11 职场文书
高二政治教学反思
2014/02/01 职场文书
工地安全检查制度
2014/02/04 职场文书
物流管理专业自荐信
2014/06/23 职场文书
教师暑期培训感言
2014/08/15 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书