PlotlyChart 继承自： ft.Container, LayoutControl, AdaptiveControl, ActionControl, Control, BaseControl

显示 Plotly 图表。

注意： 该控件需要先安装 plotly 与 kaleido 这两个 Python 包。

更多信息请参阅此安装指南。

import plotly.express as px

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x="year", y="pop")
fch.PlotlyChart(figure=fig, expand=True)

示例

import plotly.express as px

import flet as ft
import flet_charts as fch


def main(page: ft.Page):
    df = px.data.gapminder().query("continent=='Oceania'")
    fig = px.line(df, x="year", y="lifeExp", color="country")

    page.add(ft.SafeArea(expand=True, content=fch.PlotlyChart(figure=fig, expand=True)))


if __name__ == "__main__":
    ft.run(main)

import plotly.express as px

import flet as ft
import flet_charts as fch


def main(page: ft.Page):
    df = px.data.gapminder().query("continent == 'Oceania'")
    fig = px.bar(
        df,
        x="year",
        y="pop",
        hover_data=["lifeExp", "gdpPercap"],
        color="country",
        labels={"pop": "population of Canada"},
        height=400,
    )

    page.add(ft.SafeArea(expand=True, content=fch.PlotlyChart(figure=fig, expand=True)))


if __name__ == "__main__":
    ft.run(main)

import plotly.graph_objects as go

import flet as ft
import flet_charts as fch


def main(page: ft.Page):
    labels = ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"]
    values = [4500, 2500, 1053, 500]

    fig = go.Figure(data=[go.Pie(labels=labels, values=values)])

    page.add(ft.SafeArea(expand=True, content=fch.PlotlyChart(figure=fig, expand=True)))


if __name__ == "__main__":
    ft.run(main)

import plotly.graph_objects as go

import flet as ft
import flet_charts as fch


def main(page: ft.Page):
    x = [
        "day 1",
        "day 1",
        "day 1",
        "day 1",
        "day 1",
        "day 1",
        "day 2",
        "day 2",
        "day 2",
        "day 2",
        "day 2",
        "day 2",
    ]

    fig = go.Figure()

    fig.add_trace(
        go.Box(
            y=[0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
            x=x,
            name="kale",
            marker_color="#3D9970",
        )
    )
    fig.add_trace(
        go.Box(
            y=[0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
            x=x,
            name="radishes",
            marker_color="#FF4136",
        )
    )
    fig.add_trace(
        go.Box(
            y=[0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
            x=x,
            name="carrots",
            marker_color="#FF851B",
        )
    )

    fig.update_layout(
        yaxis_title="normalized moisture",
        boxmode="group",  # group together boxes of the different traces
    )

    page.add(ft.SafeArea(expand=True, content=fch.PlotlyChart(figure=fig, expand=True)))


if __name__ == "__main__":
    ft.run(main)

属性

名称	类型	默认值	说明
figure	Figure	metadata={'skip': True}	Plotly figure to draw. The value is an instance of plotly.graph_objects.Figure.
original_size	bool	False	Whether to display this chart in original size. Set to False for it to fit it's configured bounds.
content	Optional[Control]	None	The content of this container.
padding	Optional[PaddingValue]	None	Empty space to inscribe inside a container decoration (background, border). The child control is placed inside this padding.
alignment	Optional[Alignment]	None	Defines the alignment of the content inside this container. Note: If alignment is non-None, this container may expand to fill the available space from its parent (before positioning its content within itself according to the given alignment) instead of shrinking to its content. If you need this container to keep a fixed size, give it container an explicit width and/or height values, or constrain it via its parent.
bgcolor	Optional[ColorValue]	None	Defines the background color of this container.
gradient	Optional[Gradient]	None	Defines the gradient background of this container.
blend_mode	Optional[BlendMode]	None	The blend mode applied to the color or gradient background of the container. Defaults to BlendMode.MODULATE.
border	Optional[Border]	None	A border to draw above the background color.
border_radius	Optional[BorderRadiusValue]	None	The border radius of this container.
shape	BoxShape	BoxShape.RECTANGLE	Sets the shape of this container.
clip_behavior	Optional[ClipBehavior]	None	Defines how the content of this container is clipped. Defaults to ClipBehavior.ANTI_ALIAS if border_radius is not None; otherwise ClipBehavior.NONE.
ink	bool	False	True to produce ink ripples effect when user clicks this container.
image	Optional[DecorationImage]	None	An image to paint above the bgcolor or gradient. If shape=BoxShape.CIRCLE then this image is clipped to the circle's boundary; if border_radius is not None then the image is clipped to the given radii.
ink_color	Optional[ColorValue]	None	The splash color of the ink response.
animate	Optional[AnimationValue]	None	Enables container "implicit" animation that gradually changes its values over a period of time.
blur	Optional[BlurValue]	None	Defines how Gaussian blur effect should be applied under this container. Example: python ft.Stack( controls=[ ft.Container( content=ft.Text("Hello"), image_src="https://picsum.photos/100/100", width=100, height=100, ), ft.Container( width=50, height=50, blur=10, bgcolor="#44CCCC00", ), ft.Container( width=50, height=50, left=10, top=60, blur=(0, 10), ), ft.Container( top=10, left=60, blur=ft.Blur(10, 0, ft.BlurTileMode.MIRROR), width=50, height=50, bgcolor="#44CCCCCC", border=ft.Border.all(2, ft.Colors.BLACK), ), ] )
shadow	Optional[BoxShadowValue]	None	The shadow(s) below this container.
url	Optional[Union[str, Url]]	None	The URL to open when this container is clicked. Additionally, if an on_click callback is provided, it is fired after that.
theme	Optional['Theme']	None	Allows setting a nested theme for all controls inside this container and down its tree.
dark_theme	Optional['Theme']	None	Allows setting a nested theme to be used when in dark theme mode for all controls inside the container and down its tree.
theme_mode	Optional[ThemeMode]	None	"Resets" parent theme and creates a new, unique scheme for all controls inside the container. Otherwise the styles defined in container's theme property override corresponding styles from the parent, inherited theme. Defaults to ThemeMode.SYSTEM.
color_filter	Optional[ColorFilter]	None	Applies a color filter to this container.
ignore_interactions	bool	False	Whether to ignore all interactions with this container and its descendants.
foreground_decoration	Optional[BoxDecoration]	None	The foreground decoration of this container.
width	Optional[Number]	None	Imposed Control width in virtual pixels.
height	Optional[Number]	None	Imposed Control height in virtual pixels.
left	Optional[Number]	None	The distance that the child's left edge is inset from the left of the stack. Note: Effective only if this control is a descendant of one of the following: Stack control, overlay list.
top	Optional[Number]	None	The distance that the child's top edge is inset from the top of the stack. Note: Effective only if this control is a descendant of one of the following: Stack control, overlay list.
right	Optional[Number]	None	The distance that the child's right edge is inset from the right of the stack. Note: Effective only if this control is a descendant of one of the following: Stack control, overlay list.
bottom	Optional[Number]	None	The distance that the child's bottom edge is inset from the bottom of the stack. Note: Effective only if this control is a descendant of one of the following: Stack control, overlay list.
align	Optional[Alignment]	None	Alignment of the control within its parent.
margin	Optional[MarginValue]	None	Sets the margin of the control.
rotate	Optional[RotateValue]	None	Transforms this control using a rotation around its center. The value of rotate property could be one of the following types: * number - a rotation in clockwise radians. Full circle 360° is math.pi * 2 radians, 90° is pi / 2, 45° is pi / 4, etc. * Rotate - allows to specify rotation angle as well as alignment - the location of rotation center. Example: python ft.Image( src="https://picsum.photos/100/100", width=100, height=100, border_radius=5, rotate=Rotate(angle=0.25 * pi, alignment=ft.Alignment.CENTER_LEFT) )
scale	Optional[ScaleValue]	None	Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale. Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger. Different scale multipliers can be specified for x and y axis, by setting Control.scale property to an instance of Scale class. Either scale or scale_x and scale_y could be specified, but not all of them. Example: python ft.Image( src="https://picsum.photos/100/100", width=100, height=100, border_radius=5, scale=ft.Scale(scale_x=2, scale_y=0.5) )
offset	Optional[OffsetValue]	None	Applies a translation transformation before painting the control. The translation is expressed as an Offset scaled to the control's size. So, Offset(x=0.25, y=0), for example, will result in a horizontal translation of one quarter the width of this control. Example The following example displays container at 0, 0 top left corner of a stack as transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and vertical translations to the control: python import flet as ft def main(page: ft.Page): page.add( ft.Stack( width=1000, height=1000, controls=[ ft.Container( bgcolor=ft.Colors.RED, width=100, height=100, left=100, top=100, offset=ft.Offset(-1, -1), ) ], ) ) ft.run(main)
flip	Optional[Flip]	None	Flips this control horizontally and/or vertically. Set to an instance of Flip to mirror across x-axis, y-axis, or both.
transform	Optional[Transform]	None	Applies a generic matrix transform to this control. Set to an instance of Transform with a recorded Matrix4 to describe arbitrary transform sequences.
aspect_ratio	Optional[Number]	None	The aspect ratio of the control. It is defined as the ratio of width to height. Note: In current implementation, if aspect_ratio is set, width and height on the same control are ignored for final rendered size.
animate_opacity	Optional[AnimationValue]	None	启用 opacity 属性的隐式动画。 详见 此处.
animate_size	Optional[AnimationValue]	None	启用此控件尺寸的隐式动画。 If width or height is set, changes to those dimensions are animated. If neither dimension is set, changes to the control's natural size are animated instead. 详见 此处.
animate_position	Optional[AnimationValue]	None	启用定位属性（left、right、top、bottom）的隐式动画。 详见 此处.
animate_align	Optional[AnimationValue]	None	启用 align 属性的隐式动画。 详见 此处.
animate_margin	Optional[AnimationValue]	None	启用 margin 属性的隐式动画。 详见 此处.
animate_rotation	Optional[AnimationValue]	None	启用 rotate 属性的隐式动画。 详见 此处.
animate_scale	Optional[AnimationValue]	None	启用 scale 属性的隐式动画。 详见 此处.
animate_offset	Optional[AnimationValue]	None	启用 offset 属性的隐式动画。 详见 此处.
size_change_interval	int	10	Sampling interval in milliseconds for on_size_change event. Setting to 0 calls on_size_change immediately on every change.
expand	Annotated[Optional[Union[bool, int]], V.instance_of((bool, int))]	None	指定此控件是否/如何扩展以填充父布局中的可用空间。 详见 此处. Note: Has effect only if the direct parent of this control is one of the following controls, or their subclasses: Column, Row, View, Page. Raises: ValueError: If it is not of type bool or int.
expand_loose	bool	False	允许控件在主轴方向上有可用空间时扩展，但不要求填满所有可用空间。 详见 此处. Note: 若 expand_loose 为 True，则仅当同时满足以下条件时生效： - expand 不为 None，且 - the direct parent of this control is one of the following controls, or their subclasses: Column, Row, View, Page.
col	ResponsiveNumber	12	若此控件的父控件是 ResponsiveRow，此属性用于决定该控件横跨多少个虚拟列。 可以是数字，也可以是为不同断点配置不同值的字典，例如 col={"sm": 6}。 0 表示在该断点下隐藏控件，不占用任何列。 默认横跨 12 个虚拟列。 \
opacity	Annotated[Number, V.between(0.0, 1.0)]	1.0	定义控件的透明度，取值范围 0.0（完全透明）到 1.0（完全不透明）。 抛出异常：ValueError：若不在 0.0 到 1.0 的闭区间内。
tooltip	Optional[TooltipValue]	None	鼠标悬停时显示的 tooltip。
badge	Optional[BadgeValue]	None	显示在控件顶部的徽标。
visible	bool	True	Every control has visible property which is True by default - control is rendered on the page. Setting visible to False 完全阻止该控件（及其所有子控件）渲染到页面画布上. 隐藏的控件不能通过键盘或鼠标聚焦或选中，也不会触发任何事件。
disabled	bool	False	Every control has disabled property which is False by default - control and all its children are enabled. Note: The value of this property will be propagated down to all children controls recursively. Example: For example, if you have a form with multiple entry controls you can disable them all together by disabling container: python ft.Column( disabled = True, controls=[ ft.TextField(), ft.TextField() ] )
rtl	bool	False	控件的文字方向是否为从右到左（RTL）。
data	Any	skip_	任意类型的自定义数据。
key	Optional['KeyValue']	None	用于在更新之间保持控件身份稳定的 key。
adaptive	Optional[bool]	None	Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
action	Optional[Union[ClientAction, list[ClientAction]]]	None	Action(s) performed by the client when this control is activated, without a round trip to your Python code. Use this for operations a browser only permits while it is handling the user's click, such as opening a file picker, writing to the clipboard, showing a share sheet or opening a new tab. See ClientAction.

只读属性

名称	类型	默认值	说明
parent	Optional['BaseControl']	—	The direct ancestor(parent) of this control. It defaults to None and will only have a value when this control is mounted (added to the page tree). Page 控件（树的根）为例外 —— 它始终 parent=None。
page	'Page'	—	此控件所属的页面。

事件

名称	类型	默认值	说明
on_click	Optional[ControlEventHandler['Container']]	None	Called when a user clicks the container. It will not be called if this container is long pressed.
on_tap_down	Optional[EventHandler[TapEvent['Container']]]	None	Called when a user clicks the container with or without a long press.
on_long_press	Optional[ControlEventHandler['Container']]	None	Called when this container is long-pressed.
on_hover	Optional[ControlEventHandler['Container']]	None	Called when a mouse pointer enters or exists the container area. The data property of the event handler argument is a boolean: True when the cursor enters and False when it exits this container.
on_size_change	Optional[EventHandler[LayoutSizeChangeEvent['LayoutControl']]]	None	Called when the size of this control changes. size_change_interval defines how often this event is called.
on_animation_end	Optional[ControlEventHandler['LayoutControl']]	None	动画结束时调用，可用于串联多个动画。 事件参数 data 属性包含动画的名称。 详见 此处.

方法

名称	类型	默认值	说明
init	—	—	—
before_update	—	—	—
is_isolated	—	—	Return whether this control is marked as isolated. 被隔离的控件不会参与父级驱动的更新遍历，需要自行管理更新边界。
build	—	—	在控件初始化期间调用一次，用于定义其子控件。 page 属性在此方法中可用。
before_event	—	—	在事件处理器执行前拦截事件。 返回 False 取消分发，返回 True 或 None 则继续正常的事件处理。
did_mount	—	—	在控件挂载到页面树之后调用。 可重写以启动需要已挂载页面的资源，例如订阅、定时器或服务监听。
will_unmount	—	—	在控件从页面树移除之前调用。 可重写以释放 did_mount() 中创建的资源，例如订阅、定时器或外部句柄。
get_data_channel	—	—	Resolve the [DataChannel] allocated on the Dart side for this widget. Pattern: on_data_channel_open: Optional[ft.EventHandler[DataChannelOpenEvent]] = None def init(self): self.on_data_channel_open = self._on_open def _on_open(self, e): self._channel = self.get_data_channel(e.channel_id) Idempotent — the underlying Connection caches DataChannels by id, so repeated calls return the same instance. No error path: the id always comes from a framework-fired event, so by the time this runs the channel exists on both sides.
update	None	—	请求更新该控件的 UI。 在修改控件状态或属性后调用。 控件必须已挂载到页面，并且未被冻结。