`pl-figure`元件¶

显示静态或动态生成的图像。支持多种图像文件格式，包括 PNG、JPEG 和 SVG。

Warning

此元素_不_支持 PDF 文件。要使 PDF 文件可供下载，请使用 pl-file-download 元素。

样品元素¶

pl-figure元素截图

question.html

<!-- show a figure from an existing file -->
<pl-figure file-name="figure.png" directory="clientFilesCourse"></pl-figure>

<!-- show a figure from a file that is generated by code -->
<pl-figure file-name="figure.png" type="dynamic"></pl-figure>

定制¶

属性	类型	默认	描述
`alt`	字符串	“”	提供替代 (alternative) 文本，通过描述图像或图像的用途来提高图形的可访问性。默认为空字符串。
`directory`	字符串	`"clientFilesQuestion"`	包含文件的目录，`"clientFilesQuestion"` 或 `clientFilesCourse`（请参阅客户端和服务器文件）。如果是 `type="dynamic"`，则无法指定目录。
`display`	`"block"` 或 `"inline"`	`"block"`	显示与文本 (`"inline"`) 内嵌的图形或在单独的行 (`"block"`) 上显示的图形。
`file-name`	字符串	—	图像文件的名称。
`type`	`"static"` 或 `"dynamic"`	`"static"`	文件类型，“静态”（现有文件）或“动态”（由元素或服务器代码生成的文件）。
`width`	字符串	—	图像的宽度（以像素为单位），例如`250`。

从已弃用的属性迁移¶

为了向后兼容，仍支持以下已弃用的属性：

旧语法	新语法
`inline="true"`	`display="inline"`

动态生成的图形¶

如果是 type="dynamic"，则图像文件的内容必须由位于元素代码或 server.py 中的函数 file() 返回。内容必须是字符串（使用 utf-8 编码）、类字节对象或类文件对象。此函数可用的文件名为 data["filename"]。例如，要为上面的动态 pl-figure 生成 figure.png，此代码可能会出现在 server.py 中以生成“假”figure.png：

server.py

def file(data):
    if data["filename"] == "figure.png":
        plt.plot([1,2,3], [3,4,-2])
        buf = io.BytesIO()
        plt.savefig(buf, format="png")
        return buf

如果 file() 不返回任何内容，则将被视为 file() 返回空字符串。

示例实现¶

[演示/随机图]
[演示/固定复选框]
[元素/图]

pl-figure元件¶