gpt4 book ai didi

javascript - X 轴开始和结束标签未显示

转载 作者:行者123 更新时间:2023-12-05 06:54:55 25 4
gpt4 key购买 nike

我已经尝试格式化 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>
);
}
}

最佳答案

enter image description here

XAxis组件,给contentInset左右赋值15,10好像有点低,如果还是隐藏再增加一点:

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

关于javascript - X 轴开始和结束标签未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65435936/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com