React Native Android柱状图设置顶部圆角及数值间距方法

一、实现柱状图顶部圆角 #

你当前使用的barRadius会给柱状图四个角都添加圆角，要只保留顶部圆角，需要通过自定义柱状图形状来实现：

1. 先移除chartConfig中的barRadius配置，然后在BarChart组件中添加renderBarContent属性，用react-native-svg的Path组件绘制仅顶部圆角的柱状图：

import { Path } from 'react-native-svg';

// 在BarChart中添加该属性
renderBarContent={({ x, y, width, height }) => {
  const radius = 5; // 调整此值控制顶部圆角大小
  return (
    <Path
      d={`
        M ${x} ${y + radius}
        L ${x} ${y + height}
        L ${x + width} ${y + height}
        L ${x + width} ${y + radius}
        Q ${x + width} ${y} ${x + width - radius} ${y}
        L ${x + radius} ${y}
        Q ${x} ${y} ${x} ${y + radius}
      `}
      fill={colors.red['500']}
    />
  );
}}

二、调整顶部数值与柱状图的间距 #

针对showValuesOnTopOfBars显示的数值，通过两种方式调整间距：

• 方式一：自定义数值标签样式
  添加labelStyle属性，设置marginTop来拉开数值与柱子的距离：

<BarChart
  // ...其他属性
  showValuesOnTopOfBars={true}
  labelStyle={{ 
    marginTop: -8, // 负数表示向上偏移，增大与柱子的间距
    fontSize: 12,
    color: '#333'
  }}
/>

• 方式二：增大顶部内边距
  如果数值出现被截断的情况，调整contentInset.top的值，给顶部数值预留更多空间：

contentInset={{
  top: 35, // 从原25增大到35，根据实际情况调整
  bottom: 34,
  left: 5,
  right: 5,
}}

完整修改后代码示例 #

import { Path } from 'react-native-svg';
import { BarChart } from 'react-native-chart-kit';
import shape from 'react-native-svg-shapes';

// ...其他业务代码

const chartConfig = {
  barPercentage: 1,
};

<BarChart
  style={{ height: 200 }}
  animate={true}
  animationDuration={500}
  yMin={min}
  yMax={max}
  data={croreValuesPositive}
  yAccessor={({ item }) => item?.value}
  chartConfig={chartConfig}
  spacingInner={0.7}
  yAxisLabel=""
  curve={shape.curveMonotoneY}
  verticalLabelRotation={0}
  showValuesOnTopOfBars={true}
  labelStyle={{
    marginTop: -8,
    fontSize: 12,
    color: '#000'
  }}
  withHorizontalLabels={false}
  withInnerLines={false}
  fromZero={true}
  withVerticalLabels={20}
  contentInset={{
    top: 35,
    bottom: 34,
    left: 5,
    right: 5,
  }}
  renderBarContent={({ x, y, width, height }) => {
    const radius = 5;
    return (
      <Path
        d={`
          M ${x} ${y + radius}
          L ${x} ${y + height}
          L ${x + width} ${y + height}
          L ${x + width} ${y + radius}
          Q ${x + width} ${y} ${x + width - radius} ${y}
          L ${x + radius} ${y}
          Q ${x} ${y} ${x} ${y + radius}
        `}
        fill={colors.red['500']}
      />
    );
  }}
>
  {/* <Grid /> */}
  <Labels labelData={croreValues} />
</BarChart>

内容的提问来源于stack exchange，提问作者ajay gol