未显示X轴的起点和终点标签

Question

我尝试过将X轴的格式设置为按顺序显示日期，但仍有一些点无法显示。这里有一个查看图表和编辑图表的链接- https://snack.expo.io/@anushkas/4cfb05第一个标签应该是'09-10-2020‘，它显示为'10-2020’。我使用的是react-native-svg-charts库。

import React from 'react';
import {LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import {View, Text} from 'react-native';
import {Svg, Line, Circle, G, Rect} from 'react-native-svg';

export default class CustomLineChartOne extends React.PureComponent {
  handleFill = (value) => {
    if (value > 100) {
      return 'rgba(190, 30, 45, 0.5)';
    } else if (value > 80 && value <= 100) {
      return 'yellow';
    } else {
      return '#CCE6D0';
    }
  };

  render() {
    const xAxisLabels = [
      '09-10-2020',
      '10-10-2020',
      '11-10-2020',
      '12-10-2020',
    ];
    const data = [50, 10, 40, 95];

    const Decorator = ({x, y, data}) => {
      return data.map((value, index) => (
        <View>
          <Rect
            x={x(index) - 1.75}
            y={y(value + 8)}
            width="4"
            height="40"
            rx="2"
            fill={this.handleFill(value)}
          />
          <Circle
            key={index}
            cx={x(index)}
            cy={y(value)}
            r={2}
            stroke={'#639123'}
            fill={'#606060'}
          />
        </View>
      ));
    };

    return (
      <View
        style={{
          height: 200,
          flexDirection: 'row',
        }}>
        <YAxis
          data={data}
          contentInset={{top: 20, bottom: 20}}
          svg={{
            fill: 'black',
            fontSize: 10,
          }}
        />
        <View style={{flex: 1}}>
          <LineChart
            style={{flex: 1}}
            data={data}
            svg={{stroke: 'rgb(134, 65, 244)'}}
            contentInset={{top: 10, bottom: 10, left: 10, right: 10}}>
            <Decorator />
          </LineChart>
          <XAxis
            data={data}
            formatLabel={(value, index) => xAxisLabels[index]}
            contentInset={{ left: 10, right: 10 }}
            svg={{ fontSize: 8, fill: '#3A8F98' }}
          />
        </View>
      </View>
    );
  }
} 

Answer 1

​

​

对于XAxis组件，向左和向右分别赋予contentInset值15，10看起来有点低，如果它仍然隐藏，则再增加一点：

<XAxis
            data={data}
            formatLabel={(value, index) => xAxisLabels[index]}
            contentInset={{ left:15, right: 15 }}
            svg={{ fontSize: 8, fill: '#3A8F98' }}
          />