需将LobeAI导出的JSON预测结果(含label和confidence)标准化为0–100区间数据,再分别用Chart.js、Plotly或ECharts渲染交互式雷达图:Chart.js轻量易用,Plotly支持导出与缩放,ECharts适配主题化展示。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

如果您使用LobeAI训练完模型并希望将预测结果可视化为交互式雷达图,则需将LobeAI导出的结构化输出数据适配至雷达图渲染库。以下是实现该目标的具体操作步骤:
一、导出LobeAI模型预测结果为结构化数据
LobeAI默认支持将批量预测结果导出为CSV或JSON格式,其中包含类别标签、置信度等关键字段,这些是构建雷达图维度与数值的基础。
1、在LobeAI界面完成模型训练后,点击左侧导航栏的“预测”选项卡。
2、上传待预测图像或选择示例图片,等待预测完成。
3、点击右上角“导出结果”按钮,选择JSON格式(推荐,便于解析多维置信度)。
4、保存文件至本地,确认文件中每个样本均含"label"和"confidence"字段。
二、提取并标准化置信度数据为雷达图维度值
雷达图要求各维度具有统一量纲与可比性,需将原始置信度映射到0–100区间,并确保每个类别对应一个固定轴向。
1、用Python打开导出的JSON文件,使用json.load()读取内容。
2、遍历predictions数组,提取所有唯一label,并按字母序或业务优先级排序生成维度列表。
3、对每个样本,构造长度与维度列表一致的数值数组,对应位置填入该label的confidence×100(保留一位小数)。
4、若某label未出现在当前样本预测中,其对应值设为0.0,以保持维度对齐。
三、使用Chart.js渲染交互式雷达图
Chart.js提供轻量、响应式且原生支持交互的雷达图类型,无需额外插件即可实现悬停提示与动态更新。
1、在HTML页面中引入Chart.js CDN:。
2、创建元素作为图表容器。
3、编写JavaScript代码,调用new Chart()实例,type设为"radar",data.labels设为步骤二生成的维度列表,data.datasets[0].data设为对应数值数组。
4、在options中启用tooltips.intersect: false与hover.mode: 'point',确保鼠标悬停时显示单点置信度详情。
四、用Plotly实现带缩放与导出功能的雷达图
Plotly雷达图支持内置缩放、拖拽、多数据集叠加及一键导出为PNG/SVG,适合需要高交互性的分析场景。
1、在HTML中引入Plotly JS:。
2、准备数据对象:labels字段为维度名称数组,values字段为对应置信度数值数组(已归一化至0–100)。
3、调用Plotly.newPlot(),配置type: 'scatterpolar',r: values,theta: labels,并设置fill: 'toself'。
4、在config参数中传入{displayModeBar: true, toImageButtonOptions: {format: 'png'}},启用工具栏与导出按钮。
五、通过ECharts快速集成主题化雷达图
ECharts提供丰富的主题与自定义样式能力,可直接绑定LobeAI输出的JSON数据并渲染带标注的雷达图。
1、引入ECharts官方CDN:。
2、定义option配置项,series.type设为"radar",radar.indicator字段由维度名与最大值(统一设为100)构成。
3、series.data中添加一项,name设为样本ID,value字段填入标准化后的数值数组。
4、启用tooltip.trigger: 'item',并在axisLine.lineStyle.color中指定"#5470C6"等主题色以匹配视觉规范。










