反应本地-SVG-charts x日期轴所有标签在同一位置

Question

我尝试了图表的不同设置，但无法正确显示X轴日期的标签。所有标签都显示在同一位置，即使日期有不同，图表也很好地显示：

这是我的代码：

import { View } from 'react-native';
import {
  Grid,
  AreaChart,
  XAxis,
  YAxis,
  AxisProps,
} from 'react-native-svg-charts';
import { subYears, format } from 'date-fns';
import * as scale from 'd3-scale';
import { useTheme } from 'styled-components/native';

const PerformanceChart = () => {
  const theme = useTheme();

  const data = [
    { at: subYears(new Date(), 8), value: 85, open: 10, close: 20 },
    { at: subYears(new Date(), 7), value: 91, open: 10, close: 20 },
    { at: subYears(new Date(), 6), value: 35, open: 10, close: 20 },
    { at: subYears(new Date(), 5), value: 53, open: 10, close: 20 },
    { at: subYears(new Date(), 4), value: 53, open: 10, close: 20 },
    { at: subYears(new Date(), 3), value: 24, open: 10, close: 20 },
    { at: subYears(new Date(), 2), value: 50, open: 10, close: 20 },
    { at: subYears(new Date(), 1), value: 20, open: 10, close: 20 },
    { at: new Date(), value: 80, open: 10, close: 20 },
  ];

  const axesSvg: AxisProps<{
    at: Date;
    value: number;
    open: number;
    close: number;
  }>['svg'] = {
    fontSize: 11,
    fontWeight: '100',
    stroke: theme.colors.neutral[300],
  };
  const verticalContentInset = { top: 10, bottom: 20 };
  const xAxisHeight = 30;

  return (
    <View style={{ flex: 3, padding: 20, flexDirection: 'row' }}>
      <View style={{ flex: 1, marginRight: 10 }}>
        <AreaChart
          style={{ flex: 1 }}
          data={data}
          xAccessor={({ item }) => item.at.getTime()}
          yAccessor={({ item }) => item.value}
          xScale={scale.scaleTime}
          contentInset={verticalContentInset}
          svg={{ stroke: 'rgb(51, 160, 255)', fill: 'rgba(51, 160, 255, 0.2)' }}
        >
          <Grid svg={{ stroke: theme.colors.neutral[500] }} />
        </AreaChart>
        <XAxis
          data={data}
          xAccessor={({ item }) => item.at}
          style={{ height: xAxisHeight, marginTop: 11 }}
          formatLabel={(value) => format(value as Date, 'yyyy')}
          contentInset={{ left: 10, right: 10 }}
          svg={{ ...axesSvg, translateX: 15 }}
        />
      </View>
      <YAxis
        data={data}
        yAccessor={({ item }) => item.value}
        style={{ marginBottom: xAxisHeight }}
        contentInset={verticalContentInset}
        svg={{ ...axesSvg, translateX: 8 }}
      />
    </View>
  );
};

export default PerformanceChart;

这是我的最后尝试（设置xaccessor> AREACHART使用GetTime，它也没有工作。那对我工作。

Answer 1

对于任何类似“怪异”问题的人，我都发现了我的问题。我尚未安装react-native-svg库，这就是为什么我遇到奇怪的问题，尽管在React Native调试器上根本没有错误。