# @flourish/chart-layout 中文文档

规范地址：https://npmcn.com/package/%40flourish/chart-layout/

版本：12\.0\.0
npm 元数据更新时间：2026-10-15T17:10:37.467Z
中文译文更新时间：2026-11-15T01:03:13.498Z
软件包许可：LicenseRef-LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40flourish/chart-layout
原文对照：https://npmcn.com/package/%40flourish/chart-layout/?lang=original

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

- 包体积（解压后）：636 kB，54 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：6 个
- 首次发布：2019-06-26T15:47:16.995Z
- 最新版本发布：2026-10-15T17:10:37.233Z
- 近 30 天下载量：2399（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：68（近 12 个月 2 个）

## 中文简介

创建轴

## 安装

```sh
npm install @flourish/chart-layout
```

也可以使用：`pnpm add @flourish/chart-layout`、`yarn add @flourish/chart-layout`、`bun add @flourish/chart-layout`

## README

# 面粉图表布局

为数据创建轴并绘制区域

## 如何安装

`npm install -s @flourish/chart-layout`

在模板状态中添加代表x和/或y和/或y2轴的对象,也可以选择背景区域。 例如:

```js
export var state = {
    x: {},
    y: {},
    y2: {},
    chart_bg: {},
    ...
}
```

导入相应的设置到您的 `template.yml`。 。 。 .

```yml
- X axis
- property: x
  import: "@flourish/chart-layout/x"
- Y axis
- property: y
  import: "@flourish/chart-layout/y"
- Y2 axis
- property: y2
  import: "@flourish/chart-layout/y"
- Chart background
- property: chart_bg
  import: "@flourish/chart-layout/background"
```

对于打入的模板,您也可以根据数据绑定的类型添加覆盖来显示或隐藏设置. 例如:

```yml
- property: x
  import: "@flourish/chart-layout/x"
  overrides:
    - tag: numeric
      method: extend
      show_if:
        data.data.x.type: number
    - tag: temporal
      method: extend
      show_if:
        data.data.x.type: datetime
    - tag: categorical
      method: extend
      show_if:
        data.data.x.type: string
    - tag: continuous
      method: extend
      show_if:
        data.data.x.type: [number, datetime]
```

## 如何使用

初始化要创建的每个图表的图表显示对象。 你需要一个 `container` SVG 元素(节点、 d3 选择或 CSS 选择器字符串),您将添加图表到其中,并添加包含相关状态属性的对象。 举个例子

```js
import createChartLayout from "@flourish/chart-layout";
var container = select(layout.getSection("primary")).select("svg"); // see @flourish/layout
var props = { x: state.x, y: state.y, y2: state.y2, background: state.chart_bg };
var chart_layout = createChartLayout(container, props);
```

这增加了一些 SVG 元素 `container` 返回对象, `chart_layout`。 。 。 .

## 属性 `chart_layout`

### `chart_layout.chart`

一个 d3 选择的路由 SVG 元素由 `chart_element`。 。 。 .

### `chart_layout.container`

D3 - 选择 `container` 在创建时指定.

### `chart_layout.data_background`

D3 选择在 `chart_element` 用于添加数据。 放在这个容器内的数据元素将出现在任何可见的网格线下.

### `chart_layout.data_foreground`

D3 选择在 `chart_element` 用于添加数据。 放在这个容器内的数据元素将出现在任何可见的网格线上方.

## 这个 `update` 方法 `chart_layout`

### `chart_layout.update([options])`

调用这种方法来重新计算并重绘(有动画)基于当前所存储值集和状态属性的图表布局组件. 返回 `chart_layout` 举个例子.

可选属性 `options` 对象可用于修改更新方法的功能。 若为 `skip_rendering` 正确,则会重新计算相距、边距和勾选,并应用对图表偏移的任何修改,但图表组件不会被重报.

如果有的话 `margins` 提供对象及其任何 `top`, (中文(简体) ), `right`, (中文(简体) ), `bottom` 或者说 `left` 属性不是 `undefined` 然后将相应的比值固定在该值上。 如果您想要根据计算值设定比值,例如根据默认值增减比值,您可以在函数中通过其中任一属性:

```js
// Add 32 additional pixels to the margin on every side of the chart
chart_layout.update({
  margins: {
    top: (calculated) => calculated + 32,
    left: (calculated) => calculated + 32,
    right: (calculated) => calculated + 32,
    bottom: (calculated) => calculated + 32,
  }
});

// Set the margin to 32 pixels on every side of the chart.
chart_layout.update({
  margins: {
    top: 32,
    left: 32,
    right: 32,
    bottom: 32,
  }
});
```

在某些情况下,在图表布局上增加一个内边是有用的. 这一点适用于轴和地块区域之间,因此将两轴固定在 `margins`如果 `inner_margins` 提供对象及其任何 `top`, (中文(简体) ), `right`, (中文(简体) ), `bottom` 或者说 `left` 属性不是 `undefined` 然后将相应的比值固定在该值上。 他们默认 `0`。 。 。 .

```js
// Set the inner_margins to 10 pixels on every side of the chart
// Margins will default to their calculated values
chart_layout.update({
  inner_margins: {
    top: 10,
    left: 10,
    right: 10,
    bottom: 10
  }
});

// Set the margin to 32 pixels and the inner_margin to 10 pixels on every side of the chart
chart_layout.update({
  margins: {
    top: 32,
    left: 32,
    right: 32,
    bottom: 32
  },
  inner_margins: {
    top: 10,
    left: 10,
    right: 10,
    bottom: 10
  }
});
```

## 这个 `Data` 方法 `chart_layout`

这三种方法预计 `values` 既可以是数组,也可以是面粉强化数组的实例(见@flourish/enhanced-array)。 就前者而言,可选择 `accessor` 例如,可以将方法包括在内,以便从一系列对象中的每个对象中提取出特定属性。 所存储的数据既用于确定轴(数字或正数)的类型,也用于确定其域. 若为 `values` 是一个增强的数组,然后为相关维度构造一个数值轴,如果它是数字增强的数组,如果是字符串增强的数组,则将构建一个正数级。 若为 `values` 是正则数组,然后是第一个元素的类型(在应用后) `accessor` 函数)将用来确定比额表是数字还是平面.

若为 `values` 实值 `undefined`,将返回一个增强的数组,该数组要么是原传入的数组,要么是从正传入的数组中衍生出来的数组。 当定义值时 `chart_layout` 实例被返回,这样可以将方法链起来.

### `chart_layout.xData([values, [accessor]])`

获取或设置与水平轴相关的数据.

### `chart_layout.yData([values, [accessor]])`

获取或设置与主(左)垂直轴相关的数据.

### `chart_layout.y2Data([values, [accessor]])`

获取或设置与二级(右)垂直轴相关的数据.

## 这个 `Scale` 方法 `chart_layout`

这三种方法得到适合绘图数据的d3相. 因为这个模块使用 SVG 转换,所以一般默认情况下,这个缩放将只用于在 `chart_layout.chart` 集装箱,特别是 `chart_layout.data_background` 或者说 `chart_layout.data_foreground` 集装箱。 但是,如果 `options` 对象存在,并有 `global` 属性是真实的,比例尺适合在 `chart_layout.chart` 对象(一般不在其内),其计算结果与 `chart_layout.container`编辑 `domain_only` 财产 `options` 指定不应计算比额表的适当范围。 如果您想要在指定一个轴的数据之前先提取一个轴的域,则此功能可能有用.

### `chart_layout.xScale([options])`

获得计算x坐标的缩放函数.

### `chart_layout.yScale([options])`

获得计算主Y坐标的缩放函数.

### `chart_layout.y2Scale([options])`

获得计算二级Y坐标的缩放函数.

除了三个 `*Scale` 方法和三 `*Data` (b) 采用上述方法 `chart_layout` 实例还提供了返回特定轴上数据点之间计算出的最低距离的方法。 例如,这可以有助于条形图的构建.

### `chart_layout.xMinStep()`

返回最小屏幕坐标距离 `xData` 点.

### `chart_layout.yMinStep()`

返回最小屏幕坐标距离 `yData` 点.

### `chart_layout.y2MinStep()`

返回最小屏幕坐标距离 `y2Data` 点.

## 维度和比值功能及特性 `chart_layout`

### `chart_layout.height([value])`

若为 `value` 设置 _共计_ 高处 `chart_layout` 区域并返回 `chart_layout` 举个例子 若为 `value` 无效, 以 `chart_layout.svg` 使用(如果 `plotAspect` 还没有设定). 若为 `value` 实值 `undefined` 返回已计算 _共计_ 高处 `chart_layout` 区域。 呼叫电话 `plotAspect` 有数值的方法将导致高地的重新计算.

### `chart_layout.plotAspect([value])`

若为 `value` ,设置地块区域的宽比并返回 `chart_layout` 举个例子 若为 `value` 无效 `plotAspect` 尚未确定,而且从 `width`, (中文(简体) ), `height` 财务报告和审定财务报表 `margins`如果 `value` 实值 `undefined` 返回已计算或先前设定的地块宽比。 呼叫电话 `height` 有数值的方法将导致对地图方面进行重新计算.

### `chart_layout.width([value])`

若为 `value` 设置 _共计_ 宽度 `chart_layout` 区域并返回 `chart_layout` 举个例子 若为 `value` 是指除下列物质以外的任何病态值: `undefined`,表示 `chart_layout.container` 已使用。 若为 `value` 实值 `undefined` 返回已计算 _共计_ 宽度 `chart_layout` 区域.

### `chart_layout.margins()`

返回上次使用的包含上、右、下和左边边的对象 `update` 被调用。 这些也可以单独读取为方法的属性, ie `chart_layout.margins.top`, (中文(简体) ), `chart_layout.margins.right`, (中文(简体) ), `chart_layout.margins.bottom` 财务报告和审定财务报表 `chart_layout.margins.left`。 。 。 .

### `chart_layout.plot_height`

仅读图高 `chart_layout` 区域.

### `chart_layout.plot_width`

仅读图宽度 `chart_layout` 区域.

### `chart_layout.x_left`

X轴左端仅读取屏幕上x坐标.

### `chart_layout.x_right`

X轴右端仅读取屏幕上x坐标.

### `chart_layout.y_bottom`

Y (和 y2) 轴的下端仅读取屏幕上y坐标 .

### `chart_layout.y_top`

Y(和y2)轴上端仅读取屏幕上y坐标.

## 这个 `Ticks` 方法 `chart_layout`

### `chart_layout.xTicks()`

返回被冻结对象的被冻结数组,其中每个对象包含上次在x轴上绘制的单个勾选标记/标签对的属性 `update` 被调用.

### `chart_layout.yTicks()`

返回被冻结对象的被冻结数组,其中每个对象包括上次在y轴上绘制的单个勾选标记/标签对的属性 `update` 被调用.

### `chart_layout.y2Ticks()`

返回被冻结对象的被冻结数组,其中每个对象包括上次在y2轴上绘制的单个勾选标记/标签对的属性 `update` 被调用.

### `chart_layout.xTicks.autoLabelSpace([value, [unit]])`  
`chart_layout.yTicks.autoLabelSpace([value, [unit]])`  
`chart_layout.y2Ticks.autoLabelSpace([value, [unit]])`

全部三个 `*Ticks` 上述方法有一个子方法,可用于定义当面粉用户指定相关标签的"自动"选项时,如何计算勾选标签的最大空间 `tick_label_space_mode` 属性。 这些方法最多可识别出两个参数. `value` 指定给定比值的大小 `unit`. 公认的单位有"px","rem"和"fraction"等. 在"折射"的情况下,指图放出实例的高度(对于x方法)或宽度. 如果一个 `value` 当调用其中一种方法时,请指定 `unit` 假设为“px”。 这个 `instance` 在两种情况下都要返回。 若为 `value` 在调用其中一个函数时未指定,然后返回包含当前选择的对象 `unit` 和根据当前指定的 `value` 财务报告和审定财务报表 `unit` 组合.

被定义的空间是x轴的高度和y和y2轴的宽度. 对所定义的空间太长的标签可能自动被缩短(后面的字符被单个"."字符所取代). 然而,如果标签以正确的角度取向到相关的空间维度,则不会出现缩短.

## 这个 `Title` 方法 `chart_layout`

### `chart_layout.xTitle()`

返回x轴所计算的标题文本.

### `chart_layout.yTitle()`

返回 Y 轴所计算的标题文本.

### `chart_layout.y2Title()`

返回 y2 轴所计算的标题文本.

## 其他方法 `chart_layout`

下面所有的方法都表现得像得到器和被放出器. 当a `value` 指定返回值总是 `chart_layout` 例如,允许方法链条。 未指定值时,返回值为当前保存的与该属性相关的值.

### `chart_layout.animationDuration([value])`

若为 `value` 指定动画的持续时间(以毫秒计) `chart_layout.update` 名为.

### `chart_layout.clip([value])`

若为 `value` ,设定数据是否(真实)被剪切到轴的界限.

### `chart_layout.debug([value])`

设定是否( 如果 `value` 或不画一个相接的矩形 `chart_layout` 集装箱。 这可用于调试布局问题. 默认是 `false`。 。 。 .

### `chart_layout.debugColor([value])`

设置在 `chart_layout.debug`。默认为红色.

### `chart_layout.identifier([value])`

若为 `value` ,将图表标识符设置为该值。 用于制作用于剪接目的的ID,因此不应用于一个以上 `chart_layout` 实例,并应当与 HTML id 属性的规则相匹配。 如果一个数值从未传入这种方法,则使用一个应该独一无二的数值。 它的形式是字符串"fl-chart-layout-"并附有数字.

### `chart_layout.offsetTop([value])`

若为 `value` 指定,设置适用于整体的垂直转换 `chart_layout` 实例(默认为 0).

### `chart_layout.offsetLeft([value])`

若为 `value` 指定,设置适用于整体的横向转换 `chart_layout` 实例(默认为 0).

### `chart_layout.xAutoTicks([value])`

若为 `value` 指定,设置用户将 x- tick 模式设置为“ 自动” 时要使用或调用的数组. `null` 也可以通过,在这种情况下,默认函数将被恢复。 这种方法在x轴为绝对时没有效果.

### `chart_layout.xAutoTitle([value])`

若为 `value` ,设置用于 x 轴的标题文本 `value` 当面粉用户选择 `auto` 联 合 国 `title_mode`。 。 。 .

### `chart_layout.xDatetimeParse([func])`

若为 `func` 指定,设置当面粉用户输入日期为x轴设置中的字符串格式时使用的解析函数。 目前这意味着日期范围和自定义勾选值的分数和最大值.

### `chart_layout.xFlipAxis([value])`

若为 `value` ,设置是否应翻转 x 轴(在转换后) `value` 它从右到左,而不是从左到右.

### `chart_layout.xFormat([func])`

若为 `func` ,设置用于 x 轴上勾选格式的格式函数。 这个 `func` 函数在 `update` 以勾选符本身的值作为唯一的参数。 返回的值随后用作打印的勾选标签。 若为 `chart_layout.xFormat` 永远不要叫一个 `func` 或者说 `func` 是falsy(但不是未定义)默认格式化函数, `function(value) { return "" + value; }`,则使用.

### `chart_layout.xHide([value])`

若为 `value` 然后确定 X 轴是否应当隐藏。 默认这意味着不绘制勾选标记、标签、轴标题和网格线,也不会为它们留下空格。 这个 `xScale` 财务报告和审定财务报表 `xTicks` 方法仍然会像可见轴一样发挥作用(假设它没有通过设置被关闭)。 若为 `value` 是一个带有 `keep_gridlines` 属性为真实的勾选标记、标签和轴标题将不会被绘制,而是会被绘制出网格线(假设它们不会通过设置被关闭).

### `chart_layout.xNumberParse([func])`

若为 `func` ,设置用于x轴设置中的花粉用户输入字符串格式的解析函数。 目前这意味着自定义勾选的值 .

### `chart_layout.xPadding([object])`

若为 `object` 设置当前 `left`, (中文(简体) ), `right` 财务报告和审定财务报表 `unit` 用于 x 轴垫的属性。 其中任何属性均可从 `object`,在这种情况下,其价值保持不变. `left` 财务报告和审定财务报表 `right` 应为数字( 默认: 0) . `unit` 应为字符串,可以是“px”或“步骤”(默认“px”)。 “px”的值是指 `left` 财务报告和审定财务报表 `right` 值以像素表示,“步骤”的值系指 `left` 财务报告和审定财务报表 `right` 数值被指定为屏幕最小分隔(AKA step-size)的倍数 `xData` 点。 刻度设置对绝对缩放和对数数字缩放均被忽略,如果 `unit` 不是“ px ” .

### `chart_layout.xZeroAxis([value])`

指定 x 轴时的行为 `zero_axis` 设置设置为 `auto`在这种情况下,如果 `value` 如果数据是数字和轴线性的,则x轴将包含 0,而不论 `xData` 数值。 可以被用户设置所覆盖 `min` 财务报告和审定财务报表 `max` 数值.

### `chart_layout.yAutoTicks([value])`

若为 `value` 指定,设置在用户将 y-tick 模式设置为“自动”时要使用或调用的数组. `null` 也可以通过,在这种情况下,默认函数将被恢复。 当y轴是绝对时,这种方法没有效果.

### `chart_layout.yAutoTitle([value])`

若为 `value` ,将 y 轴使用的标题文本设置为 `value` 当面粉用户选择 `auto` 联 合 国 `title_mode`。 。 。 .

### `chart_layout.yDatetimeParse([func])`

若为 `func` 中指定,设置当面粉用户输入日期以字符串格式在 y 轴的设置中应用的解析函数。 目前这意味着日期范围和自定义勾选值的分数和最大值.

### `chart_layout.yFlipAxis([value])`

若为 `value` ,设置 y 轴是否应当翻转(在转换后) `value` 因此它从上到下运行,而不是从下到上.

### `chart_layout.yFormat([func])`

若为 `func` ,设置用于主 y 轴上勾选格式的格式函数。 这个 `func` 函数在 `update` 以勾选符本身的值作为唯一的参数。 返回的值随后用作打印的勾选标签。 若为 `chart_layout.yFormat` 永远不要叫一个 `func` 或者说 `func` 是falsy(但不是未定义)默认格式化函数, `function(value) { return "" + value; }`,则使用.

### `chart_layout.yHide([value])`

若为 `value` 然后确定是否应当隐藏 y 轴。 默认这意味着不绘制勾选标记、标签、轴标题和网格线,也不会为它们留下空格。 这个 `yScale` 财务报告和审定财务报表 `yTicks` 方法仍然会像可见轴一样发挥作用(假设它没有通过设置被关闭)。 若为 `value` 是一个带有 `keep_gridlines` 属性为真实的勾选标记、标签和轴标题将不会被绘制,而是会被绘制出网格线(假设它们不会通过设置被关闭).

### `chart_layout.yNumberParse([func])`

若为 `func` ,设置在 Y 轴设置中花粉用户输入字符串格式的解析函数。 目前这意味着自定义勾选的值 .

### `chart_layout.yPadding([object])`

若为 `object` 设置当前 `bottom`, (中文(简体) ), `top` 财务报告和审定财务报表 `unit` 用于 Y 轴粘贴的属性。 其中任何属性均可从 `object`,在这种情况下,其价值保持不变. `bottom` 财务报告和审定财务报表 `top` 应为数字( 默认: 0) . `unit` 应为字符串,可以是“px”或“步骤”(默认“px”)。 “px”的值是指 `bottom` 财务报告和审定财务报表 `top` 值以像素表示,“步骤”的值系指 `bottom` 财务报告和审定财务报表 `top` 数值被指定为屏幕最小分隔(AKA step-size)的倍数 `yData` 点。 刻度设置对绝对缩放和对数数字缩放均被忽略,如果 `unit` 不是“ px ” .

### `chart_layout.yZeroAxis([value])`

指定 Y 轴时的行为 `zero_axis` 设置设置为 `auto`在这种情况下,如果 `value` 如果数据是数字和轴线性的,则 y 轴将包含 0,而不论 `yData` 数值。 可以被用户设置所覆盖 `min` 财务报告和审定财务报表 `max` 数值.

### `chart_layout.y2AutoTicks([value])`

若为 `value` 指定,将用户将 y2-tick 模式设置为“自动”时要使用或调用的数组. `null` 也可以通过,在这种情况下,默认函数将被恢复。 这种方法在y2轴为绝对时没有效果.

### `chart_layout.y2AutoTitle([value])`

若为 `value` ,将 y2 轴使用的标题文本设置为 `value` 当面粉用户选择 `auto` 联 合 国 `title_mode`。 。 。 .

### `chart_layout.y2DatetimeParse([func])`

若为 `func` 中,设置当面粉用户输入日期在 y2 轴的设置中以字符串格式显示时要应用的解析函数。 目前这意味着日期范围和自定义勾选值的分数和最大值.

### `chart_layout.yF2lipAxis([value])`

若为 `value` ,设置是否将 y2 轴翻转(在转换后) `value` 因此它从上到下运行,而不是从下到上.

### `chart_layout.y2Format([func])`

若为 `func` ,设置用于二级 y 轴上勾选格式的格式函数。 这个 `func` 函数在 `update` 以勾选符本身的值作为唯一的参数。 返回的值随后用作打印的勾选标签。 若为 `chart_layout.y2Format` 永远不要叫一个 `func` 或者说 `func` 是falsy(但不是未定义)默认格式化函数, `function(value) { return "" + value; }`,则使用.

### `chart_layout.y2Hide([value])`

若为 `value` ,然后确定是否应当隐藏 y2 轴。 默认这意味着不绘制勾选标记、标签、轴标题和网格线,也不会为它们留下空格。 这个 `y2Scale` 财务报告和审定财务报表 `y2Ticks` 方法仍然会像可见轴一样发挥作用(假设它没有通过设置被关闭)。 若为 `value` 是一个带有 `keep_gridlines` 属性为真实的勾选标记、标签和轴标题将不会被绘制,而是会被绘制出网格线(假设它们不会通过设置被关闭)。 不像我们 `xHide` 财务报告和审定财务报表 `yHide` 方法上,此方法的默认值为 `true`: 您必须明确打开 y2 轴 .

### `chart_layout.y2NumberParse([func])`

若为 `func` 中,设置在为 y2 轴设置时,花粉用户以字符串格式输入数字的解析功能。 目前这意味着自定义勾选的值 .

### `chart_layout.yPadding([object])`

若为 `object` 设置当前 `bottom`, (中文(简体) ), `top` 财务报告和审定财务报表 `unit` 用于 Y2 轴粘贴的属性。 其中任何属性均可从 `object`,在这种情况下,其价值保持不变. `bottom` 财务报告和审定财务报表 `top` 应为数字( 默认: 0) . `unit` 应为字符串,可以是“px”或“步骤”(默认“px”)。 “px”的值是指 `bottom` 财务报告和审定财务报表 `top` 值以像素表示,“步骤”的值系指 `bottom` 财务报告和审定财务报表 `top` 数值被指定为屏幕最小分隔(AKA step-size)的倍数 `y2Data` 点。 刻度设置对绝对缩放和对数数字缩放均被忽略,如果 `unit` 不是“ px ” .

### `chart_layout.y2ZeroAxis([value])`

指定 Y 轴时的行为 `zero_axis` 设置设置为 `auto`在这种情况下,如果 `value` 如果数据是数字和轴线性的,那么 y2 轴将包含 0, 不论 `y2Data` 数值。 可以被用户设置所覆盖 `min` 财务报告和审定财务报表 `max` 数值.

## 常见问题

### @flourish/chart-layout 是什么？

创建轴

### 如何安装 @flourish/chart-layout？

在项目目录运行 npm install @flourish/chart-layout，或使用 pnpm add / yarn add / bun add。

### @flourish/chart-layout 支持 TypeScript 吗？

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

### @flourish/chart-layout 支持 ESM 还是 CommonJS？

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

### @flourish/chart-layout 可以商用吗？

@flourish/chart-layout 使用 LicenseRef-LICENSE 许可。声明的许可为 LicenseRef-LICENSE，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @flourish/chart-layout 的下载量有多少？

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

### @flourish/chart-layout 还在维护吗？

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