pyecharts源码解读(17)HTML组件包components之表格组件Table

当前pyecharts的版本为1.9.0。

components包概述

components包位于pyecharts包顶级目录中,用于定义pyecharts的HTML组件。包结构如下:

├─components # HTML组件包
│  │  image.py # 定义图像组件类Image
│  │  table.py # 定义表格组件类Table
│  │  __init__.py # 重构命名空间,将组件类命名空间提升至components包命名空间

目前HTML组件类TableImage 与复合图表类Page不兼容。

Table

pyecharts/components/table.py模块只定义了表格组件类Table

Table类继承自基类ChartMixin,作用为绘制表格。功能依赖第三方库prettytablepyecharts依赖库)。

Table类的签名为class Table(page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = "")

Table类的构造方法参数如下:

  • js_host:JavaScript库的URL。字符串,默认值为""
  • page_title:HTML页面标题。字符串,默认值为全局变量CurrentConfig.PAGE_TITLE

Table类的属性如下:

  • js_host:JavaScript库的URL。字符串,默认值为全局变量CurrentConfig.ONLINE_HOST。属性值为构造方法参数js_host与全局变量CurrentConfig.ONLINE_HOST进行或操作的结果。
  • page_title:HTML页面标题。字符串。值为构造方法参数page_title值。
  • js_functions:自定义JavaScript语句。类型为OrderedSet对象。默认值为OrderedSet()
  • js_dependencies:定义JavaScript依赖库。类型为OrderedSet对象。默认值为OrderedSet("echarts")
  • title_opts:表格标题配置。类型为ComponentTitleOpts对象,默认值为ComponentTitleOpts()。标题配置包括titlesubtitletitle_stylesubtitle_style等4个配置项。
  • html_content:表格的HTML。字符串,默认值为""
  • _component_type:组件类型。字符串,默认值为"table"
  • chart_id:组件id。字符串,默认值为uuid.uuid4().hex

Table类的方法如下:

  • add(self, headers: Sequence, rows: Sequence, attributes: Optional[dict] = None):添加图表数据。
    • headers:图表标题行。类型为序列。
    • rows:图表行数据。类型为序列。
    • attributes:图表样式属性。类型为字典。默认值为None or {"class": "fl-table"}
  • def set_global_opts(title_opts: Union[ComponentTitleOpts, dict, None] = None):将表格对象的title_opts属性值设置为title_opts参数值。
  • render:调用renderengine模块中的render函数渲染HTML文档。默认渲染模板为components.html
  • render_embed:调用renderengine模块中的render_embed函数输出HTML字符串。默认渲染模板为components.html
  • render_notebook:调用renderengine模块中的render_notebook函数将输出嵌入到notebook中。默认渲染模板为 nb_components.html

表格模板

macro部分源码:

{%- macro gen_components_content(chart) %}
    {% if chart._component_type == "table" %}
        <style>
            .fl-table {
                margin: 20px;
                border-radius: 5px;
                font-size: 12px;
                border: none;
                border-collapse: collapse;
                max-width: 100%;
                white-space: nowrap;
                word-break: keep-all;
            }

            .fl-table th {
                text-align: left;
                font-size: 20px;
            }

            .fl-table tr {
                display: table-row;
                vertical-align: inherit;
                border-color: inherit;
            }

            .fl-table tr:hover td {
                background: #00d1b2;
                color: #F8F8F8;
            }

            .fl-table td, .fl-table th {
                border-style: none;
                border-top: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-bottom: 3px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                padding: .5em .55em;
                font-size: 15px;
            }

            .fl-table td {
                border-style: none;
                font-size: 15px;
                vertical-align: center;
                border-bottom: 1px solid #dbdbdb;
                border-left: 1px solid #dbdbdb;
                border-right: 1px solid #dbdbdb;
                height: 30px;
            }

            .fl-table tr:nth-child(even) {
                background: #F8F8F8;
            }
        </style>
        <div id="{{ chart.chart_id }}" class="chart-container" style="">
            <p class="title" {{ chart.title_opts.title_style }}> {{ chart.title_opts.title }}</p>
            <p class="subtitle" {{ chart.title_opts.subtitle_style }}> {{ chart.title_opts.subtitle }}</p>
            {{ chart.html_content }}
        </div>

components.html源码:

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

{{ macro.gen_components_content(chart) }}

</body>
</html>

简易图表Table案例

from pyecharts.components import Table

table = Table()

headers = ["City name", "Area", "Population", "Annual Rainfall"]
rows = [
    ["Brisbane", 5905, 1857594, 1146.4],
    ["Adelaide", 1295, 1158259, 600.5],
    ["Darwin", 112, 120900, 1714.7],
    ["Hobart", 1357, 205556, 619.5],
    ["Sydney", 2058, 4336374, 1214.8],
    ["Melbourne", 1566, 3806092, 646.9],
    ["Perth", 5386, 1554769, 869.4],
]
attributes={"border":"1px"}

table.add(headers, rows)
table.set_global_opts({"title":"Table-基本示例", 
                       "subtitle":"我是副标题支持换行哦",
                       "title_style":"style='color:red'",
                       "subtitle_style":"style='color:green'"
                      })

table.render()

在这里插入图片描述

pyecharts/components/table.py模块源码

import uuid

from jinja2 import Environment
from prettytable import PrettyTable

from ..charts.mixins import ChartMixin
from ..commons.utils import OrderedSet
from ..globals import CurrentConfig
from ..options import ComponentTitleOpts
from ..render import engine
from ..types import Optional, Sequence, Union


class Table(ChartMixin):
    def __init__(self, page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = ""):
        self.page_title = page_title
        self.js_host = js_host or CurrentConfig.ONLINE_HOST
        self.js_dependencies: OrderedSet = OrderedSet()
        self.js_functions: OrderedSet = OrderedSet()
        self.title_opts: ComponentTitleOpts = ComponentTitleOpts()
        self.html_content: str = ""
        self._component_type: str = "table"
        self.chart_id: str = uuid.uuid4().hex

    def add(self, headers: Sequence, rows: Sequence, attributes: Optional[dict] = None):
        attributes = attributes or {"class": "fl-table"}
        table = PrettyTable(headers, attributes=attributes)
        for r in rows:
            table.add_row(r)
        self.html_content = table.get_html_string()
        return self

    def set_global_opts(self, title_opts: Union[ComponentTitleOpts, dict, None] = None):
        self.title_opts = title_opts
        return self

    def render(
        self,
        path: str = "render.html",
        template_name: str = "components.html",
        env: Optional[Environment] = None,
        **kwargs,
    ) -> str:
        return engine.render(self, path, template_name, env, **kwargs)

    def render_embed(
        self,
        template_name: str = "components.html",
        env: Optional[Environment] = None,
        **kwargs,
    ) -> str:
        return engine.render_embed(self, template_name, env, **kwargs)

    def render_notebook(self):
        # only notebook env need to re-generate chart_id
        self.chart_id = uuid.uuid4().hex
        return engine.render_notebook(self, "nb_components.html", "nb_components.html")
  • 9
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Pyecharts中的Table类是继承自基类ChartMixin的,其作用是用于绘制表格Table类的签名为class Table(page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = ""),其中page_title是页面标题,而js_host是用于设置js的主机地址。 要使用pyecharts中的Table类,首先需要导入Table模块,然后创建一个Table对象。接下来,定义表格的表头和行数据,并使用add方法将其添加到表格中。最后,可以使用set_global_opts方法设置表格的全局选项,如标题、副标题以及它们的样式。最后,使用render方法将表格渲染为HTML代码。 例如,下面是一个使用pyecharts绘制表格的简单示例: ``` from pyecharts.components import Table table = Table() headers = ["City name", "Area", "Population", "Annual Rainfall"] rows = [ ["Brisbane", 5905, 1857594, 1146.4], ["Adelaide", 1295, 1158259, 600.5], ["Darwin", 112, 120900, 1714.7], ["Hobart", 1357, 205556, 619.5], ["Sydney", 2058, 4336374, 1214.8], ["Melbourne", 1566, 3806092, 646.9], ["Perth", 5386, 1554769, 869.4], ] attributes={"border":"1px"} table.add(headers, rows) table.set_global_opts({"title":"Table-基本示例", "subtitle":"我是副标题支持换行哦", "title_style":"style='color:red'", "subtitle_style":"style='color:green'" }) table.render() ``` 这段代码会生成一个含指定表头和行数据的表格,并设置了表格的标题和副标题,以及它们的样式。最后,使用render方法将表格渲染为HTML代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [pyecharts源码解读17HTML组件components表格组件Table](https://blog.csdn.net/mighty13/article/details/117914526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值