0

我正在一个项目中工作，该项目包含不同的选项卡，在每个选项卡中我们可以看到一个图表，该图表显示通过调用 API 获得的数据。（每个选项卡（图表）都在做一个ComponentDidMount()来获取相关数据）。

鉴于我希望能够通过生成数据的模型的 run_id( job_name ) 过滤数据，我添加了一个下拉菜单，允许选择特定的job_name，该菜单被添加到 URL 的末尾在 中ComponentDidMount()仅选择已实现作业的数据。目的是自动显示该作业的数据图表。

在这里，我们可以看到ComponentDidMount()每次我想将所有数据传递给图形函数时使用的。

componentDidMount() {
    const jobName = this.props.jobName;
    this.props.getFuelPrices(`http://localhost:8000/data/stack/fuel/${jobName}`);
  }

getFUelPrices(url)API的调用在哪里

主页面结构如下：

class Stack extends Component {
    constructor(props) {
        super(props);

        this.state = {
            tabActive: 'fuel-price',
            jobName: 'julia-stacking-model-test-f353caae-729b-4a0a-b0f7-7640b4f4f1f9',
        };
    }

    handleSubmit = event => event.preventDefault();
    handleOnChange = (e) => {
                              this.setState({
                                jobName: e.target.value,
                              })
                            };

这里handleOnChange()是我们从下拉列表中选择新工作的地方。

render () {
      if(!this.props.user || this.props.user.role < this.props.acl)
          return <AccedDenied />
      return (


          <div className="Stack">

            <BreadCrumb />

            <div className="card-box">
              <div className="test" style={{margin: "20px"}}>
                <form onSubmit={this.handleSubmit} className="form-inline">

                  <label style={{marginLeft: '20px'}}>
                    Select Job:
                    <JobNames onChange={this.handleOnChange}/>
                  </label>

                  <label style={{marginLeft: '20px'}}>
                    Compare with job:
                    <JobNames />
                  </label>

                </form>
              </div>
              <TradesTabs
                data={[
                  {
                    key: 'fuel-price',
                    label: 'Fuel Price',
                    action: () => this.setState({ tabActive: 'fuel-price'}),
                  },
                  {
                    key: 'total-stack',
                    label: 'Total Stack',
                    action: () => this.setState({ tabActive: 'total-stack' }),
                  }, ..........


            active={this.state.tabActive}
            />

            <div className="tab-content">
              {this.state.tabActive === 'fuel-price' ? <TotalFuelPrice jobName={this.state.jobName}/> : console.log("not showing fuel price graph", this.state.jobName)}
              {this.state.tabActive === 'total-stack' ? <TotalStack jobName={this.state.jobName}/> : console.log("not showing total stack graph", this.state.jobName)}
              {this.state.tabActive === 'nuclear' ? <TotalNuclear jobName={this.state.jobName}/> : console.log("not showing nuclear graph", this.state.jobName)}
              {this.state.tabActive === 'solarwind' ? <TotalSolarWind jobName={this.state.jobName}/> : console.log("not showing solarwind graph", this.state.jobName)}
              {this.state.tabActive === 'hydro' ? <TotalHydro jobName={this.state.jobName}/> : console.log("not showing solarwind graph", this.state.jobName)}
            </div>
          </div>
        </div>

所以在这里我将选定的 JobName 发送到不同的TotalComponents，它们会ComponentDidMount()调用 API 和图形生成。

尽管如此，当我这样做时，我会正确更新我的状态，但除非我刷新应用程序，否则我的图表不会显示新数据。更准确地说，从下拉菜单中选择选项时：

class JobNames extends Component {

  componentDidMount() {
    this.props.getJobNames('http://localhost:8000/data/stack/getJobs');
  }

  render() {

    let jobs = this.props.jobname;
    let optionItems = jobs.map((job) =>
            <option key={job.name}>{job.name}</option>
        );

    return (
      <div>
         <select className="form-control" style={{marginLeft: '8px'}} onChange={this.props.onChange}>
            {optionItems}
         </select>
      </div>
    );
  }
}

我的图表正在重新渲染，因为线条颜色由于用于选择颜色的 Math.random 函数而发生变化，但图表的数据不会自动更新。

我知道这不是最好的解释，但我试图尽可能清楚。不要犹豫，询问更多细节或提问。

我怎么解决这个问题？目的是从下拉菜单中选择一个选项并自动显示新图表。

图形组件是：

class FuelPriceGraph extends Component {

  render(){
    {
    const COLORS = ['   #ff0000','#ffff00','#00ffff','#ff00ff','#00ff00','#cc33ff','#f81e46','#3ea6e3','#f31ac9','#a6fbc7','#01d128', '#3dfc92','#4965e0', '#ef6a0c','#f81108','#f3f609', '#6e23fb', '#cf22c2', '#5aeef7', '#a1fd20','#9babe3', '#fa6c45','#e74885','#dc0508'];
    let json = this.props.data;
    console.log("the data for is" ,json);

    return (
      <div className="FuelPriceGraph">
        <ResponsiveContainer width="100%" aspect={5 / 1}>
          <LineChart width={800} height={350}>
            <CartesianGrid strokeDasharray="3 3"/>
            <XAxis dataKey="date" type="category" allowDuplicatedCategory={false} />
            <YAxis dataKey="price"/>
            <Tooltip/>
            <Legend />
            {json.map(s => {
                let color = COLORS[Math.floor(Math.random() * COLORS.length)];
                let type = (s.scenario === "mean-scenario") ? "5 5" : "" ;
                return <Line dataKey="price" data={s.data} name={s.scenario} key={s.scenario} stroke={color} strokeDasharray={type}/>
                }
            )}

          </LineChart>
        </ResponsiveContainer>
      </div>

谢谢，

4

0 回答 0