React可视化项目：用JS统计唯一值并转换为百分比

我来帮你搞定这个数据处理的问题，这在React数据可视化场景里是非常常见的需求。咱们一步步来拆解，从数据结构分析到具体代码实现：

1. 先明确输入输出结构 #

假设你的原始JSON数据是这样的（每个问题对应一组1-7的投票答案数组）：

const rawSurveyData = {
  "你对当前功能的满意度？": [5, 7, 3, 5, 5, 6, 7, 4],
  "你会向同事推荐这个工具吗？": [6, 6, 7, 5, 4, 6, 7],
  "你认为产品的易用性如何？": [2, 3, 3, 4, 5]
};

我们要转换成的目标结构应该是每个问题对应一个统计列表，包含答案值和占比百分比，方便直接喂给可视化组件：

{
  "你对当前功能的满意度？": [
    { answer: 3, percentage: 12.5 },
    { answer: 4, percentage: 12.5 },
    { answer: 5, percentage: 37.5 },
    { answer: 6, percentage: 12.5 },
    { answer: 7, percentage: 25 }
  ],
  // 其他问题...
}

2. 核心数据处理函数实现 #

我们可以写一个纯JavaScript函数来完成这个转换，用Object.entries遍历每个问题，再用reduce统计每个答案的出现次数，最后计算百分比：

function calculateVotePercentages(rawData) {
  // 遍历所有问题和对应的答案数组
  return Object.entries(rawData).reduce((result, [question, answers]) => {
    const totalVotes = answers.length;
    // 处理空数组的边界情况，避免除以0
    if (totalVotes === 0) {
      result[question] = [];
      return result;
    }

    // 第一步：统计每个答案的出现次数
    const voteCounts = answers.reduce((counts, answer) => {
      counts[answer] = (counts[answer] || 0) + 1;
      return counts;
    }, {});

    // 第二步：将次数转换为百分比，并整理成数组格式
    const percentageData = Object.entries(voteCounts).map(([answer, count]) => ({
      answer: Number(answer), // 把字符串键转回数字类型
      percentage: parseFloat(((count / totalVotes) * 100).toFixed(2)) // 保留两位小数，按需调整
    }));

    // 按答案值升序排序，让可视化展示更规整（可选）
    percentageData.sort((a, b) => a.answer - b.answer);

    result[question] = percentageData;
    return result;
  }, {});
}

3. 在React组件中使用这个函数 #

在你的React组件里，你可以在组件初始化或者数据更新时调用这个函数，把处理后的数据传给可视化组件（比如Recharts、Chart.js之类的库）：

import { useEffect, useState } from 'react';

function SurveyVisualization() {
  const [processedData, setProcessedData] = useState({});
  // 假设原始数据来自API或本地状态，这里用示例数据代替
  const rawData = {
    "你对当前功能的满意度？": [5, 7, 3, 5, 5, 6, 7, 4],
    "你会向同事推荐这个工具吗？": [6, 6, 7, 5, 4, 6, 7],
    "你认为产品的易用性如何？": [2, 3, 3, 4, 5]
  };

  useEffect(() => {
    // 调用处理函数，更新状态
    const data = calculateVotePercentages(rawData);
    setProcessedData(data);
  }, [rawData]);

  return (
    <div className="survey-visuals">
      {/* 遍历处理后的数据，为每个问题渲染图表 */}
      {Object.entries(processedData).map(([question, stats]) => (
        <div key={question} className="chart-container">
          <h3>{question}</h3>
          {/* 这里替换成你的可视化组件，比如用Recharts的柱状图 */}
          {/* <BarChart data={stats}>
            <XAxis dataKey="answer" />
            <YAxis label={{ value: '百分比', angle: -90, position: 'insideLeft' }} />
            <Bar dataKey="percentage" fill="#8884d8" />
          </BarChart> */}
          {/* 先用文字展示统计结果，方便调试 */}
          <ul>
            {stats.map((item) => (
              <li key={item.answer}>
                答案{item.answer}: {item.percentage}%
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

// 把之前的calculateVotePercentages函数放在组件文件里即可

4. 一些额外优化建议 #

• 边界情况处理：函数里已经考虑了空答案数组的场景，避免出现除以0的错误。
• 百分比精度：如果需要更精确的数值，可以去掉toFixed(2)，或者根据需求调整小数位数。
• 排序逻辑：如果需要按百分比排序而不是答案值，只需要修改sort的回调函数即可。

内容的提问来源于stack exchange，提问作者Joel Kanerva