react-native-chart-kit饼图：如何换行图例或移至饼图下方？

一、将图例移到饼图正下方 #

直接给PieChart组件添加legendPosition="bottom"属性即可，这是组件内置配置，能快速把图例从右侧切换到饼图底部：

import { PieChart } from 'react-native-chart-kit';

const chartData = [
  { name: '组一数据', population: 40, color: '#2ecc71', legendFontColor: '#333' },
  { name: '组二数据', population: 60, color: '#3498db', legendFontColor: '#333' }
];

// 渲染逻辑
{chartData.length > 0 && (
  <PieChart
    data={chartData}
    width={300}
    height={220}
    chartConfig={{ color: (opacity) => `rgba(0,0,0,${opacity})` }}
    accessor="population"
    backgroundColor="transparent"
    paddingLeft="15"
    legendPosition="bottom" // 设置图例位置为底部
  />
)}

二、实现图例文本换行显示 #

默认图例组件不识别\n换行，需要通过customizeLegend属性自定义图例项，手动控制文本渲染：

{chartData.length > 0 && (
  <PieChart
    data={chartData}
    width={300}
    height={220}
    chartConfig={{ color: (opacity) => `rgba(0,0,0,${opacity})` }}
    accessor="population"
    backgroundColor="transparent"
    paddingLeft="15"
    customizeLegend={(legends) => (
      <View style={{ flexDirection: 'column', marginLeft: 20 }}>
        {legends.map((item, idx) => (
          <View key={idx} style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 4 }}>
            {/* 图例颜色块 */}
            <View
              style={{
                width: 14,
                height: 14,
                borderRadius: 7,
                backgroundColor: item.color,
                marginRight: 8,
              }}
            />
            {/* 支持换行的文本 */}
            <Text style={{ color: item.legendFontColor, fontSize: 12 }}>
              {item.name} {/* 这里的name可直接包含\n，比如"第一组\n数据" */}
            </Text>
          </View>
        ))}
      </View>
    )}
  />
)}

自定义图例时，你可以完全控制文本的换行逻辑，比如拆分长文本，或者直接在data的name字段中写入\n，Text组件会自动识别换行。

补充：无数据时隐藏饼图 #

渲染前判断数据长度，为空则不渲染组件即可，如上述代码中的{chartData.length > 0 && (...)。

内容的提问来源于stack exchange，提问作者Monte Chan