M5Chart

M5Chart 是一个多功能的图表组件,允许用户创建各种类型的图表,包括折线图和柱状图。它提供了数据可视化、自定义和用户界面交互等功能。

UiFlow2 应用示例

温度折线图

在 UiFlow2 中打开 cores3_chart_line_example.m5f2 项目。

此示例演示如何创建折线图来可视化随时间变化的温度数据。

UiFlow2 代码块：

cores3_chart_line_example.png

示例输出：

显示温度数据的折线图,带有标记的坐标轴和网格线。

MicroPython 应用示例

温度折线图

此示例演示如何通过编程方式创建折线图来可视化温度数据。

MicroPython 代码块：

# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
#
# SPDX-License-Identifier: MIT

import os, sys, io
import M5
from M5 import *
import m5ui
import lvgl as lv
from hardware import Pin
from hardware import I2C
from unit import ENVUnit
import time


page0 = None
chart0 = None
i2c0 = None
series_temp = None
series_humi = None
env3_0 = None


def setup():
    global page0, chart0, i2c0, series_temp, series_humi, env3_0

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    chart0 = m5ui.M5Chart(
        x=43,
        y=40,
        w=240,
        h=160,
        chart_type=lv.chart.TYPE.LINE,
        point_num=10,
        hdiv=3,
        vdiv=5,
        bg_radius=7,
        bg_c=0xFFFFFF,
        border_c=0xE0E0E0,
        border_w=2,
        parent=page0,
    )
    chart0.y_axis1_init(
        min_value=0,
        max_value=50,
        major_ticks=3,
        major_tick_len=10,
        minor_ticks=2,
        minor_tick_len=5,
        label_show=True,
    )
    chart0.y_axis2_init(
        min_value=0,
        max_value=100,
        major_ticks=3,
        major_tick_len=10,
        minor_ticks=2,
        minor_tick_len=5,
        label_show=True,
    )

    i2c0 = I2C(0, scl=Pin(1), sda=Pin(2), freq=100000)
    env3_0 = ENVUnit(i2c=i2c0, type=3)
    page0.screen_load()
    series_temp = chart0.add_series(0xFF0000, lv.chart.AXIS.PRIMARY_Y)
    series_humi = chart0.add_series(0x009900, lv.chart.AXIS.SECONDARY_Y)
    chart0.set_update_mode(lv.chart.UPDATE_MODE.SHIFT)
    chart0.align_to(page0, lv.ALIGN.CENTER, 0, 0)
    chart0.set_style_size(0, 0, lv.PART.INDICATOR | lv.STATE.DEFAULT)


def loop():
    global page0, chart0, i2c0, series_temp, series_humi, env3_0
    M5.update()
    chart0.set_next_value(series_temp, int(env3_0.read_temperature()))
    chart0.set_next_value(series_humi, int(env3_0.read_humidity()))
    time.sleep(1)


if __name__ == "__main__":
    try:
        setup()
        while True:
            loop()
    except (Exception, KeyboardInterrupt) as e:
        try:
            m5ui.deinit()
            from utility import print_error_msg

            print_error_msg(e)
        except ImportError:
            print("please update to latest firmware")

示例输出：

显示温度数据的折线图,带有标记的坐标轴和网格线。

API参考

M5Chart

class m5ui.chart.M5Chart(*args, **kwargs)

基类：chart

创建一个图表对象。

参数:

  • x (int) – 图表位置的 X 坐标。默认为 0。

  • y (int) – 图表位置的 Y 坐标。默认为 0。

  • w (int) – 图表的宽度。默认为 200。

  • h (int) – 图表的高度。默认为 100。

  • chart_type (int) – 图表的类型。lv.chart.TYPE.LINE、lv.chart.TYPE.BAR 等。默认为 lv.chart.TYPE.LINE。

  • point_num (int) – 图表中的点数。默认为 10。

  • hdiv (int) – 水平分割线的数量。默认为 0(无线条)。

  • vdiv (int) – 垂直分割线的数量。默认为 0(无线条)。

  • bg_radius (int) – 背景圆角半径。默认为 7。

  • bg_c (int) – 十六进制格式的背景颜色。默认为 0xFFFFFF(白色)。

  • border_c (int) – 十六进制格式的边框颜色。默认为 0xE0E0E0(浅灰色)。

  • border_w (int) – 边框宽度。默认为 2。

  • parent (lv.obj) – 父 LVGL 对象。默认为活动屏幕。

set_flag(flag, value)

在对象上设置标志。如果 value 为 True,则添加标志;如果为 False,则移除标志。

参数:

  • flag (int) – 要设置的标志。

  • value (bool) – 如果为 True,则添加标志;如果为 False,则移除标志。

返回:

None

UiFlow2 代码块：

set_flag.png

MicroPython 代码块：

chart_0.set_flag(lv.obj.FLAG.HIDDEN, True)
toggle_flag(flag)

切换对象上的标志。如果标志已设置,则将其移除;如果未设置,则添加它。

参数:

flag (int) – 要切换的标志。

返回:

None

UiFlow2 代码块：

toggle_flag.png

MicroPython 代码块：

chart_0.toggle_flag(lv.obj.FLAG.HIDDEN)
add_event_cb(handler, event, user_data)

为图表添加事件回调。当指定的事件发生时,将调用回调函数。

参数:

  • handler (function) – 要调用的回调函数。

  • event (int) – 要监听的事件。

  • user_data (Any) – 传递给回调的可选用户数据。

返回:

None

UiFlow2 代码块：

event.png

MicroPython 代码块：

def chart_0_value_changed_event(event_struct):
    global page0, button0
    print("value changed)

def chart_0_event_handler(event_struct):
    global page0, button0
    event = event_struct.code
    obj = event_struct.get_target_obj()
    if event == lv.EVENT.VALUE_CHANGED:
        chart_0_value_changed_event(event_struct)
    return

chart_0.add_event_cb(chart_0_event_handler, lv.EVENT.ALL, None)
set_bg_color(color, opa, part)

设置图表的背景颜色。

参数:

  • color (int) – 要设置的颜色。

  • opa (int) – 颜色的不透明度。值应在 0(透明)到 255(不透明)之间。

  • part (int) – 要应用样式的对象部分(例如 lv.PART.MAIN)。

返回:

None

UiFlow2 代码块：

set_bg_color.png

MicroPython 代码块：

chart_0.set_bg_color(lv.color_hex(0xFFFFFF), 255, lv.PART.MAIN | lv.STATE.DEFAULT)
set_border_color(color, opa, part)

设置图表的边框颜色。

参数:

  • color (int) – 要设置的颜色。

  • opa (int) – 颜色的不透明度。值应在 0(透明)到 255(不透明)之间。

  • part (int) – 要应用样式的对象部分(例如 lv.PART.MAIN)。

返回:

None

UiFlow2 代码块：

set_border_color.png

MicroPython 代码块：

chart_0.set_border_color(lv.color_hex(0x2196F3), 255, lv.PART.MAIN | lv.STATE.DEFAULT)
set_style_border_width(width, part)

设置图表的宽度。

参数:

  • width (int) – 要设置的宽度。

  • part (int) – 要应用样式的对象部分(例如 lv.PART.MAIN)。

返回:

None

UiFlow2 代码块：

set_style_border_width.png

MicroPython 代码块：

chart_0.set_style_border_width(2, lv.PART.MAIN | lv.STATE.DEFAULT)
set_type(chart_type)

设置图表的类型。

参数:

chart_type (int) – 图表的类型(例如 lv.chart.TYPE.LINE、lv.chart.TYPE.BAR)。

返回:

None

UiFlow2 代码块：

set_type.png

MicroPython 代码块：

chart_0.set_type(lv.chart.TYPE.LINE)
set_point_count(count)

设置图表中的点数。

参数:

count (int) – 点的数量。

返回:

None

UiFlow2 代码块：

set_point_count.png

MicroPython 代码块：

chart_0.set_point_count(10)
set_update_mode(mode)

设置图表的更新模式。

参数:

mode (int) – 更新模式(例如 lv.chart.UPDATE_MODE.CIRCULAR、lv.chart.UPDATE_MODE.SHIFT)。

返回:

None

UiFlow2 代码块：

set_update_mode.png

MicroPython 代码块：

chart_0.set_update_mode(lv.chart.UPDATE_MODE.CIRCULAR)
set_div_line_count(hdiv, vdiv)

设置图表上的分割线数量。

参数:

  • hdiv (int) – 水平分割线的数量。

  • vdiv (int) – 垂直分割线的数量。

返回:

None

UiFlow2 代码块：

set_div_line_count.png

MicroPython 代码块：

chart_0.set_div_line_count(5, 5)
get_type()

获取图表的类型。

返回:

图表的类型。

UiFlow2 代码块：

get_type.png

MicroPython 代码块：

chart_type = chart_0.get_type()
get_point_count()

获取图表中的点数。

返回:

点的数量。

返回类型:

int

UiFlow2 代码块：

get_point_count.png

MicroPython 代码块：

point_count = chart_0.get_point_count()
remove_series(series)

从图表中移除一个数据序列。

参数:

series (lv.chart.Series) – 要移除的数据序列。

返回:

None

UiFlow2 代码块：

remove_series.png

MicroPython 代码块：

chart_0.remove_series(series_0)
hide_series(series)

隐藏图表上的数据序列。

参数:

series (lv.chart.Series) – 要隐藏的数据序列。

返回:

None

UiFlow2 代码块：

hide_series.png

MicroPython 代码块：

chart_0.hide_series(series_0)
set_next_value(series, value)

根据更新模式策略设置下一个点的 Y 值。

参数:

  • series (lv.chart.Series) – 要更新的数据序列。

  • value (int) – 要设置的 Y 值。

返回:

None

UiFlow2 代码块：

set_next_value.png

MicroPython 代码块：

chart_0.set_next_value(series_0, 50)
get_pressed_point()

获取图表上被按下的点的索引。

返回:

被按下的点的索引。

返回类型:

int

UiFlow2 代码块：

get_pressed_point.png

MicroPython 代码块：

pressed_point_index = chart_0.get_pressed_point()
set_style_radius(radius, part)

设置图表的圆角半径。

参数:

  • radius (int) – 要设置的半径。

  • part (int) – 要应用样式的对象部分(例如 lv.PART.INDICATOR)。

返回:

None

UiFlow2 代码块：

set_style_radius.png

MicroPython 代码块：

chart_0.set_style_radius(10, lv.PART.INDICATOR | lv.STATE.DEFAULT)
set_style_size(w, h, part)

设置图表的大小。

参数:

  • w (int) – 要设置的宽度。

  • h (int) – 要设置的高度。

  • part (int) – 要应用样式的对象部分(例如 lv.PART.INDICATOR)。

返回:

None

UiFlow2 代码块：

set_style_size.png

MicroPython 代码块：

chart_0.set_style_size(0, 0, lv.PART.INDICATOR | lv.STATE.DEFAULT)
set_pos(x, y)

设置图表的位置。

参数:

  • x (int) – 图表的 x 坐标。

  • y (int) – 图表的 y 坐标。

返回:

None

UiFlow2 代码块：

set_pos.png

MicroPython 代码块：

chart_0.set_pos(100, 100)
set_x(x)

设置图表的 x 坐标。

参数:

x (int) – 图表的 x 坐标。

返回:

None

UiFlow2 代码块：

set_x.png

MicroPython 代码块：

chart_0.set_x(100)
set_y(y)

设置图表的 y 坐标。

参数:

y (int) – 图表的 y 坐标。

返回:

None

UiFlow2 代码块：

set_y.png

MicroPython 代码块：

chart_0.set_y(100)
align_to(obj, align, x, y)

将图表对齐到另一个对象。

参数:

  • obj (lv.obj) – 要对齐到的对象。

  • align (int) – 对齐类型。

  • x (int) – 从对齐对象的 x 偏移量。

  • y (int) – 从对齐对象的 y 偏移量。

返回:

None

UiFlow2 代码块：

align_to.png

MicroPython 代码块：

chart_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)
set_size(width, height)

设置图表的大小。

参数:

  • width (int) – 图表的宽度。

  • height (int) – 图表的高度。

返回:

None

UiFlow2 代码块：

set_size.png

MicroPython 代码块：

chart_0.set_size(200, 30)
set_width(width)

设置图表的宽度。

参数:

width (int) – 图表的宽度。

返回:

None

UiFlow2 代码块：

set_width.png

MicroPython 代码块：

chart_0.set_width(200)
get_width()

获取图表的宽度。

返回:

图表的宽度。

返回类型:

int

UiFlow2 代码块：

get_width.png

MicroPython 代码块：

width = chart_0.get_width()
set_height(height)

设置图表的高度。

参数:

height (int) – 图表的高度。

返回:

None

UiFlow2 代码块：

set_height.png

MicroPython 代码块：

chart_0.set_height(30)
get_height()

获取图表的高度。

返回:

图表的高度。

返回类型:

int

UiFlow2 代码块：

get_height.png

MicroPython 代码块：

height = chart_0.get_height()
x_axis_init(width=lvgl.pct, height=50, mode=lvgl.scale.MODE.HORIZONTAL_BOTTOM, min_value=0, max_value=100, major_ticks=5, major_tick_len=10, minor_ticks=2, minor_tick_len=5, label_show=True)

初始化 X 轴。

参数:

  • width (int) – X 轴的宽度。默认为 lv.pct(100)。

  • height (int) – X 轴的高度。默认为 50。

  • mode (int) – X 轴的模式。默认为 lv.scale.MODE.HORIZONTAL_BOTTOM。

  • min_value (int) – X 轴的最小值。默认为 0。

  • max_value (int) – X 轴的最大值。默认为 100。

  • major_ticks (int) – X 轴上的主刻度数量。默认为 5。

  • major_tick_len (int) – 主刻度的长度。默认为 10。

  • minor_ticks (int) – 主刻度之间的次刻度数量。默认为 2。

  • minor_tick_len (int) – 次刻度的长度。默认为 5。

  • label_show (bool) – 是否在 X 轴上显示标签。默认为 True。

y_axis1_init(width=50, height=lvgl.pct, mode=lvgl.scale.MODE.VERTICAL_LEFT, min_value=0, max_value=100, major_ticks=5, major_tick_len=10, minor_ticks=2, minor_tick_len=5, label_show=True)

初始化主 Y 轴。

参数:

  • width (int) – Y 轴的宽度。默认为 50。

  • height (int) – Y 轴的高度。默认为 lv.pct(100)。

  • mode (int) – Y 轴的模式。默认为 lv.scale.MODE.VERTICAL_LEFT。

  • min_value (int) – Y 轴的最小值。默认为 0。

  • max_value (int) – Y 轴的最大值。默认为 100。

  • major_ticks (int) – Y 轴上的主刻度数量。默认为 5。

  • major_tick_len (int) – 主刻度的长度。默认为 10。

  • minor_ticks (int) – 主刻度之间的次刻度数量。默认为 2。

  • minor_tick_len (int) – 次刻度的长度。默认为 5。

  • label_show (bool) – 是否在 Y 轴上显示标签。默认为 True。

y_axis2_init(width=50, height=lvgl.pct, mode=lvgl.scale.MODE.VERTICAL_RIGHT, min_value=0, max_value=100, major_ticks=5, major_tick_len=10, minor_ticks=2, minor_tick_len=5, label_show=True)

初始化次 Y 轴。

参数:

  • width (int) – Y 轴的宽度。默认为 50。

  • height (int) – Y 轴的高度。默认为 lv.pct(100)。

  • mode (int) – Y 轴的模式。默认为 lv.scale.MODE.VERTICAL_RIGHT。

  • min_value (int) – Y 轴的最小值。默认为 0。

  • max_value (int) – Y 轴的最大值。默认为 100。

  • major_ticks (int) – Y 轴上的主刻度数量。默认为 5。

  • major_tick_len (int) – 主刻度的长度。默认为 10。

  • minor_ticks (int) – 主刻度之间的次刻度数量。默认为 2。

  • minor_tick_len (int) – 次刻度的长度。默认为 5。

  • label_show (bool) – 是否在 Y 轴上显示标签。默认为 True

set_axis_range(axis, min_value, max_value)

设置指定坐标轴的范围。

参数:

  • axis (int) – 要设置范围的坐标轴。lv.chart.AXIS.PRIMARY_X、lv.chart.AXIS.PRIMARY_Y 或 lv.chart.AXIS.SECONDARY_Y。

  • min_value (int) – 坐标轴的最小值。

  • max_value (int) – 坐标轴的最大值。

UiFlow2 代码块：

set_axis_range.png

MicroPython 代码块：

chart_0.set_axis_range(lv.chart.AXIS.PRIMARY_Y, 0, 200)
add_series(color, axis)

向图表添加数据序列。

参数:

  • color (int) – 十六进制格式的序列颜色。

  • axis (int) – 与序列关联的坐标轴。lv.chart.AXIS.PRIMARY_Y 或 lv.chart.AXIS.SECONDARY_Y。

UiFlow2 代码块：

add_series.png

MicroPython 代码块：

series_0 = chart_0.add_series(0xFF0000, lv.chart.AXIS.PRIMARY_Y)
set_series_color(series, color)

设置数据序列的颜色。

参数:

  • series – 要设置颜色的序列。

  • color (int) – 十六进制格式的序列颜色。

UiFlow2 代码块：

set_series_color.png

MicroPython 代码块：

chart_0.set_series_color(series_0, 0x00FF00)
get_series_color(series)

获取数据序列的颜色。

参数:

series – 要获取颜色的序列。

返回:

十六进制格式的序列颜色。

返回类型:

int

UiFlow2 代码块：

get_series_color.png

MicroPython 代码块：

color = chart_0.get_series_color(series_0)
set_series_values(series, values, size=-1)

设置数据序列的值。

参数:

  • series – 要设置值的序列。

  • values (list) – 要设置的值列表。

  • size (int) – 要设置的值的数量。默认为 -1(设置所有值)。

UiFlow2 代码块：

set_series_values.png

MicroPython 代码块：

chart_0.set_series_values(series_0, [10, 20, 30, 40, 50])