显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

图表

Flux 的 Chart 组件是一款轻量、零依赖的工具，可用于在 Livewire 应用中构建图表。它被设计得既简单又极其灵活，便于你按照需求组合并自定义图表样式。

目前，Flux 支持折线图和面积图。更多图表类型将在未来版本中推出。

<flux:chart wire:model="data" class="aspect-3/1">    <flux:chart.svg>        <flux:chart.line field="visitors" class="text-pink-500 dark:text-pink-400" />        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.line />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.axis axis="y">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.cursor />    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="date" :format="['year' => 'numeric', 'month' => 'numeric', 'day' => 'numeric']" />        <flux:chart.tooltip.value field="visitors" label="Visitors" />    </flux:chart.tooltip></flux:chart>

数据结构

Flux 图表需要一个结构化的数据数组，通常通过 wire:model 提供，或作为 value 属性传入。每个数据点都应为带命名字段的关联数组：

<?phpuse Livewire\Component;class Dashboard extends Component{    public array $data = [        ['date' => '2025-10-08', 'visitors' => 267],        ['date' => '2025-10-07', 'visitors' => 259],        ['date' => '2025-10-06', 'visitors' => 269],        // ...    ];}

如果你将这些数据存储为公共属性，可以使用 wire:model 将数据绑定到图表：

<flux:chart wire:model="data" />

或者，你也可以将任意形式的数据直接传递给 :value 属性：

<flux:chart :value="$this->data" />

对于没有坐标轴的简单折线图，你也可以传入单个值数组：

<flux:chart :value="[1, 2, 3, 4, 5]" />

示例

折线图

若要创建折线图，可以在 <flux:chart.svg> 组件中加入 <flux:chart.line> 组件：

内存使用情况

<flux:chart wire:model="data" class="aspect-[3/1]">    <flux:chart.svg>        <flux:chart.line field="memory" class="text-pink-500" />        <flux:chart.point field="memory" class="text-pink-400" />        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>        <flux:chart.axis axis="y" tick-values="[0, 128, 256, 384, 512]" :format="['style' => 'unit', 'unit' => 'megabyte']">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>    </flux:chart.svg></flux:chart>

如上所示，你也可以使用 <flux:chart.point> 组件在折线之上渲染圆形点。

面积图

类似于折线图，但折线下方带有填充区域。非常适合展示累积值或突出显示总体量。

股票价格

<flux:chart wire:model="data" class="aspect-3/1">    <flux:chart.svg>        <flux:chart.line field="stock" class="text-blue-500 dark:text-blue-400" curve="none" />        <flux:chart.area field="stock" class="text-blue-200/50 dark:text-blue-400/30" curve="none" />        <flux:chart.axis axis="y" position="right" tick-prefix="$" :format="[            'notation' => 'compact',            'compactDisplay' => 'short',            'maximumFractionDigits' => 1,        ]">            <flux:chart.axis.grid />            <flux:chart.axis.tick />        </flux:chart.axis>        <flux:chart.axis axis="x" field="date">            <flux:chart.axis.tick />            <flux:chart.axis.line />        </flux:chart.axis>    </flux:chart.svg></flux:chart>

多条折线

在同一张图表中包含多个 <flux:chart.line> 组件即可绘制多条折线，可用于对比不同数据系列。

Instagram

Twitter

Facebook

<flux:chart wire:model="data">    <flux:chart.viewport class="min-h-[20rem]" >        <flux:chart.svg>            <flux:chart.line field="twitter" class="text-blue-500" curve="none" />            <flux:chart.point field="twitter" class="text-blue-500" r="6" stroke-width="3" />            <flux:chart.line field="facebook" class="text-red-500" curve="none" />            <flux:chart.point field="facebook" class="text-red-500" r="6" stroke-width="3" />            <flux:chart.line field="instagram" class="text-green-500" curve="none" />            <flux:chart.point field="instagram" class="text-green-500" r="6" stroke-width="3" />            <flux:chart.axis axis="x" field="date">                <flux:chart.axis.tick />                <flux:chart.axis.line />            </flux:chart.axis>            <flux:chart.axis axis="y" tick-start="0" tick-end="1" :format="[                'style' => 'percent',                'minimumFractionDigits' => 0,                'maximumFractionDigits' => 0,            ]">                <flux:chart.axis.grid />                <flux:chart.axis.tick />            </flux:chart.axis>        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Instagram">            <flux:chart.legend.indicator class="bg-green-400" />        </flux:chart.legend>        <flux:chart.legend label="Twitter">            <flux:chart.legend.indicator class="bg-blue-400" />        </flux:chart.legend>        <flux:chart.legend label="Facebook">            <flux:chart.legend.indicator class="bg-red-400" />        </flux:chart.legend>    </div></flux:chart>

你可能已经注意到，上面的示例包含了一个 <flux:chart.viewport> 组件。它用于将图表 SVG 限制在图表组件内，从而可以在其上下渲染图例或摘要等兄弟元素。

实时摘要

Flux 图表支持实时摘要，当用户悬停在图表上时会自动更新。要启用此功能，可在 <flux:chart> 组件中加入 <flux:chart.summary> 组件：

<flux:card>    <flux:chart class="grid gap-6" wire:model="data">        <flux:chart.summary class="flex gap-12">            <div>                <flux:text>Today</flux:text>                <flux:heading size="xl" class="mt-2 tabular-nums">                    <flux:chart.summary.value field="sales" :format="['style' => 'currency', 'currency' => 'USD']" />                </flux:heading>                <flux:text class="mt-2 tabular-nums">                    <flux:chart.summary.value field="date" :format="['hour' => 'numeric', 'minute' => 'numeric', 'hour12' => true]" />                </flux:text>            </div>            <div>                <flux:text>Yesterday</flux:text>                <flux:heading size="lg" class="mt-2 tabular-nums">                    <flux:chart.summary.value field="yesterday" :format="['style' => 'currency', 'currency' => 'USD']" />                </flux:heading>            </div>        </flux:chart.summary>        <flux:chart.viewport class="aspect-[3/1]">            <flux:chart.svg>                <flux:chart.line field="yesterday" class="text-zinc-300 dark:text-white/40" stroke-dasharray="4 4" curve="none" />                <flux:chart.line field="sales" class="text-sky-500 dark:text-sky-400" curve="none" />                <flux:chart.axis axis="x" field="date">                    <flux:chart.axis.grid />                    <flux:chart.axis.tick />                    <flux:chart.axis.line />                </flux:chart.axis>                <flux:chart.axis axis="y">                    <flux:chart.axis.tick />                </flux:chart.axis>                <flux:chart.cursor />            </flux:chart.svg>        </flux:chart.viewport>    </flux:chart></flux:card>

迷你折线图

一种紧凑的单线图，常用于表格或仪表盘中，便于快速获得视觉洞察。非常适合展示股票价格、内存使用或其他小规模趋势。

股票	价格	涨跌
AAPL	$193.45	+2.4%
MSFT	$338.12	+1.8%
TSLA	$242.68	-3.2%
GOOGL	$129.87	+0.9%

<flux:chart :value="[15, 18, 16, 19, 22, 25, 28, 25, 29, 28, 32, 35]" class="w-[5rem] aspect-[3/1]">    <flux:chart.svg gutter="0">        <flux:chart.line class="text-green-500 dark:text-green-400" />    </flux:chart.svg></flux:chart>

你可能已经注意到，在 <flux:chart.svg> 组件上有一个 gutter 属性。这是因为默认情况下，图表会在四周渲染 8px 的内边距，以防止图表内容（如刻度标签或描边线）在容器边缘被截断。

对于像迷你折线图这样的简单图表，你可能不需要额外的内边距，因此可以将 gutter 设置为 0 来移除它。

了解更多关于 gutter 属性 ->

仪表盘统计

一张展示关键指标的小卡片，背景中嵌入了图表。适用于营收、活跃用户或系统健康等 KPI。

营收

$12,345

<flux:card class="overflow-hidden min-w-[12rem]">    <flux:text>Revenue</flux:text>    <flux:heading size="xl" class="mt-2 tabular-nums">$12,345</flux:heading>    <flux:chart class="-mx-8 -mb-8 h-[3rem]" :value="[10, 12, 11, 13, 15, 14, 16, 18, 17, 19, 21, 20]">        <flux:chart.svg gutter="0">            <flux:chart.line class="text-sky-200 dark:text-sky-400" />            <flux:chart.area class="text-sky-100 dark:text-sky-400/30" />        </flux:chart.svg>    </flux:chart></flux:card>

图表内边距

默认情况下，图表会在四周渲染 8px 的内边距。这是为了防止图表内容（例如刻度标签或描边线）在容器边缘被截断。

你可以通过在 <flux:chart.svg> 组件上设置 gutter 属性来控制这一点：

下面示例演示了如何为图表添加如下内边距：

<flux:chart>    <flux:chart.svg gutter="12 0 12 8">        <!-- ... -->    </flux:chart.svg></flux:chart>

gutter 属性可以接受 1 到 4 个值，分别对应上、右、下、左的内边距，类似于 CSS 中的 padding 速记语法。

上述示例将得到如下内边距：

顶部: 12px
右侧: 0px
底部: 12px
左侧: 8px

坐标轴比例

你可以通过在 <flux:chart.axis> 组件上设置 scale 属性来配置坐标轴比例及其刻度：

<flux:chart.axis axis="y" scale="linear">    <!-- ... --></flux:chart.axis>

共有三种可用的比例类型：

categorical：用于名称或类别等分类数据。
linear：用于股票价格或温度等数值数据。
time：用于日期和时间数据。

“y” 轴默认使用线性比例，但你可以将 scale 属性设置为 time 以改用时间比例。

当数据为日期或时间值时，“x” 轴会自动使用时间比例；否则会使用分类比例。

坐标轴线

默认情况下，坐标轴不会包含可见的基线。你可以在对应的坐标轴内使用 <flux:chart.axis.line> 来添加轴线：

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- Horizontal "X" axis line: -->        <flux:chart.axis.line />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Vertical "Y" axis line: -->        <flux:chart.axis.line />    </flux:chart.axis></flux:chart.svg>

坐标轴线样式

由于坐标轴线是通过 <line> 元素渲染的，你可以使用 <line> 元素支持的任意 SVG 属性来调整它的样式。

<!-- A dark gray axis line that is 2px wide and has a gray color: --><flux:chart.axis.line class="text-zinc-800" stroke-width="2" />

零基线

零基线表示坐标轴上的零值。仅当坐标轴包含负值时才会显示。

<flux:chart.svg>    <!-- ... -->    <!-- Zero line: -->    <flux:chart.zero-line /></flux:chart.svg>

零基线样式

由于零基线同样是通过 <line> 元素渲染的，你可以使用 <line> 元素支持的任意 SVG 属性来设置其样式。

<!-- A dark gray zero line that is 2px wide and has a gray color: --><flux:chart.zero-line class="text-zinc-800" stroke-width="2" />

网格线

想要渲染水平与垂直网格线时，可以在对应坐标轴中加入 <flux:chart.axis.grid> 组件：

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- Vertical grid lines: -->        <flux:chart.axis.grid />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Horizontal grid lines: -->        <flux:chart.axis.grid />    </flux:chart.axis></flux:chart.svg>

网格线样式

由于网格线同样是通过 <line> 元素渲染的，你可以利用 <line> 元素支持的任意 SVG 属性来调整它们的样式。

<!-- A dashed grid line that is 2px wide and has a gray color: --><flux:chart.axis.grid class="text-zinc-200/50" stroke-width="2" stroke-dasharray="4,4" />

刻度

若要渲染刻度线与刻度标签，可以在对应的坐标轴上添加 <flux:chart.axis.mark> 和/或 <flux:chart.axis.tick> 组件：

<flux:chart.svg>    <!-- ... -->    <flux:chart.axis axis="x">        <!-- X axis tick mark lines: -->        <flux:chart.axis.mark />        <!-- X axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis>    <flux:chart.axis axis="y">        <!-- Y axis tick mark lines: -->        <flux:chart.axis.mark />        <!-- Y axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis></flux:chart.svg>

刻度线样式

刻度线组件本质上是对 <line> SVG 元素的简单封装，你可以通过常规 CSS 与 SVG 属性自定义刻度线的长度、宽度和颜色：

<!-- A tick mark line that is 10px long, 2px wide, and has a gray color: --><flux:chart.axis.mark class="text-zinc-300" stroke-width="2" y1="0" y2="10" />

刻度标签样式

<flux:chart.axis.tick> 组件本质上是对 <text> SVG 元素的封装，你可以通过常规 CSS 与 SVG 属性自定义刻度标签的字体大小、颜色和位置：

<!-- A tick label that is 12px, has a blue color, is center aligned, and is 2.5rem from the axis line: --><flux:chart.axis.tick class="text-xs text-blue-500" text-anchor="middle" dy="2.5rem"  />

刻度数量

你可以通过设置 tick-count 属性来影响坐标轴上的刻度数量：

设置刻度数量

<flux:chart.axis axis="y" tick-count="5">    <!-- ... --></flux:chart.axis>

请注意，tick-count 属性只是一个期望值，实际刻度数量仍可能因坐标轴的数据范围而有所变化。

设置刻度起点

默认情况下，刻度线会从零开始，除非轴上存在负值。你可以通过设置 tick-start 属性来覆盖这一行为：

<flux:chart.axis axis="y" tick-start="min">    <!-- ... --></flux:chart.axis>

tick-start 支持以下取值：

auto：自动决定刻度起点。
min：从坐标轴的最小值开始。
0：从零开始。
123：从 123（或任意数字）开始。

设置刻度终点

默认情况下，刻度线会在超过坐标轴最大值的下一个刻度处结束。你可以通过设置 tick-end 属性来覆盖这一行为：

<flux:chart.axis axis="y" tick-end="max">    <!-- ... --></flux:chart.axis>

tick-end 支持以下取值：

auto：自动决定刻度终点。
max：在坐标轴的最大值处结束。
123：在 123（或任意数字）处结束。

设置固定刻度值

你也可以为 tick-values 属性传入一个数值数组，以显式指定刻度值：

<flux:chart.axis axis="y" tick-values="[0, 128, 256, 384, 512]" tick-suffix="MB">    <!-- ... --></flux:chart.axis>

刻度格式化

可以通过 format 属性来格式化刻度标签。

在底层实现中，format 属性会传递给 Intl.NumberFormat 构造函数。

这意味着你可以使用 Intl.NumberFormat 构造函数所提供的任何格式化选项。

更多格式化选项可参考 MDN 文档 ->

<flux:chart.svg>    <!-- ... -->    <!-- Format the X axis tick labels to display the month and day: -->    <flux:chart.axis axis="x" :format="['month' => 'long', 'day' => 'numeric']">        <!-- X axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis>    <!-- Format the Y axis tick labels to display the value in USD: -->    <flux:chart.axis axis="y" :format="['style' => 'currency', 'currency' => 'USD']">        <!-- Y axis tick labels: -->        <flux:chart.axis.tick />    </flux:chart.axis></flux:chart.svg>

设置刻度前缀

可以通过向 tick-prefix 属性传入字符串来设置刻度前缀：

<flux:chart.axis axis="y" tick-prefix="$">    <!-- ... --></flux:chart.axis>

设置刻度后缀

可以通过向 tick-suffix 属性传入字符串来设置刻度后缀：

<flux:chart.axis axis="y" tick-suffix="MB">    <!-- ... --></flux:chart.axis>

光标

在图表上悬停时添加一条垂直指引线，用于突出显示特定点位的数值。可自定义描边样式、颜色和虚线模式。

要启用光标，只需在 <flux:chart.svg> 中加入 <flux:chart.cursor>：

<flux:chart.svg>    <!-- ... -->    <flux:chart.cursor /></flux:chart.svg>

光标样式

由于光标是通过 <line> 元素渲染的，因此可以使用该 <line> 元素所支持的任意 SVG 属性来自定义它的样式。

<!-- A dashed, black cursor that is 1px wide: --><flux:chart.cursor class="text-zinc-800" stroke-width="1" stroke-dasharray="4,4" />

悬停时显示上下文数据，支持多个数值及自定义格式以提升可读性。

要启用提示框，请在 <flux:chart> 中包含 <flux:chart.tooltip>：

<flux:chart>    <flux:chart.svg>        <!-- ... -->    </flux:chart.svg>    <flux:chart.tooltip>        <flux:chart.tooltip.heading field="date" />        <flux:chart.tooltip.value field="visitors" label="Visitors" />        <flux:chart.tooltip.value field="views" label="Views" :format="['notation' => 'compact']" />    </flux:chart.tooltip></flux:chart>

自定义提示框内容

可以显示多个数值，并动态格式化数字。

<flux:chart.tooltip>    <flux:chart.tooltip.heading field="date" />    <flux:chart.tooltip.value field="visitors" label="Visitors" />    <flux:chart.tooltip.value field="views" label="Page Views" :format="['notation' => 'compact']" /></flux:chart.tooltip>

图例

用于标识图表中的多个数据系列，每个图例项对应一个不同的数据集。

使用图例时，需要包含 <flux:chart.viewport> 组件来包裹 <flux:chart.svg> 组件，以便在图表外渲染图例：

<flux:chart wire:model="data">    <flux:chart.viewport class="aspect-3/1">        <flux:chart.svg>            <flux:chart.line class="text-blue-500" field="visitors" />            <flux:chart.line class="text-red-500" field="views" />        </flux:chart.svg>    </flux:chart.viewport>    <div class="flex justify-center gap-4 pt-4">        <flux:chart.legend label="Visitors">            <flux:chart.legend.indicator class="bg-blue-400" />        </flux:chart.legend>        <flux:chart.legend label="Views">            <flux:chart.legend.indicator class="bg-red-400" />        </flux:chart.legend>    </div></flux:chart>

汇总

以加粗且易读的格式展示数据集中单个数值，非常适合展示关键绩效指标。

要启用汇总，请在 <flux:chart> 中加入 <flux:chart.summary>：

<flux:chart wire:model="data">    <flux:chart.summary>        <flux:chart.summary.value field="visitors" :format="['notation' => 'compact']" />    </flux:chart.summary>    <flux:chart.viewport class="aspect-[3/1]">        <!-- ... -->    </flux:chart.viewport></flux:chart>

请注意，需要使用 <flux:chart.viewport> 组件包裹 <flux:chart.svg> 组件，这样才能在图表外部渲染汇总。

设置备用值

可以通过向 fallback 属性传入字符串来设置备用值：

<flux:chart.summary.value field="visitors" fallback="1200" />

当没有悬停任何数据点时，将显示该备用值。

格式化

你可以自定义图表中的数字与日期呈现方式，以提升可读性。无论是货币、百分比还是大数字，Flux 图表都允许你通过 :format 属性轻松控制数值的显示。

Flux 在幕后通过 Intl.NumberFormat 与 Intl.DateTimeFormat API 帮你处理格式化，这些浏览器内置特性会根据区域和格式规则确保展示一致。只需将期望的格式选项传递给 :format 属性，Flux 会自动应用。

数字格式化

可以通过向 :format 属性传入格式化选项数组来设置数字格式。

<flux:chart.axis axis="y" :format="['style' => 'currency', 'currency' => 'USD']" />

常用格式化选项

以下是一些常用的数字格式化选项，供你参考：

描述	示例输入	示例输出	格式数组
货币（USD）	1234.56	$1,234.56	['style' => 'currency', 'currency' => 'USD']
货币（EUR）	1234.56	€1,234.56	['style' => 'currency', 'currency' => 'EUR']
百分比	0.85	85%	['style' => 'percent']
紧凑数字	1000000	1M	['notation' => 'compact']
科学计数法	123456789	1.235E8	['notation' => 'scientific']
固定小数	3.1415926535	3.14	['maximumFractionDigits' => 2]
千分位分隔符	1234567	1,234,567	['useGrouping' => true]
自定义单位	50	50 MB	['style' => 'unit', 'unit' => 'megabyte']

日期格式化

可以通过向 :format 属性传入格式化选项数组来设置日期格式。

<flux:chart.axis axis="x" field="date" :format="['month' => 'long', 'day' => 'numeric']" />

常用日期格式化选项

以下列出了常见的日期格式化选项，供你参考：

描述	示例输入	示例输出	格式数组
完整日期	2024-03-15	Friday, March 15, 2024	['dateStyle' => 'full']
月份与日期	2024-03-15	March 15	['month' => 'long', 'day' => 'numeric']
简写月份	2024-03-15	Mar 15	['month' => 'short', 'day' => 'numeric']
仅显示时间	2024-03-15 14:30	2:30 PM	['hour' => 'numeric', 'minute' => 'numeric', 'hour12' => true]
24 小时制时间	2024-03-15 14:30	14:30	['hour' => '2-digit', 'minute' => '2-digit', 'hour12' => false]
星期	2024-03-15	Friday	['weekday' => 'long']
短日期格式	2024-03-15	03/15/24	['month' => '2-digit', 'day' => '2-digit', 'year' => '2-digit']
仅年份	2024-03-15	2024	['year' => 'numeric']

参考

flux:chart

属性	说明
wire:model	将图表绑定到包含待展示数据的 Livewire 属性。更多信息请参阅 wire:model 文档。
value	图表的数据点数组。每个点都应是带命名字段的关联数组，用于未使用 wire:model 绑定的场景。
curve	图表中所有折线的默认曲线类型。可选值：smooth（默认）、none。

插槽	说明
default	要渲染的图表组件。通常包含一个定义图表结构的 flux:chart.svg 组件。

CSS	说明
class	应用到图表容器的额外 CSS 类。常见用法：使用 aspect-3/1 设置宽高比，使用 h-64 固定高度。

属性	说明
data-flux-chart	应用在根元素上，用于样式控制与标识。

flux:chart.svg

用于承载图表 SVG 元素的容器。必须嵌套在 `flux:chart` 内才能渲染图表。

插槽	说明
default	用于渲染图表的可视化组件，如折线、面积、坐标轴及交互元素。

flux:chart.line

属性	说明
field	要绘制在 y 轴上的数据字段名称。必填。
curve	折线的曲线类型。可选值：smooth（默认）、none。

CSS	说明
class	应用到折线的额外 CSS 类。常见用法：通过 text-{color} 设置线条颜色。

flux:chart.area

属性	说明
field	要绘制在 y 轴上的数据字段名称。必填。
curve	面积的曲线类型。可选值：smooth（默认）、none。

CSS	说明
class	应用到面积图的额外 CSS 类。常见用法：通过 fill-{color}/20 设置填充颜色。

flux:chart.point

为折线图或面积图添加点（圆点），用于标记每个数据点。

属性	说明
field	要绘制点位的数据字段名称。必填。

CSS	说明
class	应用到数据点的额外 CSS 类。常见用法：使用 fill-{color} 设置填充颜色，使用 r 属性设定点的半径。

flux:chart.axis

属性	说明
axis	需要配置的坐标轴。可选值：x、y。必填。
field	当 `axis="x"` 时，用于生成标签的数据字段。
format	用于坐标轴标签的日期/数字格式化选项。详见格式化章节。

flux:chart.axis.mark

为图表添加刻度线，必须在 `flux:chart.axis` 组件内使用。

属性	说明
position	刻度线的位置。可选值：top、bottom、left、right。

CSS	说明
class	应用到刻度线的额外 CSS 类。常见用法：通过 text-{color} 设置线条颜色，使用 stroke-width="1" 设置线条粗细。

flux:chart.axis.line

为图表添加坐标轴线，必须在 `flux:chart.axis` 组件内使用。

CSS	说明
class	应用到坐标轴线的额外 CSS 类。常见用法：通过 text-{color} 设置线条颜色，使用 stroke-width="1" 设置线条粗细。

flux:chart.axis.grid

为图表添加网格线，必须在 `flux:chart.axis` 组件内使用。

CSS	说明
class	应用到网格线的额外 CSS 类。常见用法：通过 text-{color} 设置线条颜色，使用 stroke-width="{width}" 设置线条粗细。

flux:chart.axis.tick

为坐标轴添加刻度与标签，必须在 `flux:chart.axis` 组件内使用。

属性	说明
format	刻度标签的日期／数字格式化选项。详见格式化章节。

CSS	说明
class	应用到刻度线与标签的额外 CSS 类。常见用法：使用 text-{color} 设置标签颜色，使用 font-{weight} 设置字重。

flux:chart.zero-line

在 y=0 位置添加一条水平线，适用于同时包含正值和负值的图表。

CSS	说明
class	应用到零线的额外 CSS 类。常见用法：通过 text-{color} 设置线条颜色，使用 stroke-width="{width}" 设置线条粗细。

flux:chart.tooltip

属性	说明
field	在提示框中要展示的数据字段。
format	提示框数值的日期／数字格式化选项。

flux:chart.tooltip.heading

属性	说明
field	提示框标题中要展示的数据字段。
format	提示框数值的日期／数字格式化选项，详见格式化章节。

flux:chart.tooltip.value

属性	说明
field	在提示框中要展示的数据字段。
format	提示框数值的日期／数字格式化选项，详见格式化章节。

flux:chart.cursor

添加跟随鼠标移动的交互式光标，在存在提示框时可触发显示。

CSS	说明
class	应用到光标线的额外 CSS 类。

flux:chart.summary

添加显示在图表上方的汇总区域，可展示最新数值或光标所在位置的数值。

插槽	说明
default	汇总区域中需要展示的内容，可包含 flux:chart.value 组件以展示特定数据值。

flux:chart.summaryvalue

用于显示特定数据值，通常配合 `flux:chart.summary` 组件使用。

属性	说明
field	要展示的数据字段。
fallback	当该数值不存在或无法格式化时显示的备用文本。
format	日期／数字格式化选项，详见格式化章节。

flux:chart.legend

Prop	Description
field	图例项所对应的数据字段。
label	图例项显示的文本标签。
format	日期／数字格式化选项，详见格式化章节。

插槽	说明
default	图例中需要展示的内容，可包含任意内容，包括 flux:chart.legend.indicator 组件。

图表