图结构

参考：图结构 & renderers

import plotly.express as px
from plotly import graph_objects as go

go.FigureWidget(); # 初始化

图的属性

先看简单的折线图：

fig = px.line(x=["a", "b", "c"], 
              y=[1, 3, 2], title="样例图")
fig

Figure 存在三个顶级属性：data、layout 以及 frames。

data

data 的值必须是称为“轨迹”（“traces”）的字典列表。

• 每个轨迹可能是超过 40 种类型中的一种(见下面按子图类型组织的列表，包括例如 Scatter Plots、Bar Charts、Pie Charts、3D Surface Plots、Choropleth Maps，并表示一组相关的图形标记。每个轨迹必须有一个 type 属性，该属性定义其他被允许的属性。

• 每个轨迹都绘制在一个 Subplots 上，该子图的类型必须与轨迹的类型兼容，或者是它自己的子图(参见下面)。

• 轨迹可能只有一个 Legends 项，但饼图和漏斗区域轨迹（funnelarea traces）除外(见下文)。

• 某些轨迹类型支持 带有关联颜色条的连续颜色，当使用 coloraxis 属性时，可以通过轨迹内的属性或布局内的属性来控制颜色条。

layout

图的三个顶级属性中的第二个是 layout，它的值在文本中称为”布局”，必须是一个字典，包含控制图中非数据相关部分的定位和配置的属性，例如：

• 尺寸和边距，定义了“纸张坐标”的边界

• 图的默认值：模板、字体、标题、颜色、悬停标签 和 mobar

• 可在容器和/或纸坐标中定位 标题 和 Legends

• 可在纸坐标中定位 标题 和 颜色轴和相关的颜色条

• 各种类型的子图，可在其上绘制多个轨迹，并在纸坐标中定位：

  • xaxis, yaxis, xaxis2, yaxis3 等：X 和 Y 笛卡儿轴，它们的交点是笛卡儿子图

  • scene, scene2, scene3等：3D 场景子图

  • ternary, ternary2, ternary3, polar, polar2, polar3, geo, geo2, geo3, mapbox, mapbox2, mabox3等：三元，极坐标，地理或 mapbox 子图

• 非数据标记，可以在纸坐标中定位，也可以在链接到二维笛卡尔子图的数据坐标中定位

  • annotations：带有或不带有箭头的文本注释

  • shapes：直线，矩形，椭圆或开放或封闭的路径

  • images：背景或装饰图像

• 可以在纸坐标中定位的控件，当用户与之交互时，可以触发 Plotly.js 函数

  • updatemenus：自定义按钮 和 Dropdown Menus

  • sliders：Sliders

frames

图的三个顶级属性中的第三个是 frames，它的值必须是一个字典列表，在 animation plot 中定义顺序帧。每个帧包含自己的数据属性和其他参数。动画通常是通过 layout.sliders 和/或 layout.updatemenus 定义的控件来触发和控制的。

属性设置

plotly.graph_objects 模块包含自动生成的 Python 类层次结构，这些类代表图模式中的非叶子属性，并为它们提供了一个 Python API。当 操作 plotly.graph_objects.Figure 对象 时，属性可以直接使用 Python 对象属性设置，例如fig.layout.title.font.family="Open Sans"或使用 update 方法和 魔法下划线表示法，例如 fig.update_layout(title_font_family="Open Sans")。

坐标系

在图布局中配置的各种图组件支持名为 x 或 y 的定位属性，它们的值可以在“纸坐标”（有时称为“绘图分数”（“plot fractions”）或“标准化坐标”（“normalized coordinates”））中指定。例如，包含 layout.xaxis.domain 或 layout.legend.x 或 layout.annotation[].x。

在纸坐标中定位不是绝对像素，而是相对于原点 \((0, 0)\) 在 (layout.margin.l, layout.margin.b)，且 \((1, 1)\) 在 (layout.width-layout.margin.r, layout.height-layout.margin.t) 处定义的（注：layout.margin 是像素值，layout.width 也是）。允许纸张坐标值小于 \(0\) 或大于 \(1\)，指示 plot 边缘的区域。

要在“纸”坐标中定位对象，相应的轴参考系被设置为 "paper"。例如，形状的 xref 属性将被设置为 "paper"，因此形状的 x 值指的是它在纸坐标中的位置。

请注意 layout.margin 属性的内容，默认情况下是根据某些项（如标题或图例）的位置和尺寸计算的，当将 layout.xaxis.autommargin 属性设置为 True 时，也可以根据 tick 标签的位置和尺寸计算。这将自动增加边界值，从而缩小 \((0, 0)\) 和 \((1, 1)\) 点之间定义的物理区域。将某些项定位于小于 \(0\) 或大于 \(1\) 的纸坐标也会触发此行为。然而，layout.width 和 layout.height 被认为是既定的，所以这个图永远不会因其内容而增加或减少。

图形标题可以使用“容器坐标”来定位，容器坐标 \((0,0)\) 和 \((1,1)\) 分别锚定在图形的左下和右上，因此与 layout.margin 的值无关。

此外，形状、注释和图像可以相对于轴的域放置，例如，x 值为 \(0.5\) 将把对象放置在 x 轴的中间位置，而不管 layout.xaxis.domain 属性中指定的域是什么。可以通过在对象的 axis 引用属性中向 axis 引用添加 'domain' 来指定此行为。例如，为形状设置 yref = 'y2 domain' 将引用命名为 y2 的轴的长度和位置。