Блог

Мне нужно создать единую гистограмму с накоплением, получая данные из API, но я нахожу некоторые проблемы.

1- С одной стороны, данные, которые я получаю, не округляются, даже если я использую%.

2- С другой стороны, общее количество, которое я получаю, не всегда равно 100%, тогда полоса иногда на несколько пикселей короче, а иногда на несколько пикселей длиннее, чем ожидалось.

 import styled from 'styled-components'
import { Data } from '../../Types'

const Colors: Record<string, string> = {
    warning: 'yellow',
    good: 'green',
    danger: 'red',
}

const StackedBar = (props: {
    title?: string
    Data: Data | null
}) => {

    return (
        <div>
            <div
                style={{
                    display: 'flex',
                    flex: '1 1 auto',
                    alignSelf: 'auto',
                }}
            >
                {props amp;amp; props.Data ? (
                    props.Data.items.map((item) => {
                        const percentage =
                            (item.count / items_total) * 100
                        return (
                            <Rectangle
                                percentage={percentage}
                                color={
                                    itemColors[item.items_total]
                                }
                            />
                        )
                    })
                ) : (
                    <Rectangle percentage={100} color="grey" />
                )}
            </div>
        </div>
    )
}

export default StackedBar

const Rectangle = styled.div<{ percentage: number; color: string }>`
    height: 20px;
    width: ${(props) => props.percentage}%;
    background-color: ${(props) => props.color};
`

const NormalBold = styled.p`
    font-weight: 700;
    font-size: var(--font-size-normal);
`
 

процент =(item.count / items_total) * 100, здесь items_ total не определен, проверьте код еще раз. Я думаю, что это должно быть item.items_total. для округления используйте Math.round(в процентах), чтобы округлить значения. Я думаю, это должно решить ваши проблемы.