图表组件

您可以使用此组件显示传感器值的图表。用于图表的状态在传感器更新时存储在内存中，并在设备重启时丢失。

示例：

图表组件具有网格、边框和线条类型选项。

graph:
  # 显示最小自动范围图表
  - id: single_temperature_graph
    sensor: my_temperature
    duration: 1h
    width: 151
    height: 51
  # 显示多轨迹图表
  - id: multi_temperature_graph
    duration: 1h
    x_grid: 10min
    y_grid: 1.0     # 度/格
    width: 151
    height: 51
    traces:
      - sensor: my_inside_temperature
        line_type: DASHED
        line_thickness: 2
        color: my_red
      - sensor: my_outside_temperature
        line_type: SOLID
        continuous: true
        line_thickness: 3
        color: my_blue
      - sensor: my_beer_temperature
        line_type: DOTTED
        line_thickness: 2
        color: my_green

配置变量

id (必需, ID): 用于稍后在显示代码中引用图表的 ID。
width (必需, int): 图表宽度（像素）
height (必需, int): 图表高度（像素）
duration (必需, 时间): 图表历史记录的总持续时间。
border (可选, boolean): 指定是否在图表周围绘制边框。默认为 True。
x_grid (可选): 指定每格的时间。如果未指定，则不会绘制垂直网格。
y_grid (可选, float): 指定每格的单位数。如果未指定，则不会绘制水平网格。
max_range (可选): 指定 Y 轴最大范围。
min_range (可选): 指定 Y 轴最小范围。
max_value (可选): 指定 Y 轴最大值。
min_value (可选): 指定 Y 轴最小值。
traces (可选): 使用此选项指定多个轨迹。
legend (可选): 配置图表轨迹的图例。请参阅图例选项。

轨迹特定字段：

sensor (可选, ID): 要绘制的传感器值
line_thickness (可选): 默认为 3
line_type (可选): 指定绘制的线条类型。可以是以下之一：SOLID、DOTTED、DASHED。默认为 SOLID。
continuous (可选): 连接各个点以形成连续的线。默认为 false。
color (可选): 设置传感器轨迹的颜色。

图例选项

图例显示轨迹名称、当前值、单位和线条样式示例。每个图表仅支持一个图例。

name_font (必需, 字体): 用于轨迹名称的字体。
value_font (可选, 字体): 用于当前值的字体。如果未指定，则不显示值。
width (可选, int): 图例宽度（像素）。如果未指定，则自动计算宽度。
height (可选, int): 图例高度（像素）。如果未指定，则自动计算高度。
border (可选, boolean): 在图例周围绘制边框。默认为 true。
show_lines (可选, boolean): 显示线条样式示例。默认为 true。
show_values (可选): 当前值的位置。可以是 NONE、AUTO、BESIDE、BELOW。默认为 AUTO。
show_units (可选, boolean): 在值中包含单位。默认为 true。
direction (可选): 布局方向。可以是 AUTO、HORIZONTAL、VERTICAL。默认为 AUTO。

带图例的示例：

graph:
  - id: temperature_graph_with_legend
    duration: 1h
    width: 151
    height: 51
    traces:
      - sensor: indoor_temp
        name: "Indoor"
        line_type: SOLID
        color: my_red
      - sensor: outdoor_temp
        name: "Outdoor"
        line_type: DASHED
        color: my_blue
    legend:
        name_font: legend_font
        value_font: value_font
        show_values: BELOW
        border: true
        show_lines: true
        show_units: true

font:
  - file: "arial.ttf"
    id: legend_font
    size: 10
  - file: "arial.ttf"
    id: value_font
    size: 8

然后在代码中：

display:
  - platform: ...
    # ...
    pages:
      - id: page1
        lambda: |-
          // 在位置 [x=10,y=20] 绘制图表
          it.graph(10, 20, id(single_temperature_graph));
      - id: page2
        lambda: |-
          // 在位置 [x=10,y=20] 绘制图表
          it.graph(10, 20, id(multi_temperature_graph), my_yellow);
      - id: page3
        lambda: |-
          // 绘制图表和图例
          it.graph(10, 20, id(temperature_graph_with_legend));
          it.legend(170, 20, id(temperature_graph_with_legend), my_yellow);

color:
  - id: my_red
    red: 100%
    green: 0%
    blue: 0%
  - id: my_green
    red: 0%
    green: 100%
    blue: 0%
  - id: my_blue
    red: 0%
    green: 0%
    blue: 100%
  - id: my_yellow
    red: 100%
    green: 100%
    blue: 0%

NOTE

以下是一些注意事项：

设置 y_grid 会将任何指定的范围扩展到网格间距的最近倍数。
目前无法自动显示轴标签，需要手动放置。
网格和边框颜色通过 it.graph() 设置，而轨迹是单独定义的。
图例使用 it.legend() 单独绘制，可以独立于图表定位。
如果未指定，图例尺寸会根据字体大小和轨迹数量自动计算。