PlotlyChart
显示 Plotly 图表。
示例
线图
以下示例基于 Plotly 文档中的原始示例。
import plotly.express as px
import flet as ft
from flet.plotly_chart import PlotlyChart
def main(page: ft.Page):
df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country")
page.add(PlotlyChart(fig, expand=True))
ft.app(target=main)
条形图
以下示例基于 Plotly 文档中的原始示例。
import plotly.express as px
import flet as ft
from flet.plotly_chart import PlotlyChart
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(PlotlyChart(fig, expand=True))
ft.app(target=main)
饼图
以下示例基于 Plotly 文档中的原始示例。
import plotly.graph_objects as go
import flet as ft
from flet.plotly_chart import PlotlyChart
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(PlotlyChart(fig, expand=True))
ft.app(target=main)
箱线图
以下示例基于 Plotly 文档中的原始示例。
import plotly.graph_objects as go
import flet as ft
from flet.plotly_chart import PlotlyChart
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 for each value of x
)
page.add(PlotlyChart(fig, expand=True))
ft.app(target=main)
属性
figure
要绘制的 Plotly 图形 - plotly.graph_objects.Figure
类的实例。
original_size
True
以原始大小显示图表。 False
(默认) 以配置的边界大小显示图表。
isolated
每次更新页面或父控件时,chart 都会被重新绘制。这可能会影响 Flet 应用的性能。
将 isolated
设置为 True
,以启用显式图表更新。要重新绘制图表,请调用其 update()
方法。