Rust中用egui、eframe、plotter实现多图表不重叠布局求助

问题根源 #

TimeData::draw方法没有向egui正确声明自身的空间占用，导致egui认为图表未占据任何区域，后续UI元素（包括第二个图表）都会从同一顶部位置开始绘制，最终造成重叠。

解决方案 #

以下两种修改方式任选其一即可：

方式一：固定尺寸包裹图表

使用ui.add_sized为每个图表指定明确尺寸，让egui清楚每个图表的空间范围：

CentralPanel::default().show(ctx, |ui| {
    ui.with_layout(egui::Layout::top_down(egui::Align::TOP), |ui| {
        // 定义图表尺寸：宽度自适应面板，高度固定300
        let chart_size = egui::vec2(ui.available_width(), 300.0);
        
        // 绘制第一个图表
        ui.add_sized(chart_size, egui::Widget::wrap(&mut self.timechart));
        
        // 添加图表间的间距
        ui.add_space(20.0);
        
        // 绘制第二个图表
        ui.add_sized(chart_size, egui::Widget::wrap(&mut self.timechart1));
        
        // 若需第三个图表，重复上述步骤即可
        // ui.add_space(20.0);
        // ui.add_sized(chart_size, egui::Widget::wrap(&mut self.timechart2));
    });
});

方式二：手动分配空间绘制

如果需要更灵活地控制图表位置，可手动分配空间后在指定区域绘制：

CentralPanel::default().show(ctx, |ui| {
    let available_width = ui.available_width();
    let chart_height = 300.0;
    let spacing = 20.0;

    // 为第一个图表分配空间并绘制
    let chart_rect1 = ui.allocate_space(egui::vec2(available_width, chart_height));
    self.timechart.draw_in_rect(ui, chart_rect1);
    
    // 添加间距
    ui.add_space(spacing);
    
    // 为第二个图表分配空间并绘制
    let chart_rect2 = ui.allocate_space(egui::vec2(available_width, chart_height));
    self.timechart1.draw_in_rect(ui, chart_rect2);
    
    // 第三个图表同理
    // ui.add_space(spacing);
    // let chart_rect3 = ui.allocate_space(egui::vec2(available_width, chart_height));
    // self.timechart2.draw_in_rect(ui, chart_rect3);
});

补充说明 #

之前尝试的ui.separator()或ui.heading()无效，是因为egui未识别到图表的空间占用，这些元素被绘制在了图表上层区域，而非图表下方。通过上述方式让egui正确感知图表空间后，分隔元素就能正常显示在图表之间。

内容的提问来源于stack exchange，提问作者Keaton