需补充数据映射与前端图表渲染环节；可通过nanonets api导出csv、plotly dash构建看板、同步至google sheets嵌入data studio、或用内置模板引擎生成html摘要页实现交互式费用图表。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您使用Nanonets AI识别票据后需进一步生成交互式费用图表，但当前仅获得原始识别文本而无法可视化呈现费用结构，则可能是由于缺少数据映射与前端图表渲染环节。以下是实现该目标的多种技术路径：
一、通过Nanonets API提取结构化票据字段并导出为CSV
该方法利用Nanonets AI的RESTful接口获取标准化JSON响应，再转换为表格格式供图表工具消费，适用于批量处理且需保留原始数据溯源的场景。
1、登录Nanonets平台，进入“Models”页面，选择已训练完成的票据识别模型。
2、点击“API Keys”，复制有效密钥，并记录模型ID（格式如：model_abc123xyz）。
3、使用curl或Python requests向https://app.nanonets.com/api/v2/OCR/Model/<model_id>/LabelFile</model_id>提交票据图片Base64编码或文件URL。
4、解析返回JSON，提取prediction数组中字段如"Invoice Amount"、"Date"、"Vendor Name"等，写入CSV文件，列头统一为英文小写下划线命名（如invoice_amount、issue_date）。
5、确保CSV首行含表头，无BOM，编码为UTF-8，以兼容后续图表工具读取。
二、接入Plotly Dash构建本地交互式费用看板
该方法在本地部署轻量级Web应用，将Nanonets识别结果实时注入动态图表，支持筛选、悬停、缩放等交互操作，无需依赖第三方SaaS服务。
1、安装必要库：pip install nanonets plotly dash pandas。
2、创建Python脚本，调用Nanonets API获取识别结果后，用pandas构造DataFrame。
3、定义Dash应用布局：添加下拉菜单（按供应商筛选）、日期范围滑块、柱状图（月度费用分布）、散点图（金额vs日期）。
4、为每个图表组件绑定回调函数，输入为筛选控件值，输出为更新后的figure对象。
5、运行app.run_server(debug=True)，访问http://127.0.0.1:8050查看可交互费用图。
三、将Nanonets输出同步至Google Sheets并嵌入Data Studio图表
该方法适合非技术人员快速搭建协作型费用分析界面，所有操作基于浏览器完成，不涉及代码编写。
1、在Google Sheets新建空白表格，在A1单元格输入=IMPORTDATA("https://your-nanonets-webhook-url")（需先配置Nanonets Webhook推送至Google Apps Script端点）。
2、若未启用Webhook，改用手动导入：将步骤一生成的CSV上传至Google Drive，右键“用Google Sheets打开”。
3、在Sheets中对“invoice_amount”列应用条件格式，设置数据条突出高费用项。
4、打开Google Data Studio，新建报告，添加“Google Sheets”作为数据源，选择对应表格。
5、拖入“时间序列图”组件，维度设为issue_date（需转为日期类型），指标设为SUM(invoice_amount)；再添加“饼图”，维度为vendor_name，指标同上。
6、点击右上角“分享”，生成可读链接，设置“任何拥有链接者均可查看”权限。
四、使用Nanonets内置模板引擎渲染HTML费用摘要页
该方法直接复用Nanonets平台提供的模板系统，将识别结果注入预置HTML结构，生成含内联SVG图表的静态费用摘要页，便于邮件分发或归档。
1、进入模型详情页，点击“Templates”标签，选择“HTML Template”新建模板。
2、在编辑器中插入Mustache语法变量，例如{{predictions.invoice_amount}}、{{predictions.date}}。
3、嵌入轻量SVG代码：在模板中添加<svg width="600" height="300"><rect x="50" y="{{#multiply predictions.invoice_amount 0.1}}{{/multiply}}" width="80" height="{{#multiply predictions.invoice_amount 0.1}}{{/multiply}}" fill="steelblue"></rect></svg>实现金额高度映射。
4、保存模板后，在“Test”页上传票据，点击“Render Template”，下载生成的HTML文件。
5、用浏览器打开该HTML，即可查看含基础可视化效果的费用摘要页，所有图表均为纯前端渲染，不依赖外部CDN或JavaScript库。
