# @delacour/react-native-charts 中文文档

规范地址：https://npmcn.com/package/%40delacour/react-native-charts/

版本：0\.9\.0
npm 元数据更新时间：2026-11-10T17:22:15.434Z
中文译文更新时间：2026-11-11T21:29:22.115Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40delacour/react-native-charts
原文对照：https://npmcn.com/package/%40delacour/react-native-charts/?lang=original
项目主页：https://ui.delacour.co.nz/docs/charts
源码仓库：https://github.com/delacournz/delacour-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：388 kB，146 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：react \>=19，react-native \>=0\.81，react-native-skia \>=3\.7\.3，react-native-worklets \>=0\.5，react-native-reanimated \>=4，react-native-gesture-handler \>=2\.28
- 首次发布：2026-09-21T21:47:34.617Z
- 最新版本发布：2026-11-10T17:22:15.056Z
- 近 30 天下载量：9940（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：117（近 12 个月 117 个）

## 中文简介

无头的 Skia 绘制原始的原生物 – 没有符号, 没有类Name

## 安装

```sh
npm install @delacour/react-native-charts
```

也可以使用：`pnpm add @delacour/react-native-charts`、`yarn add @delacour/react-native-charts`、`bun add @delacour/react-native-charts`

## README

# @ delacour/ react-native-图

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

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

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

文档 : [数据/图表](https://ui.delacour.co.nz/docs/charts)。 。 。 .

## 安装

```bash
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` 在它的根部。 此软件包没有 做一个——一个被嵌入的根是死体重, 每一个反应的原生应用程序 手柄触摸已经有一个.

## 使用

```tsx
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>
```

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

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

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

```tsx
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"` 到根和下行的类别 左边的栏杆向右增长,没有其他变化.

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

```tsx
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 :

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

## 许可证

麻省理工学院

## 常见问题

### @delacour/react-native-charts 是什么？

无头的 Skia 绘制原始的原生物 – 没有符号, 没有类Name

### 如何安装 @delacour/react-native-charts？

在项目目录运行 npm install @delacour/react-native-charts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）、react-native（\>=0\.81）、react-native-skia（\>=3\.7\.3）、react-native-worklets（\>=0\.5）、react-native-reanimated（\>=4）、react-native-gesture-handler（\>=2\.28）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @delacour/react-native-charts 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/delacour\_\_react-native-charts 是否存在。

### @delacour/react-native-charts 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @delacour/react-native-charts 可以商用吗？

@delacour/react-native-charts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @delacour/react-native-charts 的下载量有多少？

根据 npm 官方下载统计，@delacour/react-native-charts 在 2026/10/12 – 2026/11/10 这 30 天内被下载 9,940 次，日均约 331 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @delacour/react-native-charts 还在维护吗？

最新版本 0\.9\.0 发布于 2026/11/11（1 天前）；至今共发布 117 个版本，其中过去 12 个月发布了 117 个；首次发布于 2026/09/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。