@ delacour/ react-native-图

无头图原生物回放原生-用于绘图的 Skia, reanimated 动画 手腕手掌 触摸.

没有标志,没有 className,没有主题。 每个颜色、字体和大小都是你的值 传入。 如果你想让图表已经穿戴设计系统,请使用 @delacour/react-native-ui/chart, (中文(简体) ), 是这个引擎 上面有符号.

阿尔法. 这个包和 @delacour/react-native-ui 发布到 npm alpha 标记,每个α也是 latest。 。 。 .

文档 : 数据/图表。 。 。 .

安装

bun add @delacour/react-native-charts
bunx expo install react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

端点 : react-native-skia, (中文(简体) ), react-native-reanimated, (中文(简体) ), react-native-gesture-handler, (中文(简体) ), react-native-worklets, (中文(简体) ), react, (中文(简体) ), react-native土生土长的四人 expo install因此,SDK选择 它可以构建的版本; react 财务报告和审定财务报表 react-native 已经在任何应用程序中.

你的应用需要一个 GestureHandlerRootView 在它的根部。 此软件包没有 做一个——一个被嵌入的根是死体重, 每一个反应的原生应用程序 手柄触摸已经有一个.

使用

import { CartesianChart, ChartArea, ChartLine } from "@delacour/react-native-charts";

<CartesianChart data={rows} xKey="day" yKeys={["revenue"]}>
  {({ points, bounds }) => (
    <>
      <ChartArea baseline={bounds.bottom} color="#0A84FF22" curve="monotone" points={points.revenue} />
      <ChartLine color="#0A84FF" curve="monotone" points={points.revenue} strokeWidth={2} />
    </>
  )}
</CartesianChart>

标记还读取了图表上下文,因此可以被放置而不是被叫:

<CartesianChart data={rows} xKey="day" yKeys={["revenue"]}>
  <ChartLine color="#0A84FF" yKey="revenue" />
</CartesianChart>

酒吧站在0上 需要半步来铺起花来 所以最外层的人坐着 在阴谋中。 当根被告诉哪个密钥时, 兄弟姐妹系列堆栈 堆栈,因为只有根可以大小 y 总轴 :

import { CartesianChart, ChartBar, ChartBarStack } from "@delacour/react-native-charts";

<CartesianChart data={rows} domainPadding={{ x: 0.5 }} includeZero xKey="month" yKeys={["revenue"]}>
  <ChartBar color="#0A84FF" roundedCorners={{ topLeft: 4, topRight: 4 }} yKey="revenue" />
</CartesianChart>

<CartesianChart data={rows} domainPadding={{ x: 0.5 }} stackKeys={["web", "ios", "android"]} xKey="month" yKeys={["web", "ios", "android"]}>
  <ChartBarStack colors={["#0A84FF", "#30D158", "#FF9F0A"]} yKeys={["web", "ios", "android"]} />
</CartesianChart>

添加 orientation="horizontal" 到根和下行的类别 左边的栏杆向右增长,没有其他变化.

馅饼是它自己的根. 切片,标签和它们之间的发线是标记, 一个水龙头报告手指下的切片:

import { PieInset, PieLabel, PieSlices, PolarChart } from "@delacour/react-native-charts";

<PolarChart data={rows} innerRadius="60%" labelKey="browser" onSlicePress={setSelected} selectedIndex={selected} valueKey="share">
  <PieSlices colors={["#0A84FF", "#30D158", "#FF9F0A", "#FF375F"]} />
  <PieInset color="#FFFFFF" strokeWidth={2} />
  <PieLabel color="#FFFFFF" font={font} formatLabel={(slice) => `${Math.round(slice.fraction * 100)}%`} minSweep={12} />
</PolarChart>

数学本身

@delacour/react-native-charts/core 是包中每个尺度、勾选、曲线和解析器, 可导入, 模块图中没有 Skia :

import { closestIndex, invertValue, makeScale } from "@delacour/react-native-charts/core";

许可证

麻省理工学院