0055-Tui-条形图示例

环境

• Time 2022-08-09
• Rust 1.62.0
• Tui 0.18.0

前言

说明

参考：https://github.com/fdehau/tui-rs/blob/master/examples/barchart.rs

目标

使用 tui-rs 显示条形图。

第一个

fn render_top<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let chart = widgets::BarChart::default()
        .block(Block::default().title("条形图1").borders(Borders::ALL))
        .data(&app.data)
        .bar_width(9)
        .bar_style(Style::default().fg(Color::Yellow))
        .value_style(Style::default().fg(Color::Black).bg(Color::Yellow));
    frame.render_widget(chart, area);
}

第二个

let chart = widgets::BarChart::default()
    .block(Block::default().title("条形图2").borders(Borders::ALL))
    .data(&app.data)
    .bar_width(5)
    .bar_gap(3)
    .bar_style(Style::default().fg(Color::Green))
    .value_style(
        Style::default()
            .bg(Color::Green)
            .add_modifier(Modifier::BOLD),
    );
frame.render_widget(chart, chunks[0]);

第三个

let chart = widgets::BarChart::default()
    .block(Block::default().title("条形图3").borders(Borders::ALL))
    .data(&app.data)
    .bar_style(Style::default().fg(Color::Red))
    .bar_width(7)
    .bar_gap(0)
    .value_style(Style::default().bg(Color::Red))
    .label_style(
        Style::default()
            .fg(Color::Cyan)
            .add_modifier(Modifier::ITALIC),
    );
frame.render_widget(chart, chunks[1]);

总结

使用 tui-rs 渲染条形图。

附录

源码

use anyhow::{Context, Result};
use crossterm::{event, terminal, ExecutableCommand};
use style::{Color, Modifier, Style};
use tui::backend::{Backend, CrosstermBackend};
use tui::{layout, style, widgets, Frame, Terminal};
use widgets::{Block, Borders};

pub fn main() -> Result<()> {
    terminal::enable_raw_mode()?;
    let mut backend = CrosstermBackend::new(std::io::stdout());
    backend
        .execute(terminal::EnterAlternateScreen)?
        .execute(terminal::Clear(terminal::ClearType::All))?
        .hide_cursor()?;
    let mut terminal = tui::Terminal::new(backend)?;
    run(&mut terminal)?;
    terminal::disable_raw_mode()?;
    terminal
        .backend_mut()
        .execute(terminal::Clear(terminal::ClearType::All))?
        .execute(terminal::LeaveAlternateScreen)?
        .show_cursor()
        .context("重置控制台失败")
}

fn run<B: Backend>(terminal: &mut Terminal<B>) -> Result<()> {
    let timeout = std::time::Duration::from_millis(500);
    let mut app = App::new();
    loop {
        terminal.draw(|frame| ui(frame, &app))?;

        if event::poll(timeout)? {
            if let event::Event::Key(key) = event::read()? {
                use event::KeyCode::{Char, Esc};
                match key.code {
                    Char('q') | Char('Q') | Esc => return Ok(()),
                    _ => {}
                }
            }
        }
        app.on_tick();
    }
}

struct App<'a> {
    data: Vec<(&'a str, u64)>,
}

impl<'a> App<'a> {
    fn new() -> App<'a> {
        App {
            data: vec![
                ("B1", 9),
                ("B2", 12),
                ("B3", 5),
                ("B4", 8),
                ("B5", 2),
                ("B6", 4),
                ("B7", 5),
                ("B8", 9),
                ("B9", 14),
                ("B10", 15),
                ("B11", 1),
                ("B12", 0),
                ("B13", 4),
                ("B14", 6),
                ("B15", 4),
                ("B16", 6),
                ("B17", 4),
                ("B18", 7),
                ("B19", 13),
                ("B20", 8),
                ("B21", 11),
                ("B22", 9),
                ("B23", 3),
                ("B24", 5),
            ],
        }
    }

    fn on_tick(&mut self) {
        let value = self.data.pop().unwrap();
        self.data.insert(0, value);
    }
}

const CONSTRAINTS: [layout::Constraint; 2] = [
    layout::Constraint::Percentage(50),
    layout::Constraint::Percentage(50),
];

fn ui<B: Backend>(frame: &mut Frame<B>, app: &App) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Vertical)
        .margin(2)
        .constraints(CONSTRAINTS)
        .split(frame.size());

    render_top(frame, chunks[0], app);
    render_bottom(frame, chunks[1], app);
}

fn render_top<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let chart = widgets::BarChart::default()
        .block(Block::default().title("条形图1").borders(Borders::ALL))
        .data(&app.data)
        .bar_width(9)
        .bar_style(Style::default().fg(Color::Yellow))
        .value_style(Style::default().fg(Color::Black).bg(Color::Yellow));
    frame.render_widget(chart, area);
}

fn render_bottom<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Horizontal)
        .constraints(CONSTRAINTS)
        .split(area);

    let chart = widgets::BarChart::default()
        .block(Block::default().title("条形图2").borders(Borders::ALL))
        .data(&app.data)
        .bar_width(5)
        .bar_gap(3)
        .bar_style(Style::default().fg(Color::Green))
        .value_style(
            Style::default()
                .bg(Color::Green)
                .add_modifier(Modifier::BOLD),
        );
    frame.render_widget(chart, chunks[0]);

    let chart = widgets::BarChart::default()
        .block(Block::default().title("条形图3").borders(Borders::ALL))
        .data(&app.data)
        .bar_style(Style::default().fg(Color::Red))
        .bar_width(7)
        .bar_gap(0)
        .value_style(Style::default().bg(Color::Red))
        .label_style(
            Style::default()
                .fg(Color::Cyan)
                .add_modifier(Modifier::ITALIC),
        );
    frame.render_widget(chart, chunks[1]);
}