Fluent UI Charting 是微软官方为 Fluent UI React 应用提供的图表库，包名为 @fluentui/react-charting。它基于 D3.js 构建，提供一整套与 Fluent 设计系统无缝集成的图表组件，默认支持主题、无障碍访问和响应式行为。
用途 该库面向仪表盘、报表以及数据密集型应用，尤其适合 Microsoft 365 生态及更广泛场景。每个图表组件都遵循 Fluent 设计令牌，支持浅色、深色和高对比度主题，并提供键盘导航和屏幕阅读器播报。
主要能力
- 基于 D3.js 的 SVG 渲染。
- 默认继承 Fluent 主题，从 FluentProvider 获取颜色、字体和间距。
- 无障碍：符合 WCAG 2.1 AA，支持 ARIA 标签、键盘导航和高对比度。
- 响应式：图表随容器尺寸调整。
- TypeScript 优先：所有 props 和数据结构均有完整类型定义。
支持的图表类型
- LineChart：单系列或多系列折线图，支持事件标注和自定义数据点标记。
- BarChart / VerticalBarChart：标准垂直柱状图，用于类别比较。
- GroupedVerticalBarChart：在每个类别内并排比较多个系列。
- HorizontalBarChart：适合排名类数据或较长的类别标签。
- HorizontalBarChartWithAxis：带数值 x 轴的水平柱状图，适合比较绝对值。
- StackedBarChart：展示整体构成，支持单堆叠条或多堆叠系列。
- PieChart：饼图。
- DonutChart：环形图，中心可显示汇总指标。
- AreaChart / StackedAreaChart：面积图，填充折线下方区域，适合展示总量或累计值。
- HeatMapChart：热力图，以颜色强度编码数值大小。
- SankeyChart：桑基图，可视化节点间流动，适合管道、漏斗或迁移分析。
- TreeChart：树图，展示层级数据，适合组织架构或分类分解。
- GaugeChart：仪表盘图，展示单一值在范围内的位置，适合 KPI、健康分数或进度指示。
- SparklineChart：内联微型图表，用于表格、卡片或密集布局。
安装
安装图表包
npm install @fluentui/react-charting
对等依赖（如尚未安装）
npm install react react-dom @fluentui/react
对于使用 Fluent UI React v9（@fluentui/react-components）的项目，图表库内部仍依赖 v8 主题提供程序，但可在 v9 FluentProvider 内正确渲染。如有需要，可同时包裹两个提供程序：
import { FluentProvider, webLightTheme } from '@fluentui/react-components'; import { ThemeProvider, createTheme } from '@fluentui/react';
const v8Theme = createTheme({ /* optional overrides */ });
function App() { return ( <FluentProvider theme={webLightTheme}> <ThemeProvider theme={v8Theme}> {/* Chart components render here */} </ThemeProvider> </FluentProvider> ); }
使用方式 各图表组件通过 data 属性接收数据，并支持 height、width、yAxisTitle 等常用属性。例如 LineChart 接收 chartTitle 和 lineChartData，每个系列包含 legend、data（x/y 点数组）和 color；可通过 eventAnnotationProps 添加事件标注。VerticalBarChart 接收 IVerticalBarChartDataPoint 数组，每项包含 x、y、color。GroupedVerticalBarChart 接收按类别分组的多系列数据。HorizontalBarChart 接收 IChartProps 数组，每项包含 chartTitle 和 chartData。StackedBarChart 接收单个 IChartProps，MultiStackedBarChart 接收 IChartProps 数组。PieChart 和 DonutChart 接收 IChartProps，DonutChart 还支持 innerRadius 和 valueInsideDonut。AreaChart 接收 IChartProps，其 lineChartData 结构与折线图类似。HeatMapChart 接收 IHeatMapChartData 数组，并支持 xAxisStringLabels、yAxisStringLabels、domainValuesForColorScale、rangeValuesForColorScale。SankeyChart 接收包含 nodes 和 links 的 ISankeyChartData。TreeChart 接收 ITreeChartDataPoint，并支持 composition 属性（2 为长布局，1 为紧凑布局）。GaugeChart 接收 segments、chartValue、chartTitle、sublabel、minValue、maxValue。Sparkline 接收 data 数组以及 valueTextWidth、height、width。
主题集成 所有 @fluentui/react-charting 组件从 Fluent ThemeProvider（v8）或 FluentProvider（v9）继承主题。图表自动获取：主题中性色板中的背景色、坐标轴标签/图例/工具提示的文本颜色、主题排版比例中的字体族和字号。可在三个层级覆盖颜色：1）每个数据点设置 color；2）自定义调色板，传入 colors 属性（在支持处）；3）其他主题级覆盖。
适用场景 适合在 Fluent UI React 应用中构建仪表盘、报表、KPI 展示、资源使用监控、转化漏斗、组织架构图、热力分布等数据可视化界面。
限制 资料未提供收费、价格、平台限制或性能基准等信息，暂未提供。