指南
SKILLS And Components
API
Moly Kit
贡献
指南
SKILLS And Components
API
Moly Kit
贡献
简体中文

Makepad Chart

https://github.com/mofa-org/makepad-chart

面向 Makepad 的 GPU 加速图表库，与 Chart.js 约 75% 功能对齐。

Chart Zoo Platform

特性

  • 11 种图表类型：Bar、Line、Pie、Doughnut、Scatter、Bubble、Radar、Polar Area、Combo、Horizontal Bar、Chord
  • GPU 加速：所有渲染均通过 Makepad 的 GPU 着色器系统完成
  • 动画：28 种缓动函数 + 延迟动画 + 渐进动画
  • 渐变：所有图表类型支持垂直、径向与角向渐变
  • 渐进动画：1000+ 点的密集时间序列按左到右绘制
  • 图表叠加：使用绝对定位叠加多种图表类型
  • 多数据集配色：支持按数据集配色与自定义颜色
  • 交互：悬停效果与点击检测
  • 跨平台：支持桌面端、Web（WASM）、iOS、Android

运行示例

1cargo run --example chart_zoo

渲染效果

Chart Zoo

安装

在 Cargo.toml 中添加：

1[dependencies]
2makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "main" }
3makepad-charts = { git = "https://github.com/mofa-org/makepad-chart", branch = "main" }

快速开始

1. 注册库

1impl LiveRegister for App {
2    fn live_register(cx: &mut Cx) {
3        makepad_widgets::live_design(cx);
4        makepad_charts::live_design(cx);  // Add this
5    }
6}

2. 在 UI 中添加图表

1live_design! {
2    use link::theme::*;
3    use link::widgets::*;
4    use makepad_charts::chart::bar_chart::BarChart;
5
6    App = {{App}} {
7        ui: <Window> {
8            body = <View> {
9                my_chart = <BarChart> {
10                    width: Fill,
11                    height: 300,
12                }
13            }
14        }
15    }
16}

3. 设置图表数据

1use makepad_charts::*;
2use makepad_charts::chart::bar_chart::BarChart;
3
4impl App {
5    fn setup_chart(&mut self, cx: &mut Cx) {
6        let data = ChartData::new()
7            .with_labels(vec!["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
8            .add_dataset(
9                Dataset::new("Sales")
10                    .with_data(vec![65.0, 59.0, 80.0, 81.0, 56.0, 72.0])
11            );
12
13        if let Some(mut chart) = self.ui.widget(id!(my_chart)).borrow_mut::<BarChart>() {
14            chart.set_data(data);
15            chart.set_options(ChartOptions::new().with_begin_at_zero(true));
16        }
17
18        self.ui.redraw(cx);
19    }
20}

图表类型

Bar Chart（柱状图）

1use makepad_charts::chart::bar_chart::BarChart;
2
3// 垂直柱状，支持堆叠与分组模式
4chart.set_stacked(true);  // 启用堆叠
5chart.set_delay_animation(true);  // 交错动画
6chart.set_gradient(true);  // 柱状渐变

Line Chart（折线图）

1use makepad_charts::chart::line_chart::{LineChart, SteppedMode};
2
3chart.set_fill(true);  // 面积图
4chart.set_stepped(SteppedMode::After);  // 阶梯线
5chart.set_show_points(true);  // 显示数据点
6chart.set_progressive_animation(true);  // 从左到右绘制
7chart.set_gradient(true);  // 启用区域渐变

Pie / Doughnut Chart（饼图/环形图）

1use makepad_charts::chart::pie_chart::PieChart;
2
3chart.set_doughnut(true);  // 环形模式
4chart.set_radial_gradient(true);  // 启用渐变

Scatter Chart（散点图）

1use makepad_charts::chart::scatter_chart::ScatterChart;
2
3let data = ChartData::new()
4    .add_dataset(
5        Dataset::new("Points")
6            .with_xy_data(vec![(1.0, 2.0), (3.0, 4.0), (5.0, 6.0)])
7    );
8
9chart.set_gradient(true);  // 点使用径向渐变

Bubble Chart（气泡图）

1use makepad_charts::chart::bubble_chart::BubbleChart;
2
3let data = ChartData::new()
4    .add_dataset(
5        Dataset::new("Bubbles")
6            .with_bubble_data(vec![
7                (x, y, radius),  // 每个点包含 x、y 与半径
8            ])
9    );
10
11chart.set_gradient(true);  // 气泡使用径向渐变

Radar Chart（雷达图）

1use makepad_charts::chart::radar_chart::RadarChart;
2
3chart.set_fill(true);
4chart.set_gradient(true);  // 径向渐变填充

Polar Area Chart（极坐标面积图）

1use makepad_charts::chart::polar_area_chart::PolarAreaChart;
2// 等角度扇区，半径取决于数值

Combo Chart（柱线组合图）

1use makepad_charts::chart::combo_chart::{ComboChart, DatasetType};
2
3chart.set_dataset_types(vec![DatasetType::Bar, DatasetType::Line]);

Horizontal Bar Chart（横向柱状图）

1use makepad_charts::chart::horizontal_bar_chart::HorizontalBarChart;
2// 横向柱状，Y 轴为分类

Chord Diagram（弦图）

1use makepad_charts::chart::chord_chart::{ChordChart, ChordData};
2
3// 基于矩阵的关系数据
4let data = ChordData::new()
5    .with_labels(vec!["A", "B", "C", "D"])
6    .with_matrix(vec![
7        vec![0.0, 50.0, 30.0, 10.0],  // A 到 B、C、D 的流量
8        vec![20.0, 0.0, 40.0, 15.0],  // B 到 A、C、D 的流量
9        vec![10.0, 25.0, 0.0, 35.0],  // C 到 A、B、D 的流量
10        vec![5.0, 10.0, 20.0, 0.0],   // D 到 A、B、C 的流量
11    ]);
12
13chart.set_data(data);
ON THIS PAGE