Javascript 不确定如何使此代码与本机兼容

我在react-UsingReact-chartjs中写下了一个条形图和过滤器。我想在react native中实现相同的图表功能。目前，我很难理解库的react本机版本-react本机chartjs。下面是我在react中写下的代码-

import React, { Component } from "react";
import "./styles.css";
import { Chart } from "chart.js";
import moment from "moment";

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 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" }
    ];
    const from = "0";
    const toMonth = "7";
    this.barChart = null;
    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" }
      ],
      levelsArr: ["Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug"]
    };
  }
  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() {
    //console.log(this.chartData.dataSet1);
    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;
        });
        // console.log(">>>>>>>>", this.barChart.data.datasets[i].data);
      } else {
        this.barChart.data.datasets[i].data = data.data.map((v) => {
          if (v <= value) return v;
          else return 0;
        });
        //console.log("?????????", this.barChart.data.datasets[i].data);
      }
    });
    this.barChart.update();
  }

  applyDateFilter() {
    this.barChart.data.labels = this.levelsArr.slice(
      parseInt(this.state.from),
      parseInt(this.state.toMonth) + 1
    );
    this.barChart.update();
  }
  render() {
    return (
      <div class="chart-diplay">
        <div>
          <canvas id="bar"></canvas>
          <select
            id="lessThanOrGreaterThan"
            value={this.state.lessThanOrGreaterThan}
            onChange={(e) =>
              this.setState({ lessThanOrGreaterThan: e.currentTarget.value })
            }
          >
            <option value="lessThan">Less Than</option>
            <option value="greaterThan">Greater Than</option>
          </select>
          &nbsp;&nbsp;
          <input
            id="filterLimit"
            placeholder="Filter Limit"
            value={this.state.filterLimit}
            onChange={(e) => this.setState({ filterLimit: e.target.value })}
          ></input>
          <button class="button" onClick={() => this.applyFilter()}>
            Apply Filter
          </button>
          <div>
            <select
              id="from"
              value={this.state.from}
              onChange={(e) => this.setState({ from: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
            &nbsp;&nbsp;
            <select
              id="toMonth"
              value={this.state.toMonth}
              onChange={(e) => this.setState({ toMonth: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
          </div>
          <button class="button" onClick={this.applyDateFilter}>
            Apply Date Filter
          </button>
        </div>
      </div>
    );
  }
} 

import React，{Component}来自“React”；
导入“/styles.css”；
从“Chart.js”导入{Chart}；
从“时刻”中导入时刻；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
const title=“图表过滤器”；
const lessThanOrGreaterThan=“lessThan”；
常量过滤器限制=100；
常数levelsArr=[
“简”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”
];
常数月=[
{月份：“一月”，值：“0”}，
{月份：“二月”，值：“1”}，
{月份：“三月”，值：“2”}，
{月份：“Apr”，值：“3”}，
{月份：“五月”，值：“4”}，
{月份：“Jun”，值：“5”}，
{月份：“七月”，值：“6”}，
{月份：“8月”，值：“7”}
];
常量from=“0”；
const toMonth=“7”；
this.barChart=null；
此.chartData={
dataSet1:Array.from(
{长度：8}，
（）=>Math.floor（Math.random（）*590）+10
),
dataSet2:Array.from(
{长度：8}，
（）=>Math.floor（Math.random（）*590）+10
)
};
此.state={
月份：[
{月份：“一月”，值：“0”}，
{月份：“二月”，值：“1”}，
{月份：“三月”，值：“2”}，
{月份：“Apr”，值：“3”}，
{月份：“五月”，值：“4”}，
{月份：“Jun”，值：“5”}，
{月份：“七月”，值：“6”}，
{月份：“8月”，值：“7”}
],
级别R:[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”]
};
}
componentDidMount（）{
this.barChart=新图表（“条形图”{
输入：“酒吧”，
选项：{
回答：是的，
标题：{
显示：对，
正文：“学生入学数据”
}
},
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”]，
数据集：[
{
输入：“酒吧”，
标签：“学校1”，
数据：this.chartData.dataSet1，
背景色：“rgba（20200,10,0.4）”，
边框颜色：“rgba（20200,10,0.4）”，
填充：假
},
{
输入：“酒吧”，
标签：“学校2”，
数据：this.chartData.dataSet2，
背景颜色：“rgba（100189200,0.4）”，
边框颜色：“rgba（100189200,0.4）”，
填充：假
}
]
}
});
}
applyFilter（）{
//log（this.chartData.dataSet1）；
常量值=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（（数据，i）=>{
如果（小于或大于）{
this.barChart.data.datasets[i].data=data.data.map（（v）=>{
如果（v>=值）返回v；
否则返回0；
});
//console.log（“>>>>”，this.barChart.data.datasets[i].data）；
}否则{
this.barChart.data.datasets[i].data=data.data.map（（v）=>{
如果（v）
少于
大于
this.setState（{filterLimit:e.target.value}）
>
this.applyFilter（）}>
应用过滤器
this.setState（{from:e.target.value}）
>
{this.state.months.map（（el）=>(
{" "}
{el.month}{”“}
))}
this.setState（{toMonth:e.target.value}）
>
{this.state.months.map（（el）=>(
{" "}
{el.month}{”“}
))}
应用日期过滤器
);
}
} 

下面是我在react native中尝试的内容。代码当前未返回图表，它仅返回筛选器。返回以下错误：“chartConfiguration变量是必需的，未定义。”

import React, { Component } from "react";
import Chart from "react-native-chartjs";
import {View, Button, TextInput, StyleSheet, Picker, Platform, Text } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.levelsArr = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "June",
      "July",
      "Aug"
    ];
    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" }
      ],
      from: "0",
      toMonth: "7",
      filterLimit: 100,
      chartConfiguration: this.chartConfiguration
    };
  }
  componentDidMount() {
    this.chartConfiguration = 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() {
    //console.log(this.chartData.dataSet1);
    const value = this.state.filterLimit;
    const lessThanOrGreaterThan = this.state.lessThanOrGreaterThan;
    console.log(lessThanOrGreaterThan);
    this.chartConfiguration.data.datasets[0].data = this.chartData.dataSet1;
    this.chartConfiguration.data.datasets[1].data = this.chartData.dataSet2;

    this.chartConfiguration.data.datasets.forEach((data, i) => {
      if (lessThanOrGreaterThan === "greaterThan") {
        this.chartConfiguration.data.datasets[i].data = data.data.map((v) => {
          if (v >= value) return v;
          else return 0;
        });
        // console.log(">>>>>>>>", this.barChart.data.datasets[i].data);
      } else {
        this.chartConfiguration.data.datasets[i].data = data.data.map((v) => {
          if (v <= value) return v;
          else return 0;
        });
        //console.log("?????????", this.barChart.data.datasets[i].data);
      }
    });
    this.chartConfiguration.update();
  }
  applyDateFilter() {
    this.chartConfiguration.data.labels = this.levelsArr.slice(
      parseInt(this.state.from),
      parseInt(this.state.toMonth) + 1
    );
    this.chartConfiguration.update();
  }
  render() {
    return (
      <View style={styles.container}>
          <View style = {{ flex : 1 }}>
            <Chart chartConfiguration = {
              this.chartConfiguration
            }
            defaultFontSize={20}/>
          </View>
          <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.filterContainer}>
            <Button
              onPress={() => this.applyFilter()}
              title = "Apply Filter"
              color="#841584"
          />
          </View>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              placeholder="Filter Limit"
              value={this.state.filterLimit.toString()}
              onChange={(value) => this.setState({ filterLimit: value })}
            />
          </View>
        </View>
    );
  }
} 

import React，{Component}来自“React”；
从“react native chartjs”导入图表；
从“react native”导入{视图、按钮、文本输入、样式表、选择器、平台、文本}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.levelsArr=[
“简”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”
];
此.chartData={
dataSet1:Array.from(
{长度：8}，
（）=>Math.floor（Math.random（）*590）+10
),
dataSet2:Array.from(
{长度：8}，
（）=>Math.floor（Math.random（）*590）+10
)
};
此.state={
月份：[
{月份：“一月”，值：“0”}，
{月份：“二月”，值：“1”}，
{月份：“三月”，值：“2”}，
{月份：“Apr”，值：“3”}，
{月份：“五月”，值：“4”}，
{月份：“Jun”，值：“5”}，
{月份：“七月”，值：“6”}，
{月份：“8月”，值：“7”}
],
从：“0”，
明天：“7”，
过滤器限制：100，
chartConfiguration:this.chartConfiguration
};
}
componentDidMount（）{
this.chartConfiguration=新图表（“条形图”{
输入：“酒吧”，
选项：{
回答：是的，
标题：{
显示：对，
正文：“学生入学数据”
}
},
数据：{
标签：[“一月”、“二月”、“三月”