javascript - 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' }}
          />