图形组件

你可以使用此组件显示传感器值（一个或多个）的图形。用于图形的状态值在传感器更新时被存储在内存中，设备重启后将会丢失。

示例：

带网格、边框和线型选项的图形组件。

graph:
  # Show bare-minimum auto-ranged graph
  - id: single_temperature_graph
    sensor: my_temperature
    duration: 1h
    width: 151
    height: 51
  # Show multi-trace graph
  - id: multi_temperature_graph
    duration: 1h
    x_grid: 10min
    y_grid: 1.0     # degC/div
    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（必选，Time）：图形的总历史记录时长。
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（必选，Font）：轨迹名称使用的字体。
value_font（可选，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: |-
          // Draw the graph at position [x=10,y=20]
          it.graph(10, 20, id(single_temperature_graph));
      - id: page2
        lambda: |-
          // Draw the graph at position [x=10,y=20]
          it.graph(10, 20, id(multi_temperature_graph), my_yellow);
      - id: page3
        lambda: |-
          // Draw graph and legend
          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() 单独绘制，可以独立于图形进行定位。
如未指定，图例尺寸会根据字体大小和轨迹数量自动计算。