# @fundar/data-chart-telling 中文文档

规范地址：https://npmcn.com/package/%40fundar/data-chart-telling/

版本：1\.20\.0
npm 元数据更新时间：2026-11-12T02:50:25.360Z
中文译文更新时间：2026-11-15T17:52:09.223Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fundar/data-chart-telling
原文对照：https://npmcn.com/package/%40fundar/data-chart-telling/?lang=original
项目主页：https://github.com/datos-Fundar/data-chart-telling#readme
源码仓库：https://github.com/datos-Fundar/data-chart-telling

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

- 包体积（解压后）：2.3 MB，1083 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19
- 运行依赖：9 个
- peer 依赖：svelte ^5\.0\.0，svelteplot ^0\.14\.0，topojson-client ^3\.1\.0
- 首次发布：2026-06-26T13:01:45.014Z
- 最新版本发布：2026-11-12T02:50:24.903Z
- 近 30 天下载量：4510（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：87（近 12 个月 87 个）

## 中文简介

用于斯韦尔特的申报图,地图和小倍数,以斯韦尔特普洛特为基础.

## 安装

```sh
npm install @fundar/data-chart-telling
```

也可以使用：`pnpm add @fundar/data-chart-telling`、`yarn add @fundar/data-chart-telling`、`bun add @fundar/data-chart-telling`

## README

![data-chart-telling-logo](https://npmcn.com/package/%40fundar/data-chart-telling/docs/images/logo.png)

* * *

[![npm](https://img.shields.io/npm/v/@fundar/data-chart-telling?label=npm&logo=npm&logoColor=white)](https://www.npmjs.com/package/@fundar/data-chart-telling) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/datos-Fundar/data-chart-telling?label=Latest%20Release&display_name=tag&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/releases/latest) ![GitHub License](https://img.shields.io/github/license/datos-Fundar/data-chart-telling?label=License&logo=github&logoColor=white) [![CI](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/ci.yml?branch=main&label=CI&logo=githubactions&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/ci.yml) [![Storybook](https://img.shields.io/badge/Storybook-live-FF4785?logo=storybook&logoColor=white)](https://datos-fundar.github.io/data-chart-telling/) [![CodeQL](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/codeql.yml?branch=main&label=CodeQL&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/codeql.yml)

## 导言

用于数据故事的 Svelte 5地块 [丝绒地块](https://svelteplot.dev/)。一个图是一幅图 -- -- 轴和标记 -- -- 带有自己的标题、传奇、工具提示、侧面和时间线,所以一个完成的、可读的图是一个带有少数道具的组件.

它的目标是在灵活性之间找到一个甜点 `d3`,宣布精神 _图形语法_ (数据映射到频道,平面和标记)和经典图案库的方便,其中每种图案都是一等元件.

```svelte
<script lang="ts">
    import { LinePlot } from '@fundar/data-chart-telling';
    import { REGION_VALUES } from './datasets';
</script>

<!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->
<LinePlot
    width={720}
    height={400}
    title="Monthly inflation by region (%)"
    data={REGION_VALUES}
    x="date"
    y="value"
    color="region"
    tooltip
    scales={{ x: { label: false } }}
    styles={{ values: { show: true } }}
/>
```

![A line plot with a title, a legend, end-of-line value labels and a tooltip](https://npmcn.com/package/%40fundar/data-chart-telling/docs/images/line-by-region.png)

此 README 中的每个 Svelte 片段都是可运行文件 [实例/](https://npmcn.com/package/%40fundar/data-chart-telling/examples/),数据来自 [实例/数据集/](https://npmcn.com/package/%40fundar/data-chart-telling/examples/datasets/)。 。 。 .

每个情节类型都有一个词汇:同一个频道(`x`, (中文(简体) ), `y`, (中文(简体) ), `color`, (中文(简体) ), `grouping`, (中文(简体) ), `opacity`, (中文(简体) ), `symbol`, (中文(简体) ), `r`),同样 `scales`, (中文(简体) ), `styles`, (中文(简体) ), `segments`, (中文(简体) ), `markers`, (中文(简体) ), `transforms`, (中文(简体) ), `tooltip`, (中文(简体) ), `legend`, (中文(简体) ), `timeline` 财务报告和审定财务报表 `facet` 道具 一个全球主题.

## 安装

```bash
pnpm add @fundar/data-chart-telling svelte svelteplot
# only for GeoPlot fed with TopoJSON
pnpm add topojson-client
```

包船Svelte组件,所以应用程序需要Svelte编译器(`@sveltejs/vite-plugin-svelte` 或斯维尔特基特。 用它来打船.

## 步入时间

`timeline` 将一行从一地切开,并穿过它们。 它画成一个 **播放器** 默认值 : 播放和暂停, 当前步骤和滑动器, 在图中的铬.

```svelte
<script lang="ts">
    import { BarPlot } from '@fundar/data-chart-telling';
    import { REGION_VALUES } from './datasets';
</script>

<!--
    `timeline` slices the rows by `accessor`. A timeline is a player by default:
    play/pause, the current step and a slider in the chrome. `progress` sets where
    it starts. `type: 'rule'` draws a guide beside the plot with no controls
    instead (see TimelineRule). To build your own widget, read
    `useFigure().timeline` (seek, play, pause, next, ...).
-->
<BarPlot
    width={720}
    height={400}
    data={REGION_VALUES}
    x="region"
    y="value"
    scales={{ y: { domain: [0, 30] } }}
    timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
/>
```

![A bar plot with a player bar](https://npmcn.com/package/%40fundar/data-chart-telling/docs/images/timeline-player.png)

`type: 'rule'` 绘制一个 **规则** 在图案的旁边, 一条线 沿着它写。 页面驱动它通过 `progress` (单位:千美元)`0` 改为 `1`),从滑动器,卷轴位置或其他任何东西.

```svelte
<script lang="ts">
    import { LinePlot } from '@fundar/data-chart-telling';
    import { REGION_VALUES } from './datasets';

    // A rule has no controls of its own: the page moves it through `progress` (0 to 1).
    // One step per year; a line plot shows every row up to the current step.
    let progress = $state(0.5);
</script>

<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
<LinePlot
    width={720}
    height={400}
    data={REGION_VALUES}
    x="date"
    y="value"
    color="region"
    timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
/>
```

![A line plot revealed up to the current step, with a timeline rule](https://npmcn.com/package/%40fundar/data-chart-telling/docs/images/timeline-rule.png)

见 [时间线](https://npmcn.com/package/%40fundar/data-chart-telling/docs/timeline.md) 对于两者都详细.

## 文档

从概念开始;其余的由您想要的情节来组织.

| 专题 | 它包含什么 |
| --- | --- |
| [开始](https://npmcn.com/package/%40fundar/data-chart-telling/docs/getting-started.md) | 安装, 第一个地块, 将地块大小到容器, 装入数据 |
| [概念](https://npmcn.com/package/%40fundar/data-chart-telling/docs/concepts.md) | 插图和数字,行和系列,频道,道具 每个插图共享 |
| [绘图](https://npmcn.com/package/%40fundar/data-chart-telling/docs/plots.md) | 各种情节: 画什么和需要什么 |
| [缩放](https://npmcn.com/package/%40fundar/data-chart-telling/docs/scales.md) | 轴 (`x`, (中文(简体) ), `y`)和频道天平(`color`, (中文(简体) ), `grouping`, (中文(简体) ), `opacity`, (中文(简体) ), `symbol`, (中文(简体) ), `r`, (中文(简体) ), `length`(中文(简体) ) |
| [样式和部分](https://npmcn.com/package/%40fundar/data-chart-telling/docs/styles-and-segments.md) | 数据简短的值标签、框架、空白填补和样式范围 |
| [值标签](https://npmcn.com/package/%40fundar/data-chart-telling/docs/value-labels.md) | 一个图的形状上的值,和一个标记的标签:布局及其选项 |
| [标记](https://npmcn.com/package/%40fundar/data-chart-telling/docs/markers.md) | 绘图上的额外标记:说明、区域、悬浮亮点、自定义组件 |
| [变革和统计](https://npmcn.com/package/%40fundar/data-chart-telling/docs/transforms-and-statistics.md) | 堆叠、拆分、平滑、回归和其他数据转换 |
| [工具提示和悬浮](https://npmcn.com/package/%40fundar/data-chart-telling/docs/tooltip-and-hover.md) | 浮动工具提示, 插图亮点, 同步盘旋在地块之间 |
| [图例](https://npmcn.com/package/%40fundar/data-chart-telling/docs/legend.md) | 自动传奇、 拖曳系列、 自定义部分 |
| [时间线](https://npmcn.com/package/%40fundar/data-chart-telling/docs/timeline.md) | 以玩家栏( 默认) 或规则按时间步入数据 |
| [颜色](https://npmcn.com/package/%40fundar/data-chart-telling/docs/chrome.md) | 标题、字幕、标题、页眉、页脚、分页符及其顺序 |
| [面额](https://npmcn.com/package/%40fundar/data-chart-telling/docs/facets.md) | 小倍数:网格、旋转木马、页 |
| [作曲家](https://npmcn.com/package/%40fundar/data-chart-telling/docs/composer.md) | 一个图中的几个地块, 共享悬浮, 传说和时间线 |
| [读取绘图状态](https://npmcn.com/package/%40fundar/data-chart-telling/docs/state.md) | `usePlot` 财务报告和审定财务报表 `useFigure`,在一块地块周围构建自定义 UI |
| [地图](https://npmcn.com/package/%40fundar/data-chart-telling/docs/geo.md) | GeoPlot:数据、预测、相机、相机和地图标记 |
| [他们](https://npmcn.com/package/%40fundar/data-chart-telling/docs/theming.md) | 全球配置、主题、地方和 CSS 变量 |
| [建筑](https://npmcn.com/package/%40fundar/data-chart-telling/docs/architecture.md) | 为贡献者组装图案的方式 |
| [发展](https://npmcn.com/package/%40fundar/data-chart-telling/docs/development.md) | 建筑、测试、故事书和出版 |

工作实例 [实例/](https://npmcn.com/package/%40fundar/data-chart-telling/examples/); 数据 [在线故事书](https://datos-fundar.github.io/data-chart-telling/) (或 `pnpm storybook` )显示每个选项为活.

## 用于 LLMs 和编码代理

[页:1](https://npmcn.com/package/%40fundar/data-chart-telling/llms.txt) 是索引和 [llms- full.txt (英语)](https://npmcn.com/package/%40fundar/data-chart-telling/llms-full.txt) 是一个单文件指南,其中包含最重要的规则。 Npm 包件内两艘船,可移动件旁边 [实例/](https://npmcn.com/package/%40fundar/data-chart-telling/examples/)。 。 。 .

## 许可证

[麻省理工学院](https://npmcn.com/package/%40fundar/data-chart-telling/LICENSE). 将版权通知和许可文本保留在码上.

## 常见问题

### @fundar/data-chart-telling 是什么？

用于斯韦尔特的申报图,地图和小倍数,以斯韦尔特普洛特为基础\.

### 如何安装 @fundar/data-chart-telling？

在项目目录运行 npm install @fundar/data-chart-telling，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.0\.0）、svelteplot（^0\.14\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fundar/data-chart-telling 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fundar/data-chart-telling 支持 ESM 还是 CommonJS？

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

### @fundar/data-chart-telling 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fundar/data-chart-telling 可以商用吗？

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

### @fundar/data-chart-telling 的下载量有多少？

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

### @fundar/data-chart-telling 还在维护吗？

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