gpt4 book ai didi

android - react-native-chart-android 未显示图表

转载 作者:行者123 更新时间:2023-11-30 01:31:45 25 4
gpt4 key购买 nike

我正在尝试使用 react-native-chart-android用于在我的 Android 应用程序中包含图表的库。

我成功安装了模块并按原样完成了提供的示例。一切顺利,没有错误,但图形无法以某种方式呈现。

我正在 ScrollView 中试用 LineChart(它本身位于单独的 View 中)以及 ToolbarAndroid 和 RN 0.20 上同一级别的另一个 View 。如果我遗漏了什么,请告诉我。

提前致谢..:)

PS:引用代码 fragment (为了更好的可视化,删除了代码的琐碎部分)

import {
LineChart
} from 'react-native-chart-android';

class Dashboard extends Component {
render() {
return (
<ScrollView style={styles.scrollView}>
<ToolbarAndroid ... />
<View style={styles.container}>
...
</View>
<View style={styles.chartContainer}>
<LineChart style={{flex:1}} data={this.getLineData()}/>
<LineChart
style={{flex:1}}
data={this.getRandomData()}
visibleXRange={[0,30]}
maxVisibleValueCount={50}
xAxis={{drawGridLines:false,gridLineWidth:1,position:"BOTTOM"}}
yAxisRight={{enable:false}}
yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART"}}
drawGridBackground={false}
backgroundColor={"BLACK"}
description={"description"}
legend={{enable:true,position:'ABOVE_CHART_LEFT',direction:"LEFT_TO_RIGHT"}} />
</View>
<Text style={styles.description}>{this.state.message}</Text>
</ScrollView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF'
},
scrollView: {
flex: 1
},
chartContainer: {
flex: 1
}
});

最佳答案

我有同样的问题,我的结论是 ScrollView 只呈现具有高度和宽度的 child 。尽管您在图表周围设置了 flex:1,但我认为它们比 ScrollView 大,这就是它们在 ScrollView 内部不可见的原因。我已经为我的图表设置了高度和宽度,并给了它们最小和最大 Y -> 如果你设置标志 startAtZero:false 你应该设置 axisMinValue 和 axisMaxValue。例如:yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART", axisMinValue: 20, axisMaxValue: 500}}

对于图表,尝试设置自定义宽度和高度:

  chartContainer: {
flex: 1,
height: 500, //any value you want
width: 500 //any value you want
}

我已使用尺寸设置设备高度的一半和全宽:

import { Dimensions } from 'react-native';
var {height, width} = Dimensions.get('window');

chartContainer: {
flex: 1,
height: height/2,
width: width
}

然后我的图表在 ScrollView 中可见!

希望对您有所帮助! :)

关于android - react-native-chart-android 未显示图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35656375/

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