js实现占比

计算数组中元素的占比

使用JavaScript计算数组中各元素占比可以通过遍历数组并统计每个元素出现的次数，再根据总数计算比例。

function calculatePercentage(arr) {
  const countMap = {};
  const total = arr.length;

  arr.forEach(item => {
    countMap[item] = (countMap[item] || 0) + 1;
  });

  const result = {};
  for (const key in countMap) {
    result[key] = (countMap[key] / total * 100).toFixed(2) + '%';
  }

  return result;
}

// 示例用法
const data = ['A', 'B', 'A', 'C', 'B', 'A'];
console.log(calculatePercentage(data));

可视化展示占比数据

使用Chart.js库可以轻松实现占比数据的可视化展示。

import Chart from 'chart.js/auto';

function renderPercentageChart(data) {
  const ctx = document.getElementById('myChart').getContext('2d');
  const percentages = calculatePercentage(data);

  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: Object.keys(percentages),
      datasets: [{
        data: Object.values(percentages).map(p => parseFloat(p)),
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)'
        ]
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top'
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return `${context.label}: ${context.raw}%`;
            }
          }
        }
      }
    }
  });
}

处理大数据集的优化方法

当处理大型数据集时，可以使用更高效的方法计算占比。

function optimizedPercentageCalculation(arr) {
  const frequencyMap = new Map();
  const total = arr.length;

  for (const item of arr) {
    frequencyMap.set(item, (frequencyMap.get(item) || 0) + 1);
  }

  return Array.from(frequencyMap.entries()).map(([key, count]) => ({
    item: key,
    count,
    percentage: (count / total * 100).toFixed(2)
  }));
}

响应式占比组件实现

创建一个可复用的React组件来显示占比数据。

function PercentageDisplay({ data }) {
  const percentages = calculatePercentage(data);

  return (
    <div className="percentage-container">
      {Object.entries(percentages).map(([key, value]) => (
        <div key={key} className="percentage-item">
          <span className="item-label">{key}:</span>
          <div className="progress-bar">
            <div 
              className="progress-fill" 
              style={{ width: value }}
              aria-valuenow={parseFloat(value)}
              aria-valuemin="0"
              aria-valuemax="100"
            >
              {value}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}