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

Question

我正在尝试使用 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
  }
});

Answer 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 中可见!

希望对您有所帮助! :)