React js радио-кнопки изменить график - PullRequest
Новая
       11

React js радио-кнопки изменить график

0 голосов
/ 10 апреля 2020

У меня есть два разных компонента: переключатели и график, переключатели отображаются динамически в зависимости от обновления. Например, если на входе 5 разных областей, будут отображаться 5 радиокнопок.
При нажатии радиокнопки Я хочу, чтобы она отображала соответствующую строку на графике .
Ниже входные данные, которые есть в каждом регионе, имеют norm_time__series, который используется для построения линии. 

[
  {
    "short_name": "Demo",
    "roi_number": 0,
    "finding": "null",
    "dt": 0.1,
    "norm_times_series": [
      [80.0, 68.16335617854995, 91.83664382145005],
      [80.0, 67.66379980989896, 92.33620019010104],
      [83.0, 72.78200156354234, 93.21799843645766],
      [83.0, 71.22165069319166, 94.77834930680834],
      [81.0, 67.74249757065954, 94.25750242934046],

Может быть несколько разных записей (roi_number)

Как это можно сделать, я понимаю реквизиты должны быть переданы компоненту графика.
Радиокнопка: 

  return (
    <div className = "container"

      > 
    <div>
    <div className='custom-control custom-switch' >
    <input type='checkbox' className='custom-control-input' id='customSwitches' />
    <label  className='custom-control-label' htmlFor='customSwitches'>
      <p className="font-weight-bold">   Multiple Region's </p>
    </label> 
    </div>
      <div>
      <MDBBtn color="blue-grey" variant="link"  onClick={() => setCurrentFrame(0)}>
        reset
      </MDBBtn>
      </div>
      {currentFrame >= frames.length
        ? null
        : frames[currentFrame].map((roi, index) => (

            <div key={roi}>

              <label className ="label">

              <p classnName = "font-weight-bold">{`roi${index}`}</p>
                <MDBFormInline>
                <input className ="region" id = "radio_btn" type="radio" />
              </MDBFormInline>  
              </label>

            </div>  

          ))}
    </div>
    </div>
  );
};

График: 

  render(){
    return(
      <Chart
        width='100%'
        height='400px'
        chartType='LineChart'
        data={ this.state.data }
        options={{ 
          hAxis: { title: 'Frame' }, 
          vAxis: { title: 'Intensity' },
          legend: { position: 'bottom' }
        }}
      />
    )
  }

Спасибо за любую помощь!

...