码创造者

这个屌丝很懒，什么也没留下！

热门标签

django填充pyechart的图到前端模版中（不使用Ajax，而是直接贴一个div）_在div中放入另一个pyecharts自动生成的html文件

作者：码创造者 | 2024-07-29 04:54:54

踩

在div中放入另一个pyecharts自动生成的html文件

使用Ajax填充的请参考：展示PyEcharts图表到Django框架前端页面教程（逐步教程）

文章目录

PyEcharts + Django 流程

首先需要明确，pyechart是通过python来生成HTML（echart）的工具，在django中，我们通过Pyechart生成HTML后，对HTML的图片部分内容提取出来，然后填充到前端中

在流程中前三部分都是为了项目准备：

django老手直接到第3步
新手则从头开始搭建一个django，并完成基本配置

PyEcharts + Django 流程

1. 安装依赖&创建项目

安装必要的依赖：

pip install django
pip install pyecharts
pip install bs4
1
2
3

版本：

python		          3.7.13
Django                3.2.13
pyecharts             1.9.1
1
2
3

然后创建django项目

django-admin startproject pyecharts_django_demo
cd pyecharts_django_demo/
python manage.py startapp demo
1
2
3

2. 调整项目结构

然后在pyecharts_django_demo/settings.py文件中，修改INSTALLED_APPS的配置，在文件中把刚才创建的demo添加配置项，最后的结果如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "demo",
]
1
2
3
4
5
6
7
8
9

然后在这个配置INSTALLED_APPS的上面添加下面的代码，方便后续操作：

import os

SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))
1
2
3

最后修改配置项TEMPLATES的DIRS，之前"DIRS"那里是个空列表，咱们要填一下，这是固定写法：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(SETTINGS_PATH, 'templates')], # 说明你的HTML文件放在哪里，后面会添加这个文件夹，这里先配置上
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 配置pyechart的图片路由（熟悉Django的直接到这里）

在demo/文件夹下新建一个urls.py文件，然后在新建的文件中写入：

from django.urls import path
from . import views

urlpatterns = [
    path(r'^index/$', views.IndexView.as_view(), name='demo'),
]
1
2
3
4
5
6

这里咱们先把路径都配好，调通了之后再串逻辑

定位到项目根目录的url.py文件（在pyecharts_django_demo/urls.py即为项目根目录的urls文件）：
- 导包from django.urls import include
- 添加主目录到demo的路由

最后修改完后的效果如下：

"""pyecharts_django_demo URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'demo/', include('demo.urls'))
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4. 准备呈现图像

在项目根目录下，与manage.py同一个目录下，创建一个templates文件夹（名字不要错，固定写法），之后的文件结构是：
在这里插入图片描述

在templates文件夹下创建一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div>
    {% autoescape off %}
        {{ my_pic }}
    {% endautoescape %}
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

知识点：

{% xxxx %}与{{ xxxx }}是django填充前端模版的写法
{% xxxx %}通常是一些逻辑或配置项，比如这里的autoescape off就是允许后端填充前端标签过去，而不会被django默认转译为字符串
{{ xxxx }}通常是填充值，这个pic_div就是后端一会穿过来的图片

在demo/view.py中写入：

import json
from random import randrange
from rest_framework.views import APIView
from pyecharts.charts import Bar
from pyecharts import options as opts
from django.shortcuts import render
from django.views.generic import View
from bs4 import BeautifulSoup


# 这是显示页面的写法
class IndexView(View):
    def get(self, request):
        my_pic = (
            Bar()
                .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
                .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
                .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
                .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
        )
        html_embed = my_pic.render_embed()
        soup = BeautifulSoup(html_embed, 'lxml')
        my_pic = "\n".join([str(i).strip() for i in soup.body.contents])  # soup.body.contents是一个列表，把列表转为字符串
        return render(request, 'index.html', {
            "my_pic": my_pic,
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5. 查看效果

访问：http://127.0.0.1:8000/demo/

在这里插入图片描述

6. 逻辑梳理

熟悉django的话，逻辑还是很简单的，主要是在View中，

 my_pic = (
	Bar()
	.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
	.add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
	.add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
	.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
1
2
3
4
5
6
7

之后使用

html_embed = my_pic.render_embed()
1

可以得到HTML的页面，我们发现HTML中主要内容都在body中，带了div和script标签，所以我们通过BeautifulSoup把HTML的body内容抽取出来，并剔除掉<body></body>这个自身的标签，最后整理一下：

soup = BeautifulSoup(html_embed, 'lxml')
my_pic = "\n".join([str(i).strip() for i in soup.body.contents])  # soup.body.contents是一个列表，把列表转为字符串   
1
2

将这个整体交给前端，并使用：

<div>
    {% autoescape off %}
        {{ my_pic }}
    {% endautoescape %}
</div>
1
2
3
4
5

这样就允许我们把my_pic解析为HTML标签，而不是被默认加个引号变成字符串

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/897262