分类

← View All Tools

评分星级图

创建美观的星级评分可视化，用于产品评分、服务评价和用户反馈分析

评分数据（0-5）。支持带标签/评分/数量的JSON，简单的标签:评分:数量格式，或仅评分值

显示在图表上方的标题

每颗星星的像素大小

填充星星的颜色

空星星的颜色

星星动画的毫秒时长

图表容器的背景颜色

显示评分分布和百分比

显示每个项目的评论数量

显示总体评分摘要和统计

显示小数评分（如4.5）而不是四舍五入

加载时动画显示星星

关键信息

分类
Data Visualization
输入类型
textarea, text, select, number, color, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

评分星级图工具是一款专业的在线可视化生成器，旨在帮助用户将枯燥的评分数据转化为直观、美观的五星级评价图表，适用于产品展示、服务评价及用户反馈分析等多种场景。

适用场景

  • •在电商页面或产品介绍中展示用户对产品的综合评分。
  • •在年度服务报告中直观呈现客户满意度调查结果。
  • •在数据分析演示中对比不同项目的口碑表现。

工作原理

  • •输入评分数据，支持 JSON 格式、标签:评分:数量格式或纯数值列表。
  • •根据需求调整布局样式、星星颜色、大小及动画效果。
  • •勾选显示选项，自定义是否展示评论数量、平均分及百分比分布。
  • •生成并预览图表，即可直接应用于网页或报告中。

使用场景

电商产品详情页的买家秀评分展示。
企业内部客户满意度调查结果看板。
行业竞品口碑对比分析报告。

用户案例

1. 电商产品口碑对比

电商运营
背景原因
运营人员需要在一份报告中对比三款核心产品的用户评分，以决定后续的推广策略。
解决问题
原始数据为纯文本，缺乏视觉冲击力，难以快速传达产品口碑差异。
如何使用
将产品评分数据粘贴至输入框，选择“垂直列表”布局，并开启“显示平均评分”和“显示评论数量”。
示例配置
{"layout": "list", "showAverage": true, "showCount": true, "starColor": "#fbbf24"}
效果
生成了一张包含三款产品星级、平均分及评论总数的清晰图表，直观展示了产品口碑。

2. 客户满意度调查可视化

客服主管
背景原因
客服团队完成了季度满意度调查，需要向管理层汇报各服务小组的评价表现。
解决问题
需要将复杂的评分分布转化为易于理解的图形，以便管理层快速决策。
如何使用
输入各小组的评分数据，开启“显示分布”和“显示小数评分”，并设置网格布局。
示例配置
{"layout": "grid", "showPercentage": true, "showDecimal": true, "animated": true}
效果
通过带有动画效果的网格化星级图，清晰展示了各小组的满意度分布，提升了汇报的专业度。

用 Samples 测试

json, audio
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json
Express.js 示例
Express.js Web框架示例，包括Hello World、路由、中间件和REST API
preferred input family json
json
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json

相关专题

JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
AudioGenerate工具专题
探索 8 个围绕 audio 的 generate 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
AudioConvert工具专题
探索 100 个围绕 audio 的 convert 工作流工具，快速找到相近能力。

常见问题

支持哪些格式的评分数据输入？

支持 JSON 数组格式、简单的“标签:评分:数量”文本格式，或直接输入评分数值。

可以自定义星星的颜色吗？

可以，您可以在配置面板中分别设置填充星星颜色和空星星颜色。

图表支持动画效果吗？

支持，您可以开启动画功能，并自定义加载时的动画时长。

如何展示评分的详细分布？

在配置中勾选“显示分布”选项，即可在图表中呈现评分的百分比分布情况。

生成的图表可以调整布局吗？

支持，您可以选择“垂直列表”或“网格布局”两种样式来适配不同的展示空间。

API 文档

请求端点

POST /zh/api/tools/rating-star-chart

请求参数

参数名 类型 必填 描述
ratingData textarea 是 评分数据（0-5）。支持带标签/评分/数量的JSON，简单的标签:评分:数量格式，或仅评分值
chartTitle text 否 显示在图表上方的标题
layout select 否 -
starSize number 否 每颗星星的像素大小
starColor color 否 填充星星的颜色
emptyStarColor color 否 空星星的颜色
animationDuration number 否 星星动画的毫秒时长
backgroundColor color 否 图表容器的背景颜色
showPercentage checkbox 否 显示评分分布和百分比
showCount checkbox 否 显示每个项目的评论数量
showAverage checkbox 否 显示总体评分摘要和统计
showDecimal checkbox 否 显示小数评分（如4.5）而不是四舍五入
animated checkbox 否 加载时动画显示星星

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-rating-star-chart": {
      "name": "rating-star-chart",
      "description": "创建美观的星级评分可视化，用于产品评分、服务评价和用户反馈分析",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=rating-star-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]