react-native-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;

这是我最后一次尝试（使用 getTime 函数设置 AreaChart 的 xAccessor。没有这个，它也不起作用。有什么想法吗？试过查看其他类似问题，但找不到适合我的解决方案。

Answer 1

对于任何遇到类似“奇怪”问题的人，我发现了我的问题所在。我还没有安装 react-native-svg 库，这就是我遇到奇怪问题的原因，尽管在 React Native Debugger 上完全没有错误。

react-native-svg-charts x 日期轴所有标签都在同一位置

react-native-svg-charts x date axis all labels are on the same position

svg

react-native

react-native-svg-charts