Как отобразить отдельный график, используя запрос множественных осей с React? - PullRequest
Новая
       9

Как отобразить отдельный график, используя запрос множественных осей с React?

0 голосов
/ 08 июня 2018

Я пытался использовать запрос множественных осей для отображения графических данных для каждой отдельной темы, но результат был достигнут, если все графические отображения такие же, как показано на скриншоте ниже, они отображаются только для последних данных, воткодирование: 

componentDidMount() {
axios.get(`http://192.168.10.124:3000/api/messages/gettopic`) 
  .then(res => {
    const graphDataName = res.data.map(topics=>{
      axios.get('http://192.168.10.124:3000/api/messages?filter[where][topic]=' + topics + "&filter[order]=timestamp%20DESC")
      .then(res => {
        const graphData = res.data;
        this.setState({graphData});
      })
    });
  })
}

render() {
const { getDeviceListPending, getDeviceListError } = this.props.dashboard;
//const { getDevicePending, getDeviceError } = this.props.dashboard;
//const temperatureData = this.getTempData();
console.log(this.state.graphData);
//console.log(this.state.topics);
return (
  <div className="chart">
    <div className="column">
      <div className="panel">
        {
          this.props.dashboard.listData.map(item=>
            <div className="columns is-multiline">
              <div className="column is-12">
                <div className="panel">
                  <div className="panel-block">
                    <li key={item}>
                      <a key={item} onClick={memobind(this, 'handleRowClick', item)}>
                        {item}
                          <GetChart graphData={this.state.graphData}/>
                      </a>
                    </li>
                  </div>
                </div>
              </div>
            </div>  
          )
        }
      </div>
    </div>
  </div>

the graph display

В результате "this.state.graphData" были показаны данные для каждой отдельной темы здесь, ноотображение графика все одинаковы, я хочу отображать данные каждого графика для графика каждого устройства, могу ли я знать, как с ним работать?Спасибо.Диаграмма использует Диаграмму Победы и использует Реакт.

this.state.graphData results

1 Ответ

0 голосов
/ 08 июня 2018

Это потому, что вы используете одно и то же состояние для всех графиков.

Вот как будет выглядеть дерево состояний и обновления для текущего сценария:

  1. Вы вызываете API верхнего уровня и получаете ответ, затем вы отображаете карту и вызываете данные графика.graphData: {}

  2. Вы вернули данные первого графика и вызвали setState.graphData: {<graph object for 1st iteration>}.До того, как вы получили эту вторую итерацию, она также находилась в процессе.

  3. Теперь вы получите данные 2-й итерации.(здесь вопрос вы получите) вы делаете setState.graphData: {<graph object for 2nd iteration>} поэтому здесь вы заменяете данные первой итерации на данные следующей итерации, но это должен быть массив или все они должны быть другой объект stat e, чтобы вы помещали в них данные и сохранялистарые данные итерационного графа.

Пример: 

Initial state -> graphData: []
1st iteration -> graphData: this.state.graphData.concat(res.data).

И при рендеринге вы должны отобразить хотя graphData и вернуть компонент графа.

Таким же образомЯ надеюсь, что для всей итерации это может помочь 

state = {
  graphData: []
}

componentDidMount() {
  axios.get(`http://192.168.10.124:3000/api/messages/gettopic`) 
    .then(res => {
      res.data.map(topic => {
        axios.get('http://192.168.10.124:3000/api/messages?filter[where][topic]=' + topic + "&filter[order]=timestamp%20DESC")
        .then(res => {
          this.setState({graphData: this.state.graphData.concat({topic: topic, data: res.data})});
        })
      });
    })
  }

  render() {
  const { getDeviceListPending, getDeviceListError } = this.props.dashboard;
  //const { getDevicePending, getDeviceError } = this.props.dashboard;
  //const temperatureData = this.getTempData();
  // console.log(this.state.graphData);
  //console.log(this.state.topics);
  return (
    <div className="chart">
      <div className="column">
        <div className="panel">
          {
            this.state.graphData.length && this.state.graphData.map((item, index) =>
              <div className="columns is-multiline" key={index}>
                <div className="column is-12">
                  <div className="panel">
                    <div className="panel-block">
                      <li>
                        <a onClick={memobind(this, 'handleRowClick', item)}>
                          <span>{item.topic}</span>
                          <GetChart graphData={item.data}/>
                        </a>
                      </li>
                    </div>
                  </div>
                </div>
              </div>  
            )
          }
        </div>
      </div>
    </div>
  )
...