需将LobeAI导出的JSON预测结果（含label和confidence）标准化为0–100区间数据，再分别用Chart.js、Plotly或ECharts渲染交互式雷达图：Chart.js轻量易用，Plotly支持导出与缩放，ECharts适配主题化展示。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您使用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：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>。
2、创建<canvas id="radarChart"></canvas>元素作为图表容器。
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：<script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>。
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：<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>。
2、定义option配置项，series.type设为"radar"，radar.indicator字段由维度名与最大值（统一设为100）构成。
3、series.data中添加一项，name设为样本ID，value字段填入标准化后的数值数组。
4、启用tooltip.trigger: 'item'，并在axisLine.lineStyle.color中指定"#5470C6"等主题色以匹配视觉规范。
