LVGL chart控件

已于 2023-12-28 11:29:44 修改
阅读量1.5k 收藏 36
点赞数 11
分类专栏： LVGL 文章标签： lvgl chart 嵌入式 stm32 ui
于 2023-12-27 19:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42378319/article/details/135225989
版权

LVGL chart控件

基于lvgl 8.3.x

设置图表网格线

创建图表控件后，默认是非常丑的
在这里插入图片描述
设置边框、圆角、背景色之类的和其他控件的API一样

    lv_obj_t* chart = lv_chart_create(screen);
    lv_obj_set_size(chart, 400, 300);
    lv_obj_set_pos(chart, 100, 100);
    lv_obj_set_style_radius(chart, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(chart, 1, LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(chart, LV_BORDER_SIDE_LEFT, LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(chart, lv_color_hex(0xafafaf), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(chart, lv_color_hex(0xFF), 0);

使用图表时一般对图表内的网格线有要求。

  • 网格线条数
	//设置网格线条数
    lv_chart_set_div_line_count(chart, 5, 0);

在这里插入图片描述

  • 网格线离图表边缘的距离
	//设置网格线离图表边缘的距离 下边15  上面30
    lv_obj_set_style_pad_all(chart, 0, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(chart, 15, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(chart, 30, LV_STATE_DEFAULT);

在这里插入图片描述

  • 网格线颜色、宽度、虚实等

想对网格线进行更详细的控制，需要在图表重绘回调函数中对具体的颜色，宽度、虚线实线等进行特殊处理

/**
 * @brief chart 坐标网格线绘制
 * @param e
*/
static void draw_event_cb(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e);

    /*Add the faded area before the lines are drawn*/
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (dsc->part == LV_PART_MAIN) {
        if (dsc->line_dsc == NULL || dsc->p1 == NULL || dsc->p2 == NULL) return;

        /* 网格线 竖线 */
        if (dsc->p1->x == dsc->p2->x) {
            //dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
            //if (dsc->id == 1) {
            //    dsc->line_dsc->width = 0;
            //    dsc->line_dsc->dash_gap = 0;
            //    dsc->line_dsc->dash_width = 0;
            //}
            //else {
            //    dsc->line_dsc->width = 1;
            //    dsc->line_dsc->dash_gap = 6;
            //    dsc->line_dsc->dash_width = 6;
            //}
        }
        /* 网格线 横线 */
        else {
            if (dsc->id == 2 ) {
                /* 第二条线 宽度为1 实线 */
                dsc->line_dsc->width = 1;
                dsc->line_dsc->dash_gap = 0;
                dsc->line_dsc->dash_width = 0;
            }
            else {
                /* 其他线 宽度为2 虚线 */
                dsc->line_dsc->width = 2;
                dsc->line_dsc->dash_gap = 6;
                dsc->line_dsc->dash_width = 1;
            }

            if (dsc->id == 1 || dsc->id == 3) {
                /* 第1、2条线 颜色为绿色 */
                dsc->line_dsc->color = lv_palette_main(LV_PALETTE_GREEN);
            }
            else {
                dsc->line_dsc->color = lv_color_hex(0x6f6f6f);
            }
        }
    }
}
	//添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_ev
    ent_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

在这里插入图片描述

设置图表坐标轴刻度线和标签

/**
 * Enumeration of the axis'
 */
enum {
    LV_CHART_AXIS_PRIMARY_Y     = 0x00,
    LV_CHART_AXIS_SECONDARY_Y   = 0x01,
    LV_CHART_AXIS_PRIMARY_X     = 0x02,
    LV_CHART_AXIS_SECONDARY_X   = 0x04,
    _LV_CHART_AXIS_LAST
};

lvgl的图表分为四个坐标轴，每个坐标轴都可以单独设置数据范围、刻度线和标签
在这里插入图片描述

	//设置 PRIMARY_Y 轴范围 0-40
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 40);
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 20, 10, 5, 5, true, 40);

在这里插入图片描述

/**
 * Set the number of tick lines on an axis
 * @param obj           pointer to a chart object
 * @param axis          那个坐标轴
 * @param major_len     就是上图中主要刻度0、10、20、30、40 横杠的长度
 * @param minor_len     就是上图中次要刻度 横杠的长度
 * @param major_cnt     就是上图中主要刻度 的个数
 * @param minor_cnt     就是上图中两个主要刻度 之间分成 minor_cnt 分
 * @param label_en      是否使用标签
 * @param draw_size     刻度+标签宽度
 */
void lv_chart_set_axis_tick(lv_obj_t * obj, lv_chart_axis_t axis, lv_coord_t major_len, lv_coord_t minor_len,
                            lv_coord_t major_cnt, lv_coord_t minor_cnt, bool label_en, lv_coord_t draw_size);

设置刻度线颜色，标签字体和颜色

在这里插入图片描述

    //设置标签文本颜色 和 字体
    lv_obj_set_style_text_color(chart, lv_color_hex(0xFF0000), LV_PART_TICKS);
    lv_obj_set_style_text_font(chart, &lv_font_montserrat_24, LV_PART_TICKS);

    //设置刻度线颜色
    lv_obj_set_style_line_color(chart, lv_color_hex(0xFF00), LV_PART_TICKS);

标签重绘

有时候不想要默认带的数字标签，想要替换成其他的，需要在重绘回调中对标签进行绘制。

static void draw_label_event_cb(lv_event_t* e)
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
        /* 修改标签字体 */
        //dsc->label_dsc->font = &lv_font_montserrat_24;
        const char* month[] = { "Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec" };
        lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value/10]); //dsc->value 是实际标签的数值
    }
}
	//添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_label_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

在这里插入图片描述

标签重绘显示小数

  • 打开 lv_conf.h 中 宏

开启此宏后，lvgl的 label 可以使用 %f 显示浮点
lv_obj_t* label = lv_label_create(screen);
lv_label_set_text_fmt(label, “%.2f”, 123.5);

/*Change the built in (v)snprintf functions*/
#define LV_SPRINTF_CUSTOM 0
#if LV_SPRINTF_CUSTOM
    #define LV_SPRINTF_INCLUDE <stdio.h>
    #define lv_snprintf  snprintf
    #define lv_vsnprintf vsnprintf
#else   /*LV_SPRINTF_CUSTOM*/
    #define LV_SPRINTF_USE_FLOAT 1
#endif  /*LV_SPRINTF_CUSTOM*/
  • 在重绘回调函数中 对原来标签进行缩放（对应的是原始数据需要进行相应的放大，lvgl chart 不能直接显示浮点小数，只能间接进行显示）

/**
 * @brief chart 坐标网格线绘制
 * @param e
*/
static void draw_event_cb(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e);

    /*Add the faded area before the lines are drawn*/
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (dsc->part == LV_PART_MAIN) {
        if (dsc->line_dsc == NULL || dsc->p1 == NULL || dsc->p2 == NULL) return;

        /* 网格线 竖线 */
        if (dsc->p1->x == dsc->p2->x) {
            //dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
            //if (dsc->id == 1) {
            //    dsc->line_dsc->width = 0;
            //    dsc->line_dsc->dash_gap = 0;
            //    dsc->line_dsc->dash_width = 0;
            //}
            //else {
            //    dsc->line_dsc->width = 1;
            //    dsc->line_dsc->dash_gap = 6;
            //    dsc->line_dsc->dash_width = 6;
            //}
        }
        /* 网格线 横线 */
        else {
            if (dsc->id == 2 ) {
                /* 第二条线 宽度为1 实线 */
                dsc->line_dsc->width = 1;
                dsc->line_dsc->dash_gap = 0;
                dsc->line_dsc->dash_width = 0;
            }
            else {
                /* 其他线 宽度为2 虚线 */
                dsc->line_dsc->width = 2;
                dsc->line_dsc->dash_gap = 6;
                dsc->line_dsc->dash_width = 1;
            }

            if (dsc->id == 1 || dsc->id == 3) {
                /* 第1、2条线 颜色为绿色 */
                dsc->line_dsc->color = lv_palette_main(LV_PALETTE_GREEN);
            }
            else {
                dsc->line_dsc->color = lv_color_hex(0x6f6f6f);
            }
        }
    }
}
static void draw_label_event_cb(lv_event_t* e)
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
        lv_snprintf(dsc->text, dsc->text_length, "%.2f", dsc->value/10.0f); //dsc->value 是实际标签的数值
    }
}

static lv_obj_t* chart_test(void)
{
    
    lv_obj_t* screen = lv_obj_create(NULL);

    lv_obj_t* chart = lv_chart_create(screen);
    lv_obj_set_size(chart, 400, 300);
    lv_obj_set_pos(chart, 100, 100);
    lv_obj_set_style_radius(chart, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(chart, 1, LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(chart, LV_BORDER_SIDE_LEFT, LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(chart, lv_color_hex(0xafafaf), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(chart, lv_color_hex(0xFFFFFF), 0);

    //设置网格线条数
    lv_chart_set_div_line_count(chart, 5, 0);

    //设置网格线离图表边缘的距离
    lv_obj_set_style_pad_all(chart, 0, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(chart, 15, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(chart, 30, LV_STATE_DEFAULT);

    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    //lv_chart_set_type(chart, LV_CHART_TYPE_LINE);   /*Show lines and points too*/

    //设置 PRIMARY_Y 轴范围 0-40
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 40);
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 20, 10, 5, 5, true, 80);

    //设置标签文本颜色 和 字体
    lv_obj_set_style_text_color(chart, lv_color_hex(0xFF0000), LV_PART_TICKS);
    lv_obj_set_style_text_font(chart, &lv_font_montserrat_24, LV_PART_TICKS);

    //设置刻度线颜色 和 宽度
    lv_obj_set_style_line_color(chart, lv_color_hex(0xFF00), LV_PART_TICKS);
    lv_obj_set_style_line_width(chart, 2, LV_PART_TICKS);
    
    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_label_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    return screen;
}

在这里插入图片描述

折线图

折线图起始点有竖线问题

	//设置为折线图
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);

    //为 PRIMARY_Y 轴添加一条折线
    lv_obj_t* series = lv_chart_add_series(chart, lv_color_hex(0x00ffff), LV_CHART_AXIS_PRIMARY_Y);

    lv_chart_set_point_count(chart, 400);

    //设置线宽
    lv_obj_set_style_line_width(chart, 2, LV_PART_ITEMS);
    lv_obj_set_style_line_rounded(chart, 1, LV_PART_ITEMS);

    //不显示数据点
    lv_obj_set_style_size(chart, 0, LV_PART_INDICATOR);
 
    for (int i = 0; i < 200; i++) {
        lv_chart_set_next_value(chart, series, i/10);
    }

在这里插入图片描述
发现折线图起始点有一条竖线，想要这个线消失，可以修改源码 lv_chart.c 中画折线函数

static void draw_series_line(lv_obj_t * obj, lv_draw_ctx_t * draw_ctx)
{
    lv_area_t clip_area;
    if(_lv_area_intersect(&clip_area, &obj->coords, draw_ctx->clip_area) == false) return;

    const lv_area_t * clip_area_ori = draw_ctx->clip_area;
    draw_ctx->clip_area = &clip_area;

    lv_chart_t * chart  = (lv_chart_t *)obj;
    if(chart->point_cnt < 2) return;

    uint16_t i;
    lv_point_t p1;
    lv_point_t p2;
    lv_coord_t border_width = lv_obj_get_style_border_width(obj, LV_PART_MAIN);
    lv_coord_t pad_left = lv_obj_get_style_pad_left(obj, LV_PART_MAIN) + border_width;
    lv_coord_t pad_top = lv_obj_get_style_pad_top(obj, LV_PART_MAIN) + border_width;
    lv_coord_t w     = ((int32_t)lv_obj_get_content_width(obj) * chart->zoom_x) >> 8;
    lv_coord_t h     = ((int32_t)lv_obj_get_content_height(obj) * chart->zoom_y) >> 8;
    lv_coord_t x_ofs = obj->coords.x1 + pad_left - lv_obj_get_scroll_left(obj);
    lv_coord_t y_ofs = obj->coords.y1 + pad_top - lv_obj_get_scroll_top(obj);
    lv_chart_series_t * ser;

    lv_area_t series_clip_area;
    bool mask_ret = _lv_area_intersect(&series_clip_area, &obj->coords, draw_ctx->clip_area);
    if(mask_ret == false) return;

    lv_draw_line_dsc_t line_dsc_default;
    lv_draw_line_dsc_init(&line_dsc_default);
    lv_obj_init_draw_line_dsc(obj, LV_PART_ITEMS, &line_dsc_default);

    lv_draw_rect_dsc_t point_dsc_default;
    lv_draw_rect_dsc_init(&point_dsc_default);
    lv_obj_init_draw_rect_dsc(obj, LV_PART_INDICATOR, &point_dsc_default);

    lv_coord_t point_w = lv_obj_get_style_width(obj, LV_PART_INDICATOR) / 2;
    lv_coord_t point_h = lv_obj_get_style_height(obj, LV_PART_INDICATOR) / 2;

    /*Do not bother with line ending is the point will over it*/
    if(LV_MIN(point_w, point_h) > line_dsc_default.width / 2) line_dsc_default.raw_end = 1;
    if(line_dsc_default.width == 1) line_dsc_default.raw_end = 1;

    /*If there are at least as much points as pixels then draw only vertical lines*/
    bool crowded_mode = chart->point_cnt >= w ? true : false;

    /*Go through all data lines*/
    _LV_LL_READ_BACK(&chart->series_ll, ser) {
        if(ser->hidden) continue;
        line_dsc_default.color = ser->color;
        point_dsc_default.bg_color = ser->color;

        lv_coord_t start_point = lv_chart_get_x_start_point(obj, ser);

        p1.x = x_ofs;
        p2.x = x_ofs;

        lv_coord_t p_act = start_point;
        lv_coord_t p_prev = start_point;
        int32_t y_tmp = (int32_t)((int32_t)ser->y_points[p_prev] - chart->ymin[ser->y_axis_sec]) * h;
        y_tmp  = y_tmp / (chart->ymax[ser->y_axis_sec] - chart->ymin[ser->y_axis_sec]);
        p2.y   = h - y_tmp + y_ofs;

        lv_obj_draw_part_dsc_t part_draw_dsc;
        lv_obj_draw_dsc_init(&part_draw_dsc, draw_ctx);
        part_draw_dsc.class_p = MY_CLASS;
        part_draw_dsc.type = LV_CHART_DRAW_PART_LINE_AND_POINT;
        part_draw_dsc.part = LV_PART_ITEMS;
        part_draw_dsc.line_dsc = &line_dsc_default;
        part_draw_dsc.rect_dsc = &point_dsc_default;
        part_draw_dsc.sub_part_ptr = ser;

        lv_coord_t y_min = p2.y;
        lv_coord_t y_max = p2.y;
        lv_coord_t is_none_point = 0;
        for (i = 0; i < chart->point_cnt; i++) {
            p1.x = p2.x;
            p1.y = p2.y;

            if (p1.x > clip_area_ori->x2 + point_w + 1) break;
            p2.x = ((w * i) / (chart->point_cnt - 1)) + x_ofs;

            p_act = (start_point + i) % chart->point_cnt;

            y_tmp = (int32_t)((int32_t)ser->y_points[p_act] - chart->ymin[ser->y_axis_sec]) * h;
            y_tmp = y_tmp / (chart->ymax[ser->y_axis_sec] - chart->ymin[ser->y_axis_sec]);
            p2.y = h - y_tmp + y_ofs;

            if (p2.x < clip_area_ori->x1 - point_w - 1) {
                p_prev = p_act;
                continue;
            }

            /*Don't draw the first point. A second point is also required to draw the line*/
            if (i != 0) {
                if (crowded_mode) {
                    if (ser->y_points[p_prev] != LV_CHART_POINT_NONE && ser->y_points[p_act] != LV_CHART_POINT_NONE) {
                        /*Draw only one vertical line between the min and max y-values on the same x-value*/
                        y_max = LV_MAX(y_max, p2.y);
                        y_min = LV_MIN(y_min, p2.y);
                        if (p1.x != p2.x) {
                            lv_coord_t y_cur = p2.y;
                            p2.x--;         /*It's already on the next x value*/
                            p1.x = p2.x;
                            p1.y = y_min;
                            p2.y = y_max;
                            if (p1.y == p2.y) p2.y++;    /*If they are the same no line will be drawn*/
                            if (!is_none_point)
                            {
                                lv_draw_line(draw_ctx, &line_dsc_default, &p1, &p2);
                            }
                            else
                            {
                                is_none_point = 0;
                            }
                            p2.x++;         /*Compensate the previous x--*/
                            y_min = y_cur;  /*Start the line of the next x from the current last y*/
                            y_max = y_cur;
                        }
                    }
                    else
                    {
                        is_none_point = 1;
                    }
                }
                else {
                    lv_area_t point_area;
                    point_area.x1 = p1.x - point_w;
                    point_area.x2 = p1.x + point_w;
                    point_area.y1 = p1.y - point_h;
                    point_area.y2 = p1.y + point_h;

                    part_draw_dsc.id = i - 1;
                    part_draw_dsc.p1 = ser->y_points[p_prev] != LV_CHART_POINT_NONE ? &p1 : NULL;
                    part_draw_dsc.p2 = ser->y_points[p_act] != LV_CHART_POINT_NONE ? &p2 : NULL;
                    part_draw_dsc.draw_area = &point_area;
                    part_draw_dsc.value = ser->y_points[p_prev];

                    lv_event_send(obj, LV_EVENT_DRAW_PART_BEGIN, &part_draw_dsc);

                    if(ser->y_points[p_prev] != LV_CHART_POINT_NONE && ser->y_points[p_act] != LV_CHART_POINT_NONE) {
                        lv_draw_line(draw_ctx, &line_dsc_default, &p1, &p2);
                    }

                    if(point_w && point_h && ser->y_points[p_prev] != LV_CHART_POINT_NONE) {
                        lv_draw_rect(draw_ctx, &point_dsc_default, &point_area);
                    }

                    lv_event_send(obj, LV_EVENT_DRAW_PART_END, &part_draw_dsc);
                }

            }
            p_prev = p_act;
        }

        /*Draw the last point*/
        if(!crowded_mode && i == chart->point_cnt) {

            if(ser->y_points[p_act] != LV_CHART_POINT_NONE) {
                lv_area_t point_area;
                point_area.x1 = p2.x - point_w;
                point_area.x2 = p2.x + point_w;
                point_area.y1 = p2.y - point_h;
                point_area.y2 = p2.y + point_h;

                part_draw_dsc.id = i - 1;
                part_draw_dsc.p1 = NULL;
                part_draw_dsc.p2 = NULL;
                part_draw_dsc.draw_area = &point_area;
                part_draw_dsc.value = ser->y_points[p_act];

                lv_event_send(obj, LV_EVENT_DRAW_PART_BEGIN, &part_draw_dsc);
                lv_draw_rect(draw_ctx, &point_dsc_default, &point_area);
                lv_event_send(obj, LV_EVENT_DRAW_PART_END, &part_draw_dsc);
            }
        }
    }

    draw_ctx->clip_area = clip_area_ori;
}

在这里插入图片描述

显示实时曲线

一直左移刷新

请添加图片描述


static lv_obj_t* chart;
#define CHART_DATA_SIZE   (100)
/**
 * @brief chart 坐标网格线绘制
 * @param e
*/
static void draw_event_cb(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e);

    /*Add the faded area before the lines are drawn*/
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (dsc->part == LV_PART_MAIN) {
        if (dsc->line_dsc == NULL || dsc->p1 == NULL || dsc->p2 == NULL) return;

        /* 网格线 竖线 */
        if (dsc->p1->x == dsc->p2->x) {
            //dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
            //if (dsc->id == 1) {
            //    dsc->line_dsc->width = 0;
            //    dsc->line_dsc->dash_gap = 0;
            //    dsc->line_dsc->dash_width = 0;
            //}
            //else {
            //    dsc->line_dsc->width = 1;
            //    dsc->line_dsc->dash_gap = 6;
            //    dsc->line_dsc->dash_width = 6;
            //}
        }
        /* 网格线 横线 */
        else {
            if (dsc->id == 2 ) {
                /* 第二条线 宽度为1 实线 */
                dsc->line_dsc->width = 1;
                dsc->line_dsc->dash_gap = 0;
                dsc->line_dsc->dash_width = 0;
            }
            else {
                /* 其他线 宽度为2 虚线 */
                dsc->line_dsc->width = 2;
                dsc->line_dsc->dash_gap = 6;
                dsc->line_dsc->dash_width = 1;
            }

            if (dsc->id == 1 || dsc->id == 3) {
                /* 第1、2条线 颜色为绿色 */
                dsc->line_dsc->color = lv_palette_main(LV_PALETTE_GREEN);
            }
            else {
                dsc->line_dsc->color = lv_color_hex(0x6f6f6f);
            }
        }
    }
}

static void draw_label_event_cb(lv_event_t* e)
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
        lv_snprintf(dsc->text, dsc->text_length, "%.2f", dsc->value/10.0f); //dsc->value 是实际标签的数值
    }
}


#if 0
extern void lv_chart_set_next_value3(lv_obj_t* obj, lv_chart_series_t* ser, lv_coord_t value);
void chart_add_data(int16_t data)
{
    static int cnt = 0;
    static int16_t max = 0;
    static int16_t min = 0;
    lv_chart_series_t* series = lv_chart_get_series_next(chart, NULL);

    lv_chart_set_next_value3(chart, series, data);
    {
        /* 获取数据点最大值 */
        lv_coord_t* array = lv_chart_get_y_array(chart, series);
        max = data;
        min = data;
        for (int i = 0; i < CHART_DATA_SIZE; i++)
        {
            if (array[i] > max && array[i] != LV_CHART_POINT_NONE)
            {
                max = array[i];
            }

            if (array[i] < min && array[i] != LV_CHART_POINT_NONE)
            {
                min = array[i];
            }
        }

        /* 如果输入范围超出y轴 则修改y轴 */
        if ((min < ((lv_chart_t*)chart)->ymin[0]) || (max > ((lv_chart_t*)chart)->ymax[0]))
        {
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, (min - 9) / 10 * 10, (max + 9) / 10 * 10);
        }
    }
}
#else
void chart_add_data(int16_t data)
{
    static int cnt = 0;
    static int16_t max = 0;
    static int16_t min = 0;
    lv_chart_series_t* series = lv_chart_get_series_next(chart, NULL);
    lv_chart_set_next_value(chart, series, data);

    {
        /* 先从左向右绘制 绘制到最右侧后改为平移模式 */
        if (cnt++ == CHART_DATA_SIZE)
        {
            lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);
        }

        /* 获取数据点最大值 最小值 */
        lv_coord_t* array = lv_chart_get_y_array(chart, series);
        max = data;
        min = data;
        for (int i = 0; i < CHART_DATA_SIZE; i++)
        {
            if (array[i] > max && array[i] != LV_CHART_POINT_NONE)
            {
                max = array[i];
            }

            if (array[i] <  min && array[i] != LV_CHART_POINT_NONE)
            {
                min = array[i];
            }
        }

        /* 如果输入范围超出y轴 则修改y轴 */
        if ((min < ((lv_chart_t*)chart)->ymin[0]) || (max > ((lv_chart_t*)chart)->ymax[0]))
        {
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, (min-9)/10*10, (max+9)/10*10);
        }
    }
}
#endif


static void timer_event_cb(lv_timer_t* t)
{
    chart_add_data(rand()%100);
}

static lv_obj_t* chart_test(void)
{
    
    lv_obj_t* screen = lv_obj_create(NULL);

    chart = lv_chart_create(screen);
    lv_obj_set_size(chart, 400, 300);
    lv_obj_set_pos(chart, 100, 100);
    lv_obj_set_style_radius(chart, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(chart, 1, LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(chart, LV_BORDER_SIDE_LEFT, LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(chart, lv_color_hex(0xafafaf), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(chart, lv_color_hex(0xFFFFFF), 0);

    //设置网格线条数
    lv_chart_set_div_line_count(chart, 5, 0);

    //设置网格线离图表边缘的距离
    lv_obj_set_style_pad_all(chart, 0, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(chart, 15, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(chart, 30, LV_STATE_DEFAULT);

    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    //设置 PRIMARY_Y 轴范围 0-40
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 40);
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 20, 10, 5, 5, true, 80);

    //设置标签文本颜色 和 字体
    lv_obj_set_style_text_color(chart, lv_color_hex(0xFF0000), LV_PART_TICKS);
    //lv_obj_set_style_text_font(chart, &lv_font_montserrat_24, LV_PART_TICKS);

    //设置刻度线颜色 和 宽度
    lv_obj_set_style_line_color(chart, lv_color_hex(0xFF00), LV_PART_TICKS);
    lv_obj_set_style_line_width(chart, 2, LV_PART_TICKS);

    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_label_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    //设置为折线图
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);

    //为 PRIMARY_Y 轴添加一条折线
    lv_obj_t* series = lv_chart_add_series(chart, lv_color_hex(0x00ffff), LV_CHART_AXIS_PRIMARY_Y);

    lv_chart_set_point_count(chart, CHART_DATA_SIZE);

    //设置线宽
    lv_obj_set_style_line_width(chart, 2, LV_PART_ITEMS);
    lv_obj_set_style_line_rounded(chart, 1, LV_PART_ITEMS);

    //不显示数据点
    lv_obj_set_style_size(chart, 0, LV_PART_INDICATOR);

    //循环模式
    lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);

    //创建定时器
    lv_timer_create(timer_event_cb, 100, NULL);

    return screen;
}

循环刷新

请添加图片描述

需要在 lv_chart.c中添加一个自定义函数

void lv_chart_set_next_value3(lv_obj_t* obj, lv_chart_series_t* ser, lv_coord_t value)
{
    LV_ASSERT_OBJ(obj, MY_CLASS);
    LV_ASSERT_NULL(ser);

    lv_chart_t* chart = (lv_chart_t*)obj;
    ser->y_points[ser->start_point] = value;
    invalidate_point(obj, ser->start_point);
    ser->start_point = (ser->start_point + 1) % chart->point_cnt;

    lv_coord_t index = ser->start_point;
    for (int i = 0; i < 20; i++)
    {
        ser->y_points[index] = LV_CHART_POINT_NONE;
        invalidate_point(obj, index);
        index = (index + 1) % chart->point_cnt;
    }
}

static lv_obj_t* chart;
#define CHART_DATA_SIZE   (100)
/**
 * @brief chart 坐标网格线绘制
 * @param e
*/
static void draw_event_cb(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e);

    /*Add the faded area before the lines are drawn*/
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (dsc->part == LV_PART_MAIN) {
        if (dsc->line_dsc == NULL || dsc->p1 == NULL || dsc->p2 == NULL) return;

        /* 网格线 竖线 */
        if (dsc->p1->x == dsc->p2->x) {
            //dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
            //if (dsc->id == 1) {
            //    dsc->line_dsc->width = 0;
            //    dsc->line_dsc->dash_gap = 0;
            //    dsc->line_dsc->dash_width = 0;
            //}
            //else {
            //    dsc->line_dsc->width = 1;
            //    dsc->line_dsc->dash_gap = 6;
            //    dsc->line_dsc->dash_width = 6;
            //}
        }
        /* 网格线 横线 */
        else {
            if (dsc->id == 2 ) {
                /* 第二条线 宽度为1 实线 */
                dsc->line_dsc->width = 1;
                dsc->line_dsc->dash_gap = 0;
                dsc->line_dsc->dash_width = 0;
            }
            else {
                /* 其他线 宽度为2 虚线 */
                dsc->line_dsc->width = 2;
                dsc->line_dsc->dash_gap = 6;
                dsc->line_dsc->dash_width = 1;
            }

            if (dsc->id == 1 || dsc->id == 3) {
                /* 第1、2条线 颜色为绿色 */
                dsc->line_dsc->color = lv_palette_main(LV_PALETTE_GREEN);
            }
            else {
                dsc->line_dsc->color = lv_color_hex(0x6f6f6f);
            }
        }
    }
}

static void draw_label_event_cb(lv_event_t* e)
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
        lv_snprintf(dsc->text, dsc->text_length, "%.2f", dsc->value/10.0f); //dsc->value 是实际标签的数值
    }
}


#if 1
extern void lv_chart_set_next_value3(lv_obj_t* obj, lv_chart_series_t* ser, lv_coord_t value);
void chart_add_data(int16_t data)
{
    static int cnt = 0;
    static int16_t max = 0;
    static int16_t min = 0;
    lv_chart_series_t* series = lv_chart_get_series_next(chart, NULL);

    lv_chart_set_next_value3(chart, series, data);
    {
        /* 获取数据点最大值 */
        lv_coord_t* array = lv_chart_get_y_array(chart, series);
        max = data;
        min = data;
        for (int i = 0; i < CHART_DATA_SIZE; i++)
        {
            if (array[i] > max && array[i] != LV_CHART_POINT_NONE)
            {
                max = array[i];
            }

            if (array[i] < min && array[i] != LV_CHART_POINT_NONE)
            {
                min = array[i];
            }
        }

        /* 如果输入范围超出y轴 则修改y轴 */
        if ((min < ((lv_chart_t*)chart)->ymin[0]) || (max > ((lv_chart_t*)chart)->ymax[0]))
        {
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, (min - 9) / 10 * 10, (max + 9) / 10 * 10);
        }
    }
}
#else
void chart_add_data(int16_t data)
{
    static int cnt = 0;
    static int16_t max = 0;
    static int16_t min = 0;
    lv_chart_series_t* series = lv_chart_get_series_next(chart, NULL);
    lv_chart_set_next_value(chart, series, data);

    {
        /* 先从左向右绘制 绘制到最右侧后改为平移模式 */
        if (cnt++ == CHART_DATA_SIZE)
        {
            lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);
        }

        /* 获取数据点最大值 最小值 */
        lv_coord_t* array = lv_chart_get_y_array(chart, series);
        max = data;
        min = data;
        for (int i = 0; i < CHART_DATA_SIZE; i++)
        {
            if (array[i] > max && array[i] != LV_CHART_POINT_NONE)
            {
                max = array[i];
            }

            if (array[i] <  min && array[i] != LV_CHART_POINT_NONE)
            {
                min = array[i];
            }
        }

        /* 如果输入范围超出y轴 则修改y轴 */
        if ((min < ((lv_chart_t*)chart)->ymin[0]) || (max > ((lv_chart_t*)chart)->ymax[0]))
        {
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, (min-9)/10*10, (max+9)/10*10);
        }
    }
}
#endif


static void timer_event_cb(lv_timer_t* t)
{
    chart_add_data(rand()%100);
}

static lv_obj_t* chart_test(void)
{
    
    lv_obj_t* screen = lv_obj_create(NULL);

    chart = lv_chart_create(screen);
    lv_obj_set_size(chart, 400, 300);
    lv_obj_set_pos(chart, 100, 100);
    lv_obj_set_style_radius(chart, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(chart, 1, LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(chart, LV_BORDER_SIDE_LEFT, LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(chart, lv_color_hex(0xafafaf), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(chart, lv_color_hex(0xFFFFFF), 0);

    //设置网格线条数
    lv_chart_set_div_line_count(chart, 5, 0);

    //设置网格线离图表边缘的距离
    lv_obj_set_style_pad_all(chart, 0, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(chart, 15, LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(chart, 30, LV_STATE_DEFAULT);

    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    //设置 PRIMARY_Y 轴范围 0-40
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 40);
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 20, 10, 5, 5, true, 80);

    //设置标签文本颜色 和 字体
    lv_obj_set_style_text_color(chart, lv_color_hex(0xFF0000), LV_PART_TICKS);
    //lv_obj_set_style_text_font(chart, &lv_font_montserrat_24, LV_PART_TICKS);

    //设置刻度线颜色 和 宽度
    lv_obj_set_style_line_color(chart, lv_color_hex(0xFF00), LV_PART_TICKS);
    lv_obj_set_style_line_width(chart, 2, LV_PART_TICKS);

    //添加重绘回调函数
    lv_obj_add_event_cb(chart, draw_label_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

    //设置为折线图
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);

    //为 PRIMARY_Y 轴添加一条折线
    lv_obj_t* series = lv_chart_add_series(chart, lv_color_hex(0x00ffff), LV_CHART_AXIS_PRIMARY_Y);

    lv_chart_set_point_count(chart, CHART_DATA_SIZE);

    //设置线宽
    lv_obj_set_style_line_width(chart, 2, LV_PART_ITEMS);
    lv_obj_set_style_line_rounded(chart, 1, LV_PART_ITEMS);

    //不显示数据点
    lv_obj_set_style_size(chart, 0, LV_PART_INDICATOR);

    //循环模式
    lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);

    //创建定时器
    lv_timer_create(timer_event_cb, 100, NULL);

    return screen;
}
不咸不要钱
关注
  • 11
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
C#chart控件游标跟随鼠标移动
01-15
在C#编程环境中，Chart控件是一个非常强大的数据可视化工具，它可以用来绘制各种类型的图表，如折线图、柱状图、饼图等。在处理实时数据或者数据分析时，我们可能需要实现一个功能，即当鼠标在图表上移动时，游标...
LVGL：拓展部件——图表 lv_chart
最新发布
友善啊，朋友的博客
04-01 2221
此控件是用于可视化的基础图形对象。
转载：LVGL Chart 控件
SpringDeng2021的博客
03-13 86
LVGL Chart 控件使用
LVGL学习笔记 25 - 图表Chart
pq的博客
04-04 9527
图表通过lv_chart_create创建。四个边分别对应主X轴，主Y轴，副X轴，副Y轴。
lvgl chart
chenliang0224的专栏
01-08 4382
6.1 创建一个图表对象 6.2 设置图表的大小 6.3 设置图表的对齐位置 6.4 设置图表的区域(LV_CHART_TYPE_AREA是线显示的区域，LV_CHART_TYPE_LINE表示单纯的线) 6.5 设置图表的透明度 6.6 设置数据系列的线宽或点半径（线的粗细） 6.7 设置最大或最小的Y值 6.8 设置每条数据线所具有的数据点个数,如果不设置的话,则默认值是 10 6.9 设置水平和垂直分割线 6.10 设置 y 轴的数值范围,[0,100]也是默认值 6.11 设置 y 轴的主刻度线长度
让你的GUI统计更直观？试试 LVGL『Chart图表控件』吧
朝气蓬勃
02-26 8966
一. LVGL GUI图标控件的概念 图表是可视化数据点的基本对象。它们支持折线图（将点与线连接和/或在其上绘制点）和柱形图。 二. LVGL GUI图表小部件和样式 图表的主要部分被称为LV_CHART_PART_BG ，它使用所有典型的背景属性。该文本样式属性确定轴文本的风格和线条属性决定了刻度的风格。 填充值在侧面增加了一些空间，因此使序列区域更小。 填充也可用于为轴文本和刻度线留出空间。 组合的背景称为 LV_CHART_PART_SERIES_BG ，并放置在主要背景上。在此部分上绘制了分.
lvgl chart 清空series数据
m0_47034192的博客
01-19 542
lvgl7 可以使用lv_chart_clear_series函数解决，那么lvgl8并没有相对应的series函数清除，反复看lvgl8代码，我发现可以通过设置线条全点值可以达到清除的目的。重新通过lv_chart_set_next_value添加点也是正常的。
C#中Chart控件
10-24
本资源主要为c#中使用chart控件绘制曲线图，当数据量较大时，x轴出现滚动条，实现全局视图和滚动视图的功能
自制WPF Chart控件
10-13
进行WPF上位机开发没有找到合适的chart绘图控件，所以就自己写了一个，目前还不够完善，后续会继续完善
chart控件的使用
03-27
自己写的小的chart控件的代码，有封装成类，不是很完善
dev chart 控件绘制图形
02-21
dev chart 控件绘制图形
LVGL chart学习-创建简单折线图
weixin_43872506的博客
01-24 1011
前面几句都是经常用到的，很好理解，lv_chart_set_type(chart, LV_CHART_TYPE_LINE);这句顾名思义，就是设置图表的类型，我们可以跳进去看看它有什么类型。对图表进行刷新，其实就是对图表进行重绘制，就完成了绘制。猜测是往第一个折线加入一个数值为10的点，看一下函数原型，大概就是这个意思，具体的我也看不懂。第一个参数是一个lv_obj_t对象，第二个是设置颜色，第三个是什么呢？第一个是什么都不干，肯定不选它，第二个就是我们所需要的折线图，第三个是BAR，是柱状图。
lvgl 8.2 chart控件 波形显示，去掉圆点
zadhh的博客
11-10 3825
我使用lvgl的chart控件想要实现示波器功能，但是呢发现线的点数只要跟控件的范围内他的大圆点就会出现，调整线宽都没有用，在屏幕上显示大粗线太丑了，经过不懈的努力，发现所有的控件都没有用，除非呢不使用示波器的功能，，算了太麻烦了，我就开始查找源码解决问题。修改 首先在lv_chart.c文件找到 static void draw_series_line(lv_obj_t * obj, lv_draw_ctx_t * draw_ctx)函数，，在函数里面将。将他们的小圆点就会取消掉了。
ESP32 开发笔记(四）LVGL控件学习 Chart 图表控件
cnicfhnui的博客
12-03 8889
先看效果，创建三个不同风格的图表控件来了解图表控件的使用 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF_V4.2框架库
LVGL lv_chart图标控件（24）
jiang_2018的博客
06-06 2808
lv_chart 表格控件由背景、水平垂直分割线、数据线组成 样式 例子 效果
LVGL 8.2.0 Scatter Chart
mygod2008ok的专栏
06-05 777
Scatter chart
合宙Air724UG LuatOS-Air LVGL API控件--图表 (Chart)
l531798151的博客
08-31 1849
axis lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。axis lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。返回 lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。调用 lvgl.chart_set_x_start_point(chart, ser, id)可以通过点 id 单独设置某个点的数值。
echarts隐藏线条，刻度，
04-24
标签等组件该怎么做？ 要隐藏echarts的线条、刻度、标签等组件，可以在对应的组件中设置show属性为false即可。例如，要隐藏x轴的刻度与标签，可以在xAxis中设置axisLabel和axisTick的show属性为false： ``` xAxis: { type: 'category', data: [...], axisLabel: { show: false }, axisTick: { show: false } } ``` 要隐藏y轴的线条，可以在yAxis中设置axisLine的show属性为false： ``` yAxis: { type: 'value', axisLine: { show: false } } ``` 需要注意的是，隐藏这些组件可能会影响到图表的可读性，所以需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值