nao 图表可视化深入解析:在聊天中生成、分享可交互数据故事的完整指南

发布时间:2026/10/11 11:37:29
nao 图表可视化深入解析:在聊天中生成、分享可交互数据故事的完整指南 【免费下载链接】nao nao is an open source analytics agent. (1) Create context with nao-core cli, (2) deploy nao chat interface for everyone项目地址https://gitcode.com/gh_mirrors/nao4/nao点击查看免费下载nao 是一款开源分析智能体Analytics Agent先用nao-coreCLI 为智能体构建数据上下文再部署一个所有人可用的聊天界面。它最吸引人的能力之一就是nao Stories 与图表可视化——你在聊天里问一句“帮我看看近 90 天的收入趋势”智能体不仅回答还会直接生成可交互图表并把多个图表、表格和文字组合成一份可分享、可下载、可离线打开的数据故事Story。本文带你完整拆解这套能力的实现原理与使用方法。为什么要在聊天中生成数据故事传统 BI 工具的痛点很典型分析师写好仪表盘业务同学要等排期换个问题又要重新建模。nao 的思路是把「问数」和「呈现」合并在同一个聊天会话里完成自然语言提问→ 智能体生成并执行 SQL结果自动变成图表→ 柱状图、折线、KPI 卡片等 15 种内置可视化即问即得图表升级为故事→ 多个图表 表格 叙述文本组合成一份完整的数据报告一键分享→ 生成链接、嵌入页面或导出 PDF / HTML 离线文件。对业务用户来说这意味着不需要学会任何仪表盘工具就能把一次聊天对话沉淀为可复用的数据分析成果。一键生成在聊天中创建交互式图表当智能体回答数据问题时内部会调用display_chart工具把查询结果渲染成图表。该工具的参数定义在 apps/shared/src/tools/display-chart.ts 中几个值得了解的设计15 种内置图表类型柱状、堆叠柱状含百分比、横向条形、折线、面积图、混合图、饼图、环形图、KPI 卡片、散点图、雷达图等完整清单见 apps/shared/src/chart-types.ts数值格式化支持货币前缀$、€、¥、百分号后缀、K/B 等紧凑单位KPI 卡片还能展示环比变化条件格式可对表格单元格按阈值或色阶着色异常值一眼可见双轴混合图同一图表里柱子表示金额、折线表示比率适配量级差异大的指标对比。生成的图表都是可交互的悬停查看 tooltip 明细、切换系列、缩放坐标轴而不是一张静态图片。深入解析 Storiesclassic 与 custom 两种格式故事是 nao 的「可视化容器」。故事工具的输入输出 schema 定义在 apps/shared/src/tools/story.ts它支持create / update / replace / publish / revert等操作且每个故事都有版本管理——改坏了可以回滚到任意历史版本。classic 格式Markdown 图表块默认的经典故事是「Markdown 里的组件化文档」智能体只需写出少量声明式块即可chart query_id... /嵌入一次查询结果的图表table query_id... /嵌入 SQL 结果表格grid widths2,1.../grid把 2~4 个图表/表格并排布局支持不等宽列tab title....../tab标签页式分区把一份报告拆成多个视图。比如一句“做一个收入仪表盘”的提示智能体会自行决定用 KPI 卡片展示总额、用grid并排两张趋势图、再配一段文字结论结构化的报告就此成形。custom 格式用 React 写故事应用对于更复杂的交互需求故事还可以是源代码级的 React 应用文件放在/stories/id/下从 story-kit starter 应用nao.json、app.jsx、app.css起步。可用的组件库定义在 apps/frontend/src/story-runtime/story-kit/ 中包括组件用途KpiCard带环比变化胶囊的核心指标卡LineChart/BarChart/Chart折线、柱状及通用图表DataTable可排序的查询结果表Narrative自动生成的数据叙述文本Slides/Slide幻灯片式分页展示PointMap/MapTiles基于 Leaflet 的地图可视化出于安全考虑custom 故事只允许导入白名单内的模块react、recharts、leaflet、nao/story-kit等白名单定义在 apps/shared/src/story-app.ts编译不通过的版本不会被发布错误会直接反馈给智能体继续修复。分享与导出把数据故事发给团队故事做好后nao 提供了三条分享路径分享链接前端路由 apps/frontend/src/routes/_sidebar-layout.stories.shared.$shareId.tsx 支持将故事分享给同组织成员也有独立的 embed 路由embed.story.$storyId.tsx供嵌入外部页面下载导出后端路由/story/:storyId/download见 apps/backend/src/routes/embed-story-download.ts支持pdf与html两种格式格式定义见 apps/shared/src/types.ts离线 HTML 故事导出的 HTML 由 apps/shared/src/story-document.ts 构建——故事运行时、代码包和查询数据全部内嵌进文件并附带严格的 CSP 安全策略。断网打开依然有 tooltip、翻页等完整交互适合在邮件或会议中直接传递。此外live类型的故事服务见 apps/backend/src/services/live-story.ts支持按调度自动刷新数据让仪表盘始终保持最新。源码导读故事与图表的核心模块想深入理解实现可以从以下入口读起故事工具 schemaapps/shared/src/tools/story.ts图表类型与能力判定apps/shared/src/chart-types.ts图表渲染块与主题apps/shared/src/chart-block.ts、apps/shared/src/story-theme.ts前端故事运行时apps/frontend/src/story-runtime/数据库中的故事表结构apps/backend/migrations-postgres/0019_add_stories.sql快速上手从聊天到可分享故事整个过程无需写代码四步完成初始化项目pip install nao-core后执行nao init接入你的数据库启动聊天界面nao sync nao chat浏览器打开http://localhost:5005提问并生成图表直接用自然语言提问得到图表后可继续追问“把这张图做成仪表盘”智能体会创建 Story分享或导出复制故事链接给同事或下载 PDF / HTML 离线版本。小结nao 把「分析对话」和「数据呈现」打通了聊天中即时生成 15 种可交互图表再用 classic / custom 两种故事格式把结论沉淀为可版本管理的数据报告最后通过链接、嵌入或离线 PDF/HTML 一键分享。对于希望让业务团队「自助式看数」的团队来说这是一套开箱即用的开源方案。赞分享【免费下载链接】nao nao is an open source analytics agent. (1) Create context with nao-core cli, (2) deploy nao chat interface for everyone项目地址https://gitcode.com/gh_mirrors/nao4/nao点击查看免费下载相关推荐DB-GPT数据可视化图表生成与交互分析DB GPT数据可视化图表生成与交互分析 概述 DB GPT作为开源的数据库领域大模型框架提供了强大的数据可视化能力能够将自然语言查询转换为直观的图表展示人工智能AI 应用AI AgentRAG本地部署数据分析Univer数据可视化集成在表格中嵌入图表的完整指南Univer数据可视化集成在表格中嵌入图表的完整指南 Univer作为一款企业级文档和数据协作解决方案提供了强大的电子表格功能其中数据可视化集成是其核心特前端企业应用wa-lang/wa数据可视化图表生成和交互式可视化wa lang/wa数据可视化图表生成和交互式可视化 痛点WebAssembly时代的数据可视化新挑战 在WebAssemblyWASM技术蓬勃发展的今编程语言编译器开发工具语言运行时创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询