dioxus-charts 📊

一个简单的Dioxus图表组件库。

此包提供了一些基于SVG的基本图表组件，可通过CSS自定义，用于与Dioxus GUI库一起使用。组件配置旨在类似于在JavaScript图表库中找到的配置。

当前可用的组件有

• PieChart：用于饼图、环形图和仪表盘图
• BarChart：用于条形图和堆叠条形图，垂直或水平
• LineChart

您现在可以在非常简单的 演示网站 上查看它们。

使用方法

此包位于 crates.io，您可以通过将 dioxus-charts 添加到项目的 Cargo.toml 依赖项中来使用它。

[dependencies]
dioxus-charts = "0.2"

示例

use dioxus::prelude::*;
use dioxus_charts::BarChart;

fn app() -> Element {
    rsx!(
        BarChart {
            padding_top: 30,
            padding_left: 70,
            padding_right: 50,
            padding_bottom: 30,
            bar_width: "10%",
            horizontal_bars: true,
            label_interpolation: (|v| format!("{v}%")) as fn(f32) -> String,
            series: vec![
                vec![63.0, 14.4, 8.0, 5.1, 1.8],
            ],
            labels: vec!["Chrome".into(), "Safari".into(), "IE/Edge".into(), "Firefox".into(), "Opera".into()]
        }
    )
}

在 examples 文件夹中也有几个示例，其中包含一个 Makefile.toml，这使得构建它们变得更容易。您需要先安装 cargo-make 才能使用它们

cargo install cargo-make

您还需要在系统中安装 sass 和 tailwindcss，以便使用make命令生成css文件。

然后对于桌面演示，在examples文件夹中

cd examples
cargo make desktop

Web示例用于生成 演示网站。要自行测试，您需要安装 dev-server 的 trunk 和 rust wasm 目标

cargo install trunk
rustup target add wasm32-unknown-unknown

然后在examples文件夹内构建并启动dev-server

cargo make web

注意：如果在启动网络示例时遇到错误，可能是因为rustwasm工具集不同步导致版本不匹配问题而得到祝福。解决这个问题最简单的办法似乎是从 examples/web 文件夹中删除Cargo.lock文件。如果这不起作用，请检查此问题获取更多信息。

请参阅Dioxus参考指南获取更多信息。

许可证

根据您的选择，受Apache License, Version 2.0或MIT License许可。

除非您明确表示，否则您有意提交给Dioxus-Charts作为贡献的内容，如Apache-2.0许可证中定义的，将根据上述方式双重许可，不附加任何额外条款或条件。