Question

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

我成功安装了模块并按原样完成了提供的示例。一切都没有错误，但图表不会以某种方式呈现。

我正在尝试ScrollView中的LineChart（它本身在一个单独的视图中）以及ToolbarAndroid和RN 0.20上同一级别的另一个View。如果我错过了什么，请告诉我。

提前致谢.. :)）

PS：代码片段供参考（删除代码的简单部分以获得更好的可视化）

＆＃13;

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
  }
});

＆＃13;

Answer 1

我有同样的问题，我的结论是ScrollView只渲染高度和宽度的孩子。虽然您在图表周围设置了flex：1，但我认为它们比ScrollView大，这就是为什么它们在ScrollView中不可见的原因。我已经为我的图表设置了高度和宽度，并给了它们最小和最大Y - ＆gt;如果设置标志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内部可见！

希望它有所帮助！：）

图表没有与react-native-chart-android一起显示

1 个答案: