leptos 的可视化库

该项目为 leptos 提供图表类型。

• 饼图
• 柱状图
• 折线图
• 雷达图
• 散点图
• 折线图组
• 柱状图组
• 沃罗诺伊图

示例和用法

饼图

PieChart 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["PieChart"]}

PieChart 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Polar::new(
        Series::from(vec![1.0, 2.0, 3.]),
        Series::from(vec!["A", "B", "C"]),
    )
    .set_view(740, 540, 1, 200, 20);

    let color = Color::from("#ff0000");
    let shift_degrees = 120.;

    view! {
        <div class="mx-auto p-8">
            <h1>"Pie chart example with right label"</h1>
            // color and shift_degrees are options
            <PieChart chart=chart color=color shift_degrees=shift_degrees/>
        </div>
    }
}

PieChart 的结果

PieChart 的 debug 特性结果

柱状图

BarChart 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChart"]}

BarChart 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart_v = Cartesian::new(
        Series::from(vec!["A", "B", "C"]),
        Series::from(vec![1.0, 6.0, 9.]),
    )
    .set_view(820, 620, 3, 50, 50, 20);

    let chart_h = Cartesian::new(
        Series::from(vec![0.7, 1.5, 1.9]),
        Series::from(vec!["A", "B", "C"]),
    )
    .set_view(820, 620, 3, 30, 30, 20);

    view! {
        <div class="mx-auto p-8" style="background:#00000077">

            <h1>"Bar chart example"</h1>
            <BarChart chart=chart_v />

            <h1>"Bar chart example"</h1>
            <BarChart chart=chart_h />
        </div>
    }
}

BarChart 的调试结果

柱状图组

BarChartGroup 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChartGroup"]}

BarChartGroup 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = CartesianGroup::new()
        .set_view(840, 640, 3, 50, 50, 20)
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.7, 1.5, 1.9]),
        )
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.3, 0.5, 0.9]),
        );

    view! {
        <div class="mx-auto p-8">
            <h1>"Bar chart stack example"</h1>
            <BarChartGroup chart=chart />
        </div>
    }
}

BarChartGroup 的调试结果

折线图

LineChart 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChart"]}

LineChart 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Cartesian::new(
        Series::from(vec![0., 1.0, 2.]),
        Series::from(vec![3.0, 1.0, 5.]),
    )
    .set_view(820, 620, 3, 100, 100, 20);

    view! {
        <div class="mx-auto p-8" style="background:#00000077">
            <h1>"Line chart example"</h1>
            <LineChart chart=chart />
        </div>
    }
}

LineChart 的调试结果

折线图组

LineChartGroup 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChartGroup"]}

LineChartGroup 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {

    let chart = CartesianGroup::new()
    .set_view(840, 640, 3, 50, 50, 20)
    .add_data(
        Series::from((vec!["1982", "1986", "2010", "2020", ], "%Y", "year")),
        Series::from(vec![3., 2.0, 1., 4.]),
    )
    .add_data(
        Series::from((vec!["1982", "1986", "2017", "2020"], "%Y", "year")),
        Series::from(vec![0., 1.0, 2., 3.]),
    );

    view! {
        <div class="mx-auto p-8">
            <h1>"Line chart group example"</h1>
            <LineChartGroup chart=chart />
        </div>
    }
}

LineChartGroup 的调试结果

雷达图

RadarChart 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["RadarChart"]}

RadarChart 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Polar::new(
        Series::from(vec![85.0, 55.0, 45., 60., 40.]),
        Series::from(vec!["Reading", "Writing", "Listening", "Speaking", "React"]),
    )
    .set_view(740, 540, 1, 0, 20);

    view! {
        <div class="mx-auto p-8">
            <h1>"Radar chart example"</h1>
            <RadarChart chart=chart />
        </div>
    }
}

RadarChart 的调试结果

散点图

ScatterChart 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["ScatterChart"]}

ScatterChart 的 main.rs

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Cartesian::new(
        Series::from(vec![50,60,70,80,90,100,110,120,130,140,150])
            .set_range(40., 160.),
        Series::from(vec![7,8,8,9,9,9,10,11,14,14,15])
            .set_range(6., 16.),
    )
    .set_view(820, 620, 3, 100, 100, 20);

    view! {
        <div class="mx-auto p-8">
            <h1>"Scatter chart example"</h1>
            <ScatterChart chart=chart />
        </div>
    }
}

ScatterChart 的调试结果

沃罗诺伊

Voronoi 的 Cargo.toml

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["Voronoi"]}
rand = "0.8"

Voronoi 的 main.rs

use leptos::*;
use leptos_chart::*;
use rand::Rng;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    // fill the unit square with points
    let mut rng = rand::thread_rng();
    let vx = (0..100)
        .map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
        .collect::<Vec<_>>();
    let vy = (0..100)
        .map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
        .collect::<Vec<_>>();
    

    let chart = Cartesian::new(        
        Series::from(vx).set_range(0., 100.),
        Series::from(vy).set_range(0., 100.),
    )
    .set_view(720, 720, 3, 80, 80, 20);

    let color = Color::from("#ff0000");

    view! {
      <div class="mx-auto p-8">
        <h1>"Voronoi diagram example"</h1>
        <Voronoi chart=chart.clone()/>
      </div>

      <div class="mx-auto p-8">
        <h1>"Voronoi diagram with triangle example"</h1>
        <Voronoi chart=chart delaunay=true color=color/>
      </div>
    }
}

Voronoi 的调试结果