SuperAPI AI 工具集

visuals

数据与分析

查看项目

更新于 10-16 06:47

技能介绍

用途:在项目中加入图表、图形、数据网格等数据可视化表示。

主要能力:可视化分两类。图表与图形(柱状、折线、饼图等)基于 vega-lite 构建,详见 references/vega-lite-visual.md;数据网格用于展示表格数据,支持排序、筛选和分页,详见 references/data-grid-visual.md。

包与导入:组件由三个包提供,创建可视化时应始终使用这些导入。@microsoft/fabric-visuals 导出 VegaVisual 及 VisualizationSpec、VegaLiteConfig、VegaVisualProps 等类型;@microsoft/fabric-datagrid 导出 DataGrid 及 GridColumnDef、Row、CellValue、DataGridProps、DataGridTheme、SortConfig 等类型;@microsoft/fabric-visuals-core 导出 isDataTable、convertDataTableToRows 及设计令牌。DataTable 类型定义在 @microsoft/fabric-visuals-core,并由可视化包的类型定义重新导出。

数据格式:图表与数据网格共享统一的 data 属性,类型为 DataTable,携带列元数据(displayName、format、semanticType),用于轴标题、网格表头、数字格式和提示。静态或内联数据可直接在 Vega-Lite spec 中写 data: { values: [...] } 并省略 data 属性。一个可视化中可传入 Record<string, DataTable> 以按名称将不同图层绑定到多个数据集。

容器与主题:VegaVisual 和 DataGrid 默认包裹在 VisualContainer 中,容器绘制边框、内边距、标题/副标题表头及内置操作,默认启用,除非绝对必要不要自行添加外层包裹。格式化规则、配色、编码规则、高亮指南和默认主题见 references/formatting.md。

交互:两者都提供 onInteraction 属性,在用户点击数据点或行时发出基于谓词的结构化事件。点击不同数据点发出新的 select(替换先前选择,无前置 clear);在 vega-lite 可视化中重新点击同一项或空白处发出 clear。谓词包含数据项的所有字段。组件只发出选择,由宿主应用决定后续行为。

自定义可视化:应尽量使用上述方式创建。若用户请求无法用上述方法实现,先询问用户是否可用其他库;同意则用该库,不同意则用 HTML、CSS 和 JS/TS 从头构建,并询问颜色、标签等具体需求。

限制:资料未提供收费、价格、平台支持范围等信息。