基于动态值的ReactJS矩形条形图定位问题求助

需求说明 #

• 基于React开发矩形条形图，左右两侧数值总和为100%
• 分为3个可动态调整的区块
• 中间区域需根据数值呈现对应形状

问题定位 #

首次迭代中左右数值对比逻辑正常，但第二、第三个区块的元素及边框三角形定位存在偏移，核心原因是每个区块的定位逻辑未统一，三角形的位置计算未关联区块的实际宽度和起始位置。

修复要点及代码示例 #

1. 统一区块位置计算逻辑 #

通过函数批量计算每个区块的宽度、起始位置，避免重复代码和计算错误：

const calculateBlockPositions = () => {
  const total = blocks.reduce((sum, block) => sum + block.value, 0);
  return blocks.map((block, index) => {
    const width = (block.value / total) * 100;
    const start = index === 0 ? 0 : blocks.slice(0, index).reduce((sum, b) => sum + (b.value / total) * 100, 0);
    return { ...block, width, start };
  });
};

2. 修复边框三角形定位 #

根据区块的左右属性，结合计算出的起始/宽度值，用绝对定位固定三角形位置：

// 左侧区块三角形
<div 
  style={{
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    width: 0,
    height: 0,
    borderTop: '20px solid transparent',
    borderBottom: '20px solid transparent',
    borderLeft: '10px solid #ecf0f1'
  }}
/>

// 右侧区块三角形
<div 
  style={{
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: 0,
    height: 0,
    borderTop: '20px solid transparent',
    borderBottom: '20px solid transparent',
    borderRight: '10px solid #ecf0f1'
  }}
/>

3. 完整修复后组件代码 #

import React, { useState } from 'react';

const BarChart = () => {
  const [blocks, setBlocks] = useState([
    { value: 30, side: 'left', color: '#2ecc71' },
    { value: 40, side: 'right', color: '#3498db' },
    { value: 30, side: 'left', color: '#e74c3c' }
  ]);

  const calculateBlockPositions = () => {
    const total = blocks.reduce((sum, block) => sum + block.value, 0);
    return blocks.map((block, index) => {
      const width = (block.value / total) * 100;
      const start = index === 0 ? 0 : blocks.slice(0, index).reduce((sum, b) => sum + (b.value / total) * 100, 0);
      return { ...block, width, start };
    });
  };

  const positionedBlocks = calculateBlockPositions();

  return (
    <div className="bar-chart-container" style={{ width: '100%', height: '40px', position: 'relative', backgroundColor: '#ecf0f1' }}>
      {positionedBlocks.map((block, index) => (
        <div 
          key={index}
          style={{ 
            position: 'absolute',
            top: 0,
            bottom: 0,
            width: `${block.width}%`,
            left: `${block.start}%`,
            backgroundColor: block.color,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#fff',
            fontWeight: 'bold'
          }}
        >
          {block.side === 'left' && (
            <div 
              style={{
                position: 'absolute',
                right: 0,
                top: 0,
                bottom: 0,
                width: 0,
                height: 0,
                borderTop: '20px solid transparent',
                borderBottom: '20px solid transparent',
                borderLeft: '10px solid #ecf0f1'
              }}
            />
          )}
          {block.side === 'right' && (
            <div 
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                bottom: 0,
                width: 0,
                height: 0,
                borderTop: '20px solid transparent',
                borderBottom: '20px solid transparent',
                borderRight: '10px solid #ecf0f1'
              }}
            />
          )}
          {block.value}%
        </div>
      ))}
    </div>
  );
};

export default BarChart;

内容的提问来源于stack exchange，提问作者Mohammad Faraz