使用React中的select标签并使用状态在使用React Charts的数据集之间切换

问题描述：

我正在使用React Charts。我有一个折线图，我希望能够在两组数据之间切换。使用标签我做了一个下拉菜单。看看一个活生生的例子：使用React中的select标签并使用状态在使用React Charts的数据集之间切换

转到下拉菜单，然后切换到“收入”。注意它根据需要切换到另一组数据。但现在尝试切换回“花费”。注意它不起作用。这是为什么？有人可以看看我的逻辑，让我知道我做错了什么吗？谢谢。

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { Line } from 'react-chartjs-2'; 

let lineData; 

const lineDataSpend = { 
    labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'], 
    datasets: [ 
    { 
     label: 'Spend - Account 1', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'green', 
     borderColor: 'green', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'green', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, 
    { 
     label: 'Spend - Account 2', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'blue', 
     borderColor: 'blue', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'blue', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [25, 5, 8, 53, 96, 35, 20] 
    } 
    ] 
}; 

const lineDataRev = { 
    labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'], 
    datasets: [ 
    { 
     label: 'Revenue - Account 1', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'red', 
     borderColor: 'red', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'red', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [27, 9, 37, 31, 102, 42, 19] 
    }, 
    { 
     label: 'Revenue - Account 2', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'yellow', 
     borderColor: 'yellow', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'yellow', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [1, 29, 4, 112, 26, 49, 81] 
    } 
    ] 
}; 

lineData = lineDataSpend; //init the graph data to 'Spend' 

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.changeMetric = this.changeMetric.bind(this); 

    this.state = { 
     selectedMetric: 'Spend' 
    }; 
    } 

    changeMetric(event) { 

    this.setState({ 
     selectedMetric: event.target.value 
    }); 

    switch (event.target.value) { 
     case 'Spend': 
     lineData = lineDataSpend; 
     break; 
     case 'Revenue': 
     lineData = lineDataRev; 
     break; 
     default: 
    } 
    } 

    render() { 
    const lineOptions = { 
     title: { 
     display: true, 
     text: 'Account 1 vs Account 2' 
     }, 
     tooltips: { 
     enabled: true, 
     callbacks: { 
      label: function (value, data) { 
      console.log('data', data) 
      const currentLabel = data.datasets[value.datasetIndex].label; 
      return currentLabel + ': ' + '$' + value.yLabel; 
      } 
     } 
     }, 
     legend: { 
     display: true 
     }, 
     maintainAspectRatio: true, 
     scales: { 
     yAxes: [{ 
      ticks: { 
      callback: function (value) { 
       return '$' + parseFloat(value.toFixed(2)); 
      } 
      }, 
      stacked: false, 
      gridLines: { 
      display: true, 
      color: "rgba(255,99,132,0.2)" 
      } 
     }], 
     xAxes: [{ 
      gridLines: { 
      display: false 
      } 
     }] 
     } 

    }; 

    return (
     <div> 


     <select onChange={this.changeMetric} value={this.state.selectedMetric}> 
      <option value="Spend">Spend</option> 
      <option value="Revenue">Revenue</option> 
     </select> 

     <div className="row"> 
      <div className="col-xl-10"> 
      <div className="card"> 
       <div className="card-header"> 
       <i className="fa fa-align-justify" /> 
       </div> 
       <div className="card-block"> 
       <Line data={lineData} options={lineOptions} /> 
       </div> 
      </div> 
      </div> 
     </div> 

     </div> 

    ) 

    } 
} 


render(<App />, document.body);

答

您的lineData初始化为lineDataSpend导致问题。如果您直接将一个默认对象分配给lineData，而不是将其保存为lineDataSpend的对象，则问题将得到解决。

所以，如果你改变线路103，

lineData = lineDataSpend; //init the graph data to 'Spend'

到

lineData = { 
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'], 
    datasets: [ 
    { 
     label: 'Spend - Account 1', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'green', 
     borderColor: 'green', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'green', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, 
    { 
     label: 'Spend - Account 2', 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: 'blue', 
     borderColor: 'blue', 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: 'rgba(75,192,192,1)', 
     pointBackgroundColor: '#fff', 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: 'blue', 
     pointHoverBorderColor: 'rgba(220,220,220,1)', 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: [25, 5, 8, 53, 96, 35, 20] 
    } 
    ] 
}

您的问题将得到解决。你可以在这里测试修复 - https://codesandbox.io/s/3rko469pkm

但即使我不清楚为什么你的初始任务导致问题，因为分配看起来非常好。将不得不深入了解此问题背后的原因。

使用React中的select标签并使用状态在使用React Charts的数据集之间切换

相关推荐