#define __FLOOR_DATA_TO(v, step_floor_v) v = (step_floor_v) + (((v <= 0) ? 0 : (v - 1)) / (step_floor_v)) * (step_floor_v);
#define BAR_NUM 24
/*获取buf的最大最小值*/
void points_scan_max_min(lv_coord_t* buf, uint32_t points_cnt, lv_coord_t* _p_max, lv_coord_t* _p_min)
{
lv_coord_t max_v = LV_COORD_MIN;
lv_coord_t min_v = LV_COORD_MAX;
if (_p_max || _p_min) {
for (uint32_t i = 0; i < points_cnt; i++) {
if (buf[i] > max_v) {
max_v = buf[i];
}
if (buf[i] < min_v) {
min_v = buf[i];
}
}
if (_p_max) {
*_p_max = max_v;
}
if (_p_min) {
*_p_min = min_v;
}
}
}
/*使用lv_rand生成指定数量的随机数并且存入buf*/
void _generate_random_data(lv_coord_t* buf, uint16_t cnt, lv_coord_t min_val, lv_coord_t max_val)
{
for (int i = 0; i < cnt; i++) {
buf[i] = lv_rand(min_val, max_val);
}
for (int i = 0; i < cnt; i++) {
printf("buf[%d]=%d ", i, buf[i]);
}
printf("\n");
}
/* 图表的绘制事件,修改x轴的标签为时间 */
static void chart_draw_event_cb(lv_event_t* e)
{
lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
/* 如果绘制的是底下的x轴且绘制text的指针不为空存在 */
if (dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text) {
const char* time[] = { "0:00", "6:00", "12:00", "18:00", "24:00" };
lv_snprintf(dsc->text, dsc->text_length, "%s", time[dsc->value]);
}
/* 如果绘制的是条形图对象 */
if (dsc->part == LV_PART_ITEMS) {
//设置透明度
dsc->rect_dsc->bg_opa = LV_OPA_COVER;
//设置渐变方向
dsc->rect_dsc->bg_grad.dir = LV_GRAD_DIR_VER;
//设置渐变颜色
dsc->rect_dsc->bg_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
dsc->rect_dsc->bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
}
}
int app_chart_1(lv_obj_t* parent)
{
static lv_coord_t data_buf[BAR_NUM] = { 0 };
lv_coord_t max_value = 0;
lv_coord_t min_value = 0;
lv_obj_set_style_bg_color(parent, lv_color_black(), LV_PART_MAIN);
/*Create a chart*/
lv_obj_t* chart = lv_chart_create(parent);
/*添加ser*/
lv_chart_series_t* ser = lv_chart_add_series(chart, lv_color_make(0, 245, 167), LV_CHART_AXIS_PRIMARY_Y);
/* 设置图表大小 */
lv_obj_set_size(chart, 280, 160);
/* 设置为柱状图 */
lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
/* 设置x轴上有24条柱 */
lv_chart_set_point_count(chart, BAR_NUM);
/* 设置左边的y轴的主要刻度有4条, 主要刻度长度为6,小刻度长度为0, 数量为1条(0条好像不行) */
lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 6, 0, 4, 1, true, 60);
/* 设置x轴的主要刻度有5条, 主要刻度长度为0 */
lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 0, 0, 5, 1, true, 40);
/*********** 设置LV_PART_TICKS的风格 ***********/
//设置刻度标签的颜色
lv_obj_set_style_text_color(chart, lv_color_white(), LV_PART_TICKS);
//设置刻度标签的字体
lv_obj_set_style_text_font(chart, &lv_font_montserrat_14, LV_PART_TICKS);
//设置刻度标签的透明度
lv_obj_set_style_text_opa(chart, LV_OPA_COVER, LV_PART_TICKS);
//设置刻度的宽度
lv_obj_set_style_line_width(chart, 1, LV_PART_TICKS);
//设置刻度的颜色
lv_obj_set_style_line_color(chart, lv_color_white(), LV_PART_TICKS);
//设置刻度的透明度
lv_obj_set_style_line_opa(chart, LV_OPA_COVER, LV_PART_TICKS);
// 设置x轴标签离底部距离
lv_obj_set_style_pad_bottom(chart, 4, LV_PART_TICKS);
// 设置y轴标签离左边距离
lv_obj_set_style_pad_left(chart, 2, LV_PART_TICKS);
/*********** 设置LV_PART_MAIN的风格 ***********/
// 设置y轴标签离底部距离
lv_obj_set_style_pad_bottom(chart, 0, LV_PART_MAIN);
//设置间距让柱状变细
lv_obj_set_style_pad_column(chart, 6, LV_PART_MAIN);
//设置背景圆角为0
lv_obj_set_style_radius(chart, 0, LV_PART_MAIN);
//设置背景为黑色
lv_obj_set_style_bg_color(chart, lv_color_black(), LV_PART_MAIN);
// 设置网格线条颜色
lv_obj_set_style_line_color(chart, lv_color_black(), LV_PART_MAIN);
// 设置网格线透明度
lv_obj_set_style_line_opa(chart, 0, LV_PART_MAIN);
// 设置网格线宽度
lv_obj_set_style_line_width(chart, 0, LV_PART_MAIN);
lv_obj_set_style_pad_top(chart, 0, LV_PART_MAIN);
/*********** 设置LV_PART_ITEMS的风格 ***********/
//设置柱状线条圆角
lv_obj_set_style_radius(chart, 3, LV_PART_ITEMS);
/*产生24个随机数*/
_generate_random_data(data_buf, BAR_NUM, 100, 2000);
/*获取数值的最大和最小值*/
points_scan_max_min(data_buf, BAR_NUM, &max_value, &min_value);
printf("max_value = %d, min_value = %d\n", max_value, min_value);
// 将max_value设置为100的倍数,2987 -> 3000
__FLOOR_DATA_TO(max_value, 100);
/*设置图表的范围*/
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, max_value);
//lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, min_value, max_value);
/*设置图表的柱子数值*/
lv_chart_set_ext_y_array(chart, ser, data_buf);
/*添加绘制事件修改x轴的数值*/
lv_obj_add_event_cb(chart, chart_draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
//更新图表
lv_chart_refresh(chart); /*Required after direct set*/
//设置图表位置
lv_obj_center(chart);
return 0;
}
这个代码还是有点问题,最底下的柱状图覆盖了x轴,如果有大佬知道怎么修改比较好,请告诉我