无法在react-native-chart-kit中向内部容器添加填充

Question

我在点上使用自定义渲染来打印点上方的缩写值，而不是使用 y 轴图例。但是，最顶部的值会被图表容器的上边界截断。我尝试向图表组件本身以及图表道具添加填充顶部。将

paddingTop

添加到图表组件道具确实会添加填充，但仅限于外部容器。在

chartConfig

属性中向 style 属性添加任何样式似乎都没有效果。

const chartConfig: ChartConfig = {
  backgroundGradientFrom: colors.purpBgGradLeft,
  backgroundGradientTo: colors.purpBgGradRight,
  color: (opacity = 1) => `rgba(${colors.chartLineRGB}, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(${colors.chartLineRGB}, ${opacity})`,
  propsForDots: {
    r: '5',
    strokeWidth: '1',
    stroke: `rgba(${colors.chartLineRGB}, 1)`,
  },
};

<View
  style={{ backgroundColor: colors.purpBgGradLeft }}
  onLayout={handleLayout}>
  <LineChart
    data={chartData}
    width={chartContainerWidth + CHART_WIDTH_OFFSET}
    height={CHART_HEIGHT}
    chartConfig={chartConfig}
    style={{ marginLeft: MARGIN_OFFSET }}
    renderDotContent={({ x, y, index, indexData }) => (
      <Svg key={index}>
        <SvgText
          x={x}
          y={y - DOT_TEXT_OFFSET}
          fill={colors.textLight}
          fontSize={DOT_TEXT_SIZE}
          textAnchor="middle">
          {formatStat(indexData, 0)}
        </SvgText>
      </Svg>
    )}
    withHorizontalLabels={false}
  />
</View>

任何帮助将不胜感激！为了您的方便，我制作了世博小吃！

https://snack.expo.dev/@devlylabs/chart-example-with-dot-labels

预先感谢您的帮助！

Answer 1

如果您愿意放弃渐变背景颜色，您可以更改为以下内容：

const chartConfig: ChartConfig = {
  backgroundGradientFrom: colors.purpBgGradLeft,
  backgroundGradientTo: colors.purpBgGradLeft,
  ...
}

内部

View

style={{ backgroundColor: colors.purpBgGradLeft}}

内部

LineChart

style={{ marginLeft: MARGIN_OFFSET, paddingTop: 30, paddingBottom: 20 }}