@flourish/chart-layout

中文文档

12.0.0发布于 2026/10/16LicenseRef-LICENSEES Module近 30 天下载 2399

创建轴

文档目录75 节

如何安装
如何使用
属性 chart_layout
chart_layout.chart
chart_layout.container
chart_layout.data_background
chart_layout.data_foreground
这个 update 方法 chart_layout
chart_layout.update([options])
这个 Data 方法 chart_layout
chart_layout.xData([values, [accessor]])
chart_layout.yData([values, [accessor]])
chart_layout.y2Data([values, [accessor]])
这个 Scale 方法 chart_layout
chart_layout.xScale([options])
chart_layout.yScale([options])
chart_layout.y2Scale([options])
chart_layout.xMinStep()
chart_layout.yMinStep()
chart_layout.y2MinStep()
维度和比值功能及特性 chart_layout
chart_layout.height([value])
chart_layout.plotAspect([value])
chart_layout.width([value])
chart_layout.margins()
chart_layout.plot_height
chart_layout.plot_width
chart_layout.x_left
chart_layout.x_right
chart_layout.y_bottom
chart_layout.y_top
这个 Ticks 方法 chart_layout
chart_layout.xTicks()
chart_layout.yTicks()
chart_layout.y2Ticks()
chart_layout.xTicks.autoLabelSpace([value, [unit]]) chart_l…
这个 Title 方法 chart_layout
chart_layout.xTitle()
chart_layout.yTitle()
chart_layout.y2Title()
其他方法 chart_layout
chart_layout.animationDuration([value])
chart_layout.clip([value])
chart_layout.debug([value])
chart_layout.debugColor([value])
chart_layout.identifier([value])
chart_layout.offsetTop([value])
chart_layout.offsetLeft([value])
chart_layout.xAutoTicks([value])
chart_layout.xAutoTitle([value])
chart_layout.xDatetimeParse([func])
chart_layout.xFlipAxis([value])
chart_layout.xFormat([func])
chart_layout.xHide([value])
chart_layout.xNumberParse([func])
chart_layout.xPadding([object])
chart_layout.xZeroAxis([value])
chart_layout.yAutoTicks([value])
chart_layout.yAutoTitle([value])
chart_layout.yDatetimeParse([func])
chart_layout.yFlipAxis([value])
chart_layout.yFormat([func])
chart_layout.yHide([value])
chart_layout.yNumberParse([func])
chart_layout.yPadding([object])
chart_layout.yZeroAxis([value])
chart_layout.y2AutoTicks([value])
chart_layout.y2AutoTitle([value])
chart_layout.y2DatetimeParse([func])
chart_layout.yF2lipAxis([value])
chart_layout.y2Format([func])
chart_layout.y2Hide([value])
chart_layout.y2NumberParse([func])
chart_layout.yPadding([object])
chart_layout.y2ZeroAxis([value])

面粉图表布局

为数据创建轴并绘制区域

如何安装

npm install -s @flourish/chart-layout

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

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

导入相应的设置到您的 template.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"

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

- 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 选择器字符串),您将添加图表到其中,并添加包含相关状态属性的对象。举个例子

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 然后将相应的比值固定在该值上。如果您想要根据计算值设定比值,例如根据默认值增减比值,您可以在函数中通过其中任一属性:

// 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。。。 .

// 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 共发布 68 个版本，首次发布于 2019/06/26；过去 12 个月发布了 2 个版本。

版本	发布日期	距今
`12.0.0`latest	2026/10/16	1 个月前
`11.0.3`	2026/05/28	5 个月前
`11.0.1`	2025/01/10	1.8 年前
`11.0.0`	2024/07/31	2 年前
`10.4.1`	2024/02/08	2 年前
`10.4.0`	2023/08/17	3 年前

其他发布通道：next → 4.0.0-prerelease.1。

关于 @flourish/chart-layout 的常见问题

@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 和提交记录判断。

npm install @flourish/chart-layout

pnpmpnpm add @flourish/chart-layout
yarnyarn add @flourish/chart-layout
bunbun add @flourish/chart-layout

在你的项目目录中运行此命令。

近 30 天下载

2,399

约 2399 次日均 80 次

统计周期 2026/10/15 – 2026/11/13
数据来自 npm 官方下载统计，今天更新

最新版本12.0.0发布于 1 个月前

开源许可LicenseRef-LICENSE其他许可

包体积636 kB54 个文件 · 解压后

运行依赖6 个

模块格式ES Module

TypeScript未声明类型可查找 @types/flourish__chart-layout

发布版本68 个近 12 个月 2 个

首次发布2019/06/267 年前

元数据更新2026/10/16

每一个软件包背后，
都有分享与创造的人。

@flourish/chart-layout

面粉图表布局

如何安装

如何使用

属性 chart_layout

chart_layout.chart

chart_layout.container

chart_layout.data_background

chart_layout.data_foreground

这个 update 方法 chart_layout

chart_layout.update([options])

这个 Data 方法 chart_layout

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

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

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

这个 Scale 方法 chart_layout

chart_layout.xScale([options])

chart_layout.yScale([options])

chart_layout.y2Scale([options])

chart_layout.xMinStep()

chart_layout.yMinStep()

chart_layout.y2MinStep()

维度和比值功能及特性 chart_layout

chart_layout.height([value])

chart_layout.plotAspect([value])

chart_layout.width([value])

chart_layout.margins()

chart_layout.plot_height

chart_layout.plot_width

chart_layout.x_left

chart_layout.x_right

chart_layout.y_bottom

chart_layout.y_top

这个 Ticks 方法 chart_layout

chart_layout.xTicks()

chart_layout.yTicks()

chart_layout.y2Ticks()

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

这个 Title 方法 chart_layout

chart_layout.xTitle()

chart_layout.yTitle()

chart_layout.y2Title()

其他方法 chart_layout

chart_layout.animationDuration([value])

chart_layout.clip([value])

chart_layout.debug([value])

chart_layout.debugColor([value])

chart_layout.identifier([value])

chart_layout.offsetTop([value])

chart_layout.offsetLeft([value])

chart_layout.xAutoTicks([value])

chart_layout.xAutoTitle([value])

chart_layout.xDatetimeParse([func])

chart_layout.xFlipAxis([value])

chart_layout.xFormat([func])

chart_layout.xHide([value])

chart_layout.xNumberParse([func])

chart_layout.xPadding([object])

chart_layout.xZeroAxis([value])

chart_layout.yAutoTicks([value])

chart_layout.yAutoTitle([value])

chart_layout.yDatetimeParse([func])

chart_layout.yFlipAxis([value])

chart_layout.yFormat([func])

chart_layout.yHide([value])

chart_layout.yNumberParse([func])

chart_layout.yPadding([object])

chart_layout.yZeroAxis([value])

chart_layout.y2AutoTicks([value])

chart_layout.y2AutoTitle([value])

chart_layout.y2DatetimeParse([func])

chart_layout.yF2lipAxis([value])

chart_layout.y2Format([func])

chart_layout.y2Hide([value])

chart_layout.y2NumberParse([func])

chart_layout.yPadding([object])

chart_layout.y2ZeroAxis([value])

版本与发布记录

关于 @flourish/chart-layout 的常见问题

@flourish/chart-layout 是什么？

属性 `chart_layout`

`chart_layout.chart`

`chart_layout.container`

`chart_layout.data_background`

`chart_layout.data_foreground`

这个 `update` 方法 `chart_layout`

`chart_layout.update([options])`

这个 `Data` 方法 `chart_layout`

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

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

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

这个 `Scale` 方法 `chart_layout`

`chart_layout.xScale([options])`

`chart_layout.yScale([options])`

`chart_layout.y2Scale([options])`

`chart_layout.xMinStep()`

`chart_layout.yMinStep()`

`chart_layout.y2MinStep()`

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

`chart_layout.height([value])`

`chart_layout.plotAspect([value])`

`chart_layout.width([value])`

`chart_layout.margins()`

`chart_layout.plot_height`

`chart_layout.plot_width`

`chart_layout.x_left`

`chart_layout.x_right`

`chart_layout.y_bottom`

`chart_layout.y_top`

这个 `Ticks` 方法 `chart_layout`

`chart_layout.xTicks()`

`chart_layout.yTicks()`

`chart_layout.y2Ticks()`

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

这个 `Title` 方法 `chart_layout`

`chart_layout.xTitle()`

`chart_layout.yTitle()`

`chart_layout.y2Title()`

其他方法 `chart_layout`

`chart_layout.animationDuration([value])`

`chart_layout.clip([value])`

`chart_layout.debug([value])`

`chart_layout.debugColor([value])`

`chart_layout.identifier([value])`

`chart_layout.offsetTop([value])`

`chart_layout.offsetLeft([value])`

`chart_layout.xAutoTicks([value])`

`chart_layout.xAutoTitle([value])`

`chart_layout.xDatetimeParse([func])`

`chart_layout.xFlipAxis([value])`

`chart_layout.xFormat([func])`

`chart_layout.xHide([value])`

`chart_layout.xNumberParse([func])`

`chart_layout.xPadding([object])`

`chart_layout.xZeroAxis([value])`

`chart_layout.yAutoTicks([value])`

`chart_layout.yAutoTitle([value])`

`chart_layout.yDatetimeParse([func])`

`chart_layout.yFlipAxis([value])`

`chart_layout.yFormat([func])`

`chart_layout.yHide([value])`

`chart_layout.yNumberParse([func])`

`chart_layout.yPadding([object])`

`chart_layout.yZeroAxis([value])`

`chart_layout.y2AutoTicks([value])`

`chart_layout.y2AutoTitle([value])`

`chart_layout.y2DatetimeParse([func])`

`chart_layout.yF2lipAxis([value])`

`chart_layout.y2Format([func])`

`chart_layout.y2Hide([value])`

`chart_layout.y2NumberParse([func])`

`chart_layout.yPadding([object])`

`chart_layout.y2ZeroAxis([value])`