LVGL 8.2.0 Scatter Chart

事件处理函数

static void draw_event_cb(lv_event_t* e)
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e); //获取事件对象绘制描述符
    if (dsc->part == LV_PART_ITEMS) { //LV_PART_ITEMS绘制事件
        lv_obj_t* obj = lv_event_get_target(e); //获取产生事件的对象
        lv_chart_series_t* ser = lv_chart_get_series_next(obj, NULL);//获取第一个ser
        uint32_t cnt = lv_chart_get_point_count(obj); //获取Ser点的总数
        /*Make older value more transparent*/
        dsc->rect_dsc->bg_opa = (LV_OPA_COVER * dsc->id) / (cnt - 1); //使用id和点的总数计算透明度
        /*Make smaller values blue, higher values red*/
        lv_coord_t* x_array = lv_chart_get_x_array(obj, ser); //获取x轴ser点数据集合
        lv_coord_t* y_array = lv_chart_get_y_array(obj, ser); //获取y轴ser点数据集合
        /*dsc->id is the tells drawing order, but we need the ID of the point being drawn.*/
        uint32_t start_point = lv_chart_get_x_start_point(obj, ser); // x起始点
        uint32_t p_act = (start_point + dsc->id) % cnt; /*Consider start point to get the index of the array*/
        lv_opa_t x_opa = (x_array[p_act] * LV_OPA_50) / 200; 
        lv_opa_t y_opa = (y_array[p_act] * LV_OPA_50) / 1000;
        dsc->rect_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_RED),
            lv_palette_main(LV_PALETTE_BLUE),
            x_opa + y_opa);  // 红蓝混色比颜色设置背景色
    }
}

定时器回调添加数据

static void add_data(lv_timer_t* timer)
{
    LV_UNUSED(timer);
    lv_obj_t* chart = timer->user_data; //获取定时器用户数据
    lv_chart_set_next_value2(chart, lv_chart_get_series_next(chart, NULL), lv_rand(0,200), lv_rand(0, 1000)); // 根据更新模式策略设置下一个点的X和Y值
}

创建CHART

/**
* A scatter chart
*/
static void lv_example_chart_7(void)
{
    lv_obj_t* chart = lv_chart_create(lv_scr_act()); //创建CHART对象
    lv_obj_set_size(chart, 200, 150);  // 设置大小
    lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);  // 居中显示
    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL); //添加LV_EVENT_DRAW_PART_BEGIN事件
    lv_obj_set_style_line_width(chart, 0, LV_PART_ITEMS); /*Remove the lines*/
    lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER); //CHART类型为SCATTER
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 5, 5, 5, 1, true, 30);//设置X轴tick
    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 50);//设置y轴tick
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200); //设置x轴范围
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1000); //设置y轴范围
    lv_chart_set_point_count(chart, 50); //设置最大点个数为50
    lv_chart_series_t* 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 < 50; i++) {
        lv_chart_set_next_value2(chart, ser, lv_rand(0, 200), lv_rand(0, 1000)); //设置50个点随机值
    }
    lv_timer_create(add_data, 100, chart);//创建100毫秒周期的定时器
}

运行效果