LVGL 8.2.0标注显示光标点击的ser点数值

定义变量

static lv_obj_t * chart;
static lv_chart_series_t * ser;
static lv_chart_cursor_t * cursor;

事件处理函数

static void event_cb(lv_event_t* e)
{
    static int32_t last_id = -1;
    lv_event_code_t code = lv_event_get_code(e);  //获取事件码
    lv_obj_t* obj = lv_event_get_target(e);  // 获取产生事件的对象
    if (code == LV_EVENT_VALUE_CHANGED) {  // 值已改变事件处理
        last_id = lv_chart_get_pressed_point(obj);  //获取点击对应的线点id
        if (last_id != LV_CHART_POINT_NONE) {  // 不是CHART点
            lv_chart_set_cursor_point(obj, cursor, NULL, last_id); //设置id对应的CHART上的点的光标线显示
        }
    }
    else if (code == LV_EVENT_DRAW_PART_END) { // LV_EVENT_DRAW_PART_END事件处理
        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_CURSOR)) return; // LV_CHART_DRAW_PART_CURSOR绘制事件处理
        if (dsc->p1 == NULL || dsc->p2 == NULL || dsc->p1->y != dsc->p2->y || last_id < 0) return; // 绘制参数过滤
        lv_coord_t* data_array = lv_chart_get_y_array(chart, ser); // 获取ser点对应的y轴值集合
        lv_coord_t v = data_array[last_id];   //获取id对应的点值
        char buf[16];
        lv_snprintf(buf, sizeof(buf), "%d", v);//格式化点数值成字符串
        lv_point_t size;
        lv_txt_get_size(&size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE); // 获取默认字体buf内容的文本大小
        lv_area_t a;
        a.y2 = dsc->p1->y - 5;
        a.y1 = a.y2 - size.y - 10;
        a.x1 = dsc->p1->x + 10;
        a.x2 = a.x1 + size.x + 10;
        lv_draw_rect_dsc_t draw_rect_dsc;
        lv_draw_rect_dsc_init(&draw_rect_dsc);
        draw_rect_dsc.bg_color = lv_palette_main(LV_PALETTE_BLUE); //蓝色背景
        draw_rect_dsc.radius = 3; // 圆角半径大小为3
        lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a); //绘制矩形框
        lv_draw_label_dsc_t draw_label_dsc;
        lv_draw_label_dsc_init(&draw_label_dsc);
        draw_label_dsc.color = lv_color_white(); //白色字体
        a.x1 += 5;
        a.x2 -= 5;
        a.y1 += 5;
        a.y2 -= 5;
        lv_draw_label(dsc->draw_ctx, &draw_label_dsc, &a, buf, NULL); //绘制文本内容
    }
}

创建CHART

/**
* Show cursor on the clicked point
*/
static void lv_example_chart_6(void)
{
    chart = lv_chart_create(lv_scr_act()); //创建CHART对象
    lv_obj_set_size(chart, 200, 150);  // 设置大小
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, -10);  // 居中偏移0，-10对齐
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 40);//设置Y轴tick显示
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 10, 1, true, 30);// 设置X轴tick显示
    lv_obj_add_event_cb(chart, event_cb, LV_EVENT_ALL, NULL); //添加所有事件
    lv_obj_refresh_ext_draw_size(chart);  // 调用该对象的祖先事件处理程序来刷新扩展绘制大小的值
    cursor = lv_chart_add_cursor(chart, lv_palette_main(LV_PALETTE_BLUE), LV_DIR_LEFT | LV_DIR_BOTTOM);  //CHART添加光标,光标方向LV_DIR_LEFT和LV_DIR_BOTTOM
    ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y); //创建添加红色ser到CHART
    uint32_t i;
    for (i = 0; i < 10; i++) {
        lv_chart_set_next_value(chart, ser, lv_rand(10, 90)); //ser设置10点随机值
    }
    lv_chart_set_zoom_x(chart, 500);  //放大到500
    lv_obj_t* label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Click on a point");   // 标题label显示
    lv_obj_align_to(label, chart, LV_ALIGN_OUT_TOP_MID, 0, -5); //CHART顶部外框居中偏移0，-5对齐
}

显示效果