主题
LineChart 继承自： ft.LayoutControl, Control, BaseControl
Draws a line chart.
Example:
python
fch.LineChart(
min_y=0,
max_y=3,
min_x=0,
max_x=5,
data_series=[
fch.LineChartData(
color=ft.Colors.BLUE_GREY_500,
curved=True,
points=[
fch.LineChartDataPoint(1, 0.5),
fch.LineChartDataPoint(2, 1.5),
fch.LineChartDataPoint(3, 1),
],
),
...,
],
)示例
python
import flet as ft
import flet_charts as fch
class State:
toggled = True
state = State()
def main(page: ft.Page):
data_1 = [
fch.LineChartData(
stroke_width=8,
color=ft.Colors.LIGHT_GREEN,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 1),
fch.LineChartDataPoint(3, 1.5),
fch.LineChartDataPoint(5, 1.4),
fch.LineChartDataPoint(7, 3.4),
fch.LineChartDataPoint(10, 2),
fch.LineChartDataPoint(12, 2.2),
fch.LineChartDataPoint(13, 1.8),
],
),
fch.LineChartData(
color=ft.Colors.PINK,
below_line_bgcolor=ft.Colors.with_opacity(0, ft.Colors.PINK),
stroke_width=8,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 1),
fch.LineChartDataPoint(3, 2.8),
fch.LineChartDataPoint(7, 1.2),
fch.LineChartDataPoint(10, 2.8),
fch.LineChartDataPoint(12, 2.6),
fch.LineChartDataPoint(13, 3.9),
],
),
fch.LineChartData(
color=ft.Colors.CYAN,
stroke_width=8,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 2.8),
fch.LineChartDataPoint(3, 1.9),
fch.LineChartDataPoint(6, 3),
fch.LineChartDataPoint(10, 1.3),
fch.LineChartDataPoint(13, 2.5),
],
),
]
data_2 = [
fch.LineChartData(
stroke_width=4,
color=ft.Colors.with_opacity(0.5, ft.Colors.LIGHT_GREEN),
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 1),
fch.LineChartDataPoint(3, 4),
fch.LineChartDataPoint(5, 1.8),
fch.LineChartDataPoint(7, 5),
fch.LineChartDataPoint(10, 2),
fch.LineChartDataPoint(12, 2.2),
fch.LineChartDataPoint(13, 1.8),
],
),
fch.LineChartData(
color=ft.Colors.with_opacity(0.5, ft.Colors.PINK),
below_line_bgcolor=ft.Colors.with_opacity(0.2, ft.Colors.PINK),
stroke_width=4,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 1),
fch.LineChartDataPoint(3, 2.8),
fch.LineChartDataPoint(7, 1.2),
fch.LineChartDataPoint(10, 2.8),
fch.LineChartDataPoint(12, 2.6),
fch.LineChartDataPoint(13, 3.9),
],
),
fch.LineChartData(
color=ft.Colors.with_opacity(0.5, ft.Colors.CYAN),
stroke_width=4,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(1, 3.8),
fch.LineChartDataPoint(3, 1.9),
fch.LineChartDataPoint(6, 5),
fch.LineChartDataPoint(10, 3.3),
fch.LineChartDataPoint(13, 4.5),
],
),
]
chart = fch.LineChart(
data_series=data_1,
border=ft.Border(
bottom=ft.BorderSide(4, ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE))
),
tooltip=fch.LineChartTooltip(
bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.BLUE_GREY)
),
min_y=0,
max_y=4,
min_x=0,
max_x=14,
expand=True,
right_axis=fch.ChartAxis(show_labels=False),
left_axis=fch.ChartAxis(
label_size=40,
labels=[
fch.ChartAxisLabel(
value=1,
label=ft.Text("1m", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=2,
label=ft.Text("2m", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=3,
label=ft.Text("3m", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=4,
label=ft.Text("4m", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=5,
label=ft.Text("5m", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=6,
label=ft.Text("6m", size=14, weight=ft.FontWeight.BOLD),
),
],
),
bottom_axis=fch.ChartAxis(
label_size=32,
labels=[
fch.ChartAxisLabel(
value=2,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="SEP",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
fch.ChartAxisLabel(
value=7,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="OCT",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
fch.ChartAxisLabel(
value=12,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="DEC",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
],
),
)
def toggle_data(e: ft.Event[ft.IconButton]):
if state.toggled:
chart.data_series = data_2
chart.data_series[2].point = True
chart.max_y = 6
chart.interactive = False
else:
chart.data_series = data_1
chart.max_y = 4
chart.interactive = True
state.toggled = not state.toggled
chart.update()
page.add(
ft.SafeArea(
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.IconButton(ft.Icons.REFRESH, on_click=toggle_data),
chart,
],
),
)
)
if __name__ == "__main__":
ft.run(main)
python
import flet as ft
import flet_charts as fch
class State:
toggled = True
state = State()
def main(page: ft.Page):
data_1 = [
fch.LineChartData(
stroke_width=5,
color=ft.Colors.CYAN,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(0, 3),
fch.LineChartDataPoint(2.6, 2),
fch.LineChartDataPoint(4.9, 5),
fch.LineChartDataPoint(6.8, 3.1),
fch.LineChartDataPoint(8, 4),
fch.LineChartDataPoint(9.5, 3),
fch.LineChartDataPoint(11, 4),
],
)
]
data_2 = [
fch.LineChartData(
stroke_width=5,
color=ft.Colors.CYAN,
curved=True,
rounded_stroke_cap=True,
points=[
fch.LineChartDataPoint(0, 3.44),
fch.LineChartDataPoint(2.6, 3.44),
fch.LineChartDataPoint(4.9, 3.44),
fch.LineChartDataPoint(6.8, 3.44),
fch.LineChartDataPoint(8, 3.44),
fch.LineChartDataPoint(9.5, 3.44),
fch.LineChartDataPoint(11, 3.44),
],
)
]
chart = fch.LineChart(
expand=True,
data_series=data_1,
min_y=0,
max_y=6,
min_x=0,
max_x=11,
border=ft.Border.all(3, ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE)),
horizontal_grid_lines=fch.ChartGridLines(
interval=1, color=ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE), width=1
),
vertical_grid_lines=fch.ChartGridLines(
interval=1, color=ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE), width=1
),
tooltip=fch.LineChartTooltip(
bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.BLUE_GREY)
),
left_axis=fch.ChartAxis(
label_size=40,
labels=[
fch.ChartAxisLabel(
value=1,
label=ft.Text("10K", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=3,
label=ft.Text("30K", size=14, weight=ft.FontWeight.BOLD),
),
fch.ChartAxisLabel(
value=5,
label=ft.Text("50K", size=14, weight=ft.FontWeight.BOLD),
),
],
),
bottom_axis=fch.ChartAxis(
label_size=32,
labels=[
fch.ChartAxisLabel(
value=2,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="MAR",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
fch.ChartAxisLabel(
value=5,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="JUN",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
fch.ChartAxisLabel(
value=8,
label=ft.Container(
margin=ft.Margin(top=10),
content=ft.Text(
value="SEP",
size=16,
weight=ft.FontWeight.BOLD,
color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE),
),
),
),
],
),
)
def toggle_data(e: ft.Event[ft.Button]):
if state.toggled:
chart.data_series = data_2
chart.interactive = False
else:
chart.data_series = data_1
chart.interactive = True
state.toggled = not state.toggled
chart.update()
page.add(
ft.SafeArea(
expand=True,
content=ft.Column(
expand=True,
controls=[
ft.Button("avg", on_click=toggle_data),
chart,
],
),
)
)
if __name__ == "__main__":
ft.run(main)
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data_series | list[LineChartData] | [] | A list of LineChartData controls drawn as separate lines on a chart. |
animation | ft.AnimationValue | ft.Animation(duration=ft.Duration(milliseconds=150)() | Controls chart implicit animation. |
interactive | bool | True | Enables automatic tooltips and points highlighting when hovering over the chart. |
point_line_start | Optional[ft.Number] | None | The start of the vertical line drawn under the selected point. Defaults to chart's bottom edge. |
point_line_end | Optional[ft.Number] | None | The end of the vertical line drawn at selected point position. Defaults to data point's y value. |
bgcolor | Optional[ft.ColorValue] | None | Background color of the chart. |
border | Optional[ft.Border] | None | The border around the chart. |
horizontal_grid_lines | Optional[ChartGridLines] | None | Controls drawing of chart's horizontal lines. |
vertical_grid_lines | Optional[ChartGridLines] | None | Controls drawing of chart's vertical lines. |
left_axis | Optional[ChartAxis] | None | Defines the appearance of the left axis, its title and labels. |
top_axis | Optional[ChartAxis] | None | Defines the appearance of the top axis, its title and labels. |
right_axis | Optional[ChartAxis] | None | Defines the appearance of the right axis, its title and labels. |
bottom_axis | Optional[ChartAxis] | None | Defines the appearance of the bottom axis, its title and labels. |
baseline_x | Optional[ft.Number] | None | Baseline value for X axis. |
min_x | Optional[ft.Number] | None | Defines the minimum displayed value for X axis. |
max_x | Optional[ft.Number] | None | Defines the maximum displayed value for X axis. |
baseline_y | Optional[ft.Number] | None | Baseline value for Y axis. |
min_y | Optional[ft.Number] | None | Defines the minimum displayed value for Y axis. |
max_y | Optional[ft.Number] | None | Defines the maximum displayed value for Y axis. |
tooltip | Optional[LineChartTooltip] | LineChartTooltip(() | The tooltip configuration for this chart. If set to None, no tooltips will be shown throughout this chart. |
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 的闭区间内。 |
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。 |
只读属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
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_event | Optional[ft.EventHandler[LineChartEvent]] | None | Fires when a chart line is hovered or clicked. |
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 属性包含动画的名称。 详见 此处. |
方法
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
is_isolated | — | — | Return whether this control is marked as isolated. 被隔离的控件不会参与父级驱动的更新遍历，需要自行管理更新边界。 |
init | — | — | Called after control instance initialization and before the first build / update cycle. 可重写此钩子执行依赖于已初始化字段的轻量设置。 不要在这里调用 update()。 |
build | — | — | 在控件初始化期间调用一次，用于定义其子控件。 page 属性在此方法中可用。 |
before_update | — | — | 每次控件即将更新时调用。 Note: 不要在此处调用 update()。 |
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。 在修改控件状态或属性后调用。 控件必须已挂载到页面，并且未被冻结。 |
