pyecharts - 自定义模板并在模板中引入css文件

最新推荐文章于 2023-12-05 22:04:07 发布

kevin529_super

最新推荐文章于 2023-12-05 22:04:07 发布

阅读量3.8k

点赞数 1

分类专栏： python html 文章标签： pyecharts falsk

本文链接：https://blog.csdn.net/qq_33106591/article/details/100817268

版权

python 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

自定义模板

=== pyecharts版本为v1,web框架为flask 1.1===

问题

可以自定义报表生成格式,例如:添加文字说明等。而不是生成的文件只有报表代码。
问题分析:

可以自定义报表模板
为了美观还需要引入外部css

项目结构

├── pyecharts-master
    ├── app
    │   ├── automl
    │   │   ├── render
    │   │   ├── static
    │   │   │   ├── jquery.min.js
    │   │   │   ├── echart.js
    │   │   │   ├── bootstrap
    │   │   ├── demo
    │   │   │   ├── views.py
    ├── pycharts      --和git上目录结构一致
    │   ├── reder
     │   │   ├── temlpates		--官方模板在这里
    │   ├── globals.py

自定义模板

在官方文档中,pycharts可以生成render.html,文件中内容为报表代码。查看源码render代码如下:
path: 生成的文件名
template_name：模板名

    def render(
        self,
        path: str = "render.html",
        template_name: str = "simple_chart.html",
        env: Optional[Environment] = None,
    ) -> str:
        self._prepare_render()
        RenderEngine(env).render_chart_to_file(
            chart=self, path=path, template_name=template_name
        )
        return os.path.abspath(path)

dug发现在 globals.py文件值中定义了在哪些文件夹中寻找模板,代码如下:

GLOBAL_ENV = Environment(
        keep_trailing_newline=True,
        trim_blocks=True,
        lstrip_blocks=True,
        loader=FileSystemLoader(
             (os.path.join(
                 os.path.abspath(os.path.dirname(__file__)), "render", "templates"
             ))

        ),

从代码中可以发现,默认从globals.py同级目录下的render/templates中寻找模板。为了项目的耦合性.我希望在app/automl/render中自定义模板。代码如下:

 loader=FileSystemLoader(
             (os.path.join(
                 os.path.abspath(os.path.dirname(__file__)), "render", "templates"
             ), os.path.join(
                 os.path.abspath(os.path.dirname(os.path.dirname(__file__))), "app/automl", "render"
             ))
        )

os.path.dirname(os.path.dirname(file))获取项目根目录,方便配置。copy simple_chart.html到app/automl/reder中并重命名为my_simple_chart.html。运行可以生成报表,可以在my_simple_chart.html增加你想要的效果。

c.render(path=filename,template_name="my_simple_chart.html")

加载css文件

可以自定义模板后,我想写份说明文档,为了美观我在项目中引入bootstarp,但在添加引用才发现echarts只能添加js,不能添加css。pyecharts使用js如下:

pyecharts如何使用js

添加js

base.py 是所以报表的父类,它定义了js_dependencies,默认添加echarts.js。

self.js_dependencies: utils.OrderedSet = utils.OrderedSet("echarts")

你可以在代码中添加自己的依赖:

 chart.js_dependencies.add("jquery.min.js")
 chart.js_dependencies.add("bootstrap/js/bootstrap.min.js")

在模板中使用js

官方模板simple_chart.html代码如下:

{% import 'macro' as macro %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ chart.page_title }}</title>
    {{ macro.render_chart_dependencies(chart) }}
</head>
<body>
    {{ macro.render_chart_content(chart) }}
</body>
</html>

macro中代码如下:

{%- macro render_chart_dependencies(c) -%}
    {% for dep in c.dependencies %}
        <script type="text/javascript" src="{{ dep }}"></script>
    {% endfor %}
{%- endmacro %}

{%- macro render_chart_css(c) -%}
    {% for dep in c.css_libs %}
        <link rel="stylesheet"  href="{{ dep }}">
    {% endfor %}
{%- endmacro %}

从中发现maco不仅提供了输出js的方法,还提供了输出css的方法。只是charts中没有css_libs属性,我们需要为它新增属性即可。

新增pycharts模板中使用css的方法

在base.py中新增属性

 self.css_libs = set()

在代码中增加css依赖

chart.css_lib.add("bootstrap/css/bootstrap.min.css")

在页面中引入css

{{ macro.render_chart_css(chart) }}

kevin529_super

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
pyecharts - 自定义模板并在模板中引入css文件

自定义模板问题项目结构自定义模板加载css文件pyecharts如何使用js添加js在模板中使用js新增pycharts模板中使用css的方法在base.py中新增属性在代码中增加css依赖在页面中引入css=== pyecharts版本为v1,web框架为flask 1.1===问题可以自定义报表生成格式,例如:添加文字说明等。而不是生成的文件只有报表代码。问题分析:可以自定义报表模...
复制链接

扫一扫