Блог

Я использовал библиотеку ‘react-native-chartjs’ для создания динамической диаграммы в React native. Однако, когда я запускаю это приложение локально, я вижу только компоненты фильтра, а не саму диаграмму. В react диаграмма видна по умолчанию. Я не уверен, как визуализировать в среде React native. Есть идеи?

   export default class App extends Component {
  constructor(props) {
    super(props);
    const title = "chart-filter";
    const lessThanOrGreaterThan = "lessThan";
    const filterLimit = 100;
    const levelsArr = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "June",
      "July",
      "Aug"
    ];
    const from = "0";
    const toMonth = "7";
    this.chartData = {
      dataSet1: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590)   10
      ),
      dataSet2: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590)   10
      )
    };
    this.state = {
      months: [
        { month: "Jan", value: "0" },
        { month: "Feb", value: "1" },
        { month: "Mar", value: "2" },
        { month: "Apr", value: "3" },
        { month: "May", value: "4" },
        { month: "Jun", value: "5" },
        { month: "Jul", value: "6" },
        { month: "Aug", value: "7" }
      ],
      lessThanOrGreaterThan: "lessThan"
    };
  }
  componentDidMount() {
    this.barChart = new Chart("bar", {
      type: "bar",
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Student Admission Data"
        }
      },
      data: {
        labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug"],
        datasets: [
          {
            type: "bar",
            label: "School 1",
            data: this.chartData.dataSet1,
            backgroundColor: "rgba(20,200,10,0.4)",
            borderColor: "rgba(20,200,10,0.4)",
            fill: false
          },
          {
            type: "bar",
            label: "School 2",
            data: this.chartData.dataSet2,
            backgroundColor: "rgba(100,189,200,0.4)",
            borderColor: "rgba(100,189,200,0.4)",
            fill: false
          }
        ]
      }
    });
  }
  applyFilter() {
    const value = this.state.filterLimit;
    const lessThanOrGreaterThan = this.state.lessThanOrGreaterThan;
    console.log(lessThanOrGreaterThan);
    this.barChart.data.datasets[0].data = this.chartData.dataSet1;
    this.barChart.data.datasets[1].data = this.chartData.dataSet2;

    this.barChart.data.datasets.forEach((data, i) => {
      if (lessThanOrGreaterThan === "greaterThan") {
        this.barChart.data.datasets[i].data = data.data.map((v) => {
          if (v >= value) return v;
          else return 0;
        });
      } else {
        this.barChart.data.datasets[i].data = data.data.map((v) => {
          if (v <= value) return v;
          else return 0;
        });
      }
    });
    this.barChart.update();
  }
  handlelessThanOrGreaterThan = (selectValue) => {
    this.setState({ lessThanOrGreaterThan: selectValue })
  };
  render() {
    return (
        <View style={styles.container}>
          <View style={styles.pickerContainer}>
            <Picker
              selectedValue={this.state.lessThanOrGreaterThan}
              style={{ height: 50, width: 150 }}
              onValueChange={this.handlelessThanOrGreaterThan}
            >
              <Picker.Item label ="Less Than" value="lessThan" />
              <Picker.Item label="Greater Than" value="greaterThan" />
            </Picker>
          </View>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder="Filter Limit"
              value={this.state.filterLimit}
              onChange={(value) => this.setState({ filterLimit: value })}
            />
          </View>
           <View style={styles.filterContainer}>
            <Button
              onPress={() => this.applyFilter()}
              title = "Apply Filter"
              color="#841584"
          />
          </View>
        </View>
    );
  }
}
  

Это то, что он возвращает