Yew图表库

yew-chart 是一组可以组装成图表的组件，适用于 Yew框架。

以下是使用此库生成的土壤湿度/降雨图表

以下是此库生成的另一张图表，表示所谓的 "Delta-T"

通过利用这些基于SVG的组件，可以灵活地形成多种类型的图表。该库旨在作为工具包，提供渲染图表原语（例如线条、多边形等）的便利。

示例图表

在 examples 文件夹中提供了两个基本项目。

折线图

examples/basic 已配置为输出基本折线图

...以下是用于生成它的整个Yew组件

const WIDTH: f32 = 533.0;
const HEIGHT: f32 = 300.0;
const MARGIN: f32 = 50.0;
const TICK_LENGTH: f32 = 10.0;

#[function_component(App)]
fn app() -> Html {
    let end_date = Utc::now();
    let start_date = end_date.sub(Duration::days(4));
    let timespan = start_date..end_date;

    let circle_text_labeller = Rc::from(series::circle_text_label("Label")) as Rc<dyn Labeller>;

    let data_set = Rc::new(vec![
        (start_date.timestamp_millis(), 1.0, None),
        (
            start_date.add(Duration::days(1)).timestamp_millis(),
            4.0,
            None,
        ),
        (
            start_date.add(Duration::days(2)).timestamp_millis(),
            3.0,
            None,
        ),
        (
            start_date.add(Duration::days(3)).timestamp_millis(),
            2.0,
            None,
        ),
        (
            start_date.add(Duration::days(4)).timestamp_millis(),
            5.0,
            Some(circle_text_labeller),
        ),
    ]);

    let h_scale = Rc::new(TimeScale::new(timespan, Duration::days(1))) as Rc<dyn Scale<Scalar = _>>;
    let v_scale = Rc::new(LinearScale::new(0.0..5.0, 1.0)) as Rc<dyn Scale<Scalar = _>>;

    let tooltip = Rc::from(series::y_tooltip()) as Rc<dyn Tooltipper<_, _>>;

    html! {
            <svg class="chart" viewBox={format!("0 0 {} {}", WIDTH, HEIGHT)} preserveAspectRatio="none">
                <Series<i64, f32>
                    series_type={Type::Line}
                    name="some-series"
                    data={data_set}
                    horizontal_scale={Rc::clone(&h_scale)}
                    horizontal_scale_step={Duration::days(2).num_milliseconds()}
                    tooltipper={Rc::clone(&tooltip)}
                    vertical_scale={Rc::clone(&v_scale)}
                    x={MARGIN} y={MARGIN} width={WIDTH - (MARGIN * 2.0)} height={HEIGHT - (MARGIN * 2.0)} />

                <Axis<f32>
                    name="some-y-axis"
                    orientation={Orientation::Left}
                    scale={Rc::clone(&v_scale)}
                    x1={MARGIN} y1={MARGIN} xy2={HEIGHT - MARGIN}
                    tick_len={TICK_LENGTH}
                    title={"Some Y thing".to_string()} />

                <Axis<i64>
                    name="some-x-axis"
                    orientation={Orientation::Bottom}
                    scale={Rc::clone(&h_scale)}
                    x1={MARGIN} y1={HEIGHT - MARGIN} xy2={WIDTH - MARGIN}
                    tick_len={TICK_LENGTH}
                    title={"Some X thing".to_string()} />

            </svg>
    }
}

如果通过 Props 传递 SeriesData，则需要提供一个 PartialEq 实现。由于 SeriesData 包含无法比较的闭包，Rust无法自动为您生成一个，但这不会成为问题；因为您在比较基于 Rc 的值时应该执行显式的指针比较；Rc 包含的引用是不可变的。Rc::ptr_eq 在此场景下是您的朋友。

话虽如此，您可能不会通过props传递 SeriesData，而是传递其他 Rc 基于模型导向的数据类型，该类型将被映射到它。使用 ptr_eq 仍然是正确的方法，因为您将获得性能优势。

柱状图

使用与上面相同的Yew视图方法代码，可以在 Series 标签内的 series_type 中编辑以使用 Bar 键显示柱状图。

<Series series_type={Type::Bar(BarType::Rise)} ... />

条形图也可以使用枚举变量 BarType 来“下降”而不是“上升”。这在使用负轴值时特别有用，其中条形图从 y = 0 或类似值开始下降。

当将 BarType 设置为 Drop 时，上面的相同数据将生成以下图形。

如图所示，条形图设置为从选定的侧面 到 数据点。由于轴的范围是从 0.0 到 5.0，第一个点位于 (26-Mar, 1.0)，因此条形图从 5.0 下降到 1.0。

<Series series_type={Type::Bar(BarType::Drop)} ... />