Обновление данных Chartjs с ответом на вызов POST?

В настоящее время я использую react-chartjs-2, чтобы иметь возможность вставлять диаграмму в компонент реакции. Я импортирую данные и параметры диаграммы, которые находятся в другом файле js. В моем приложении я также делаю вызов POST, который возвращает некоторые данные в своем теле, которые я хочу использовать в качестве данных для диаграммы, и диаграмма может обновляться каждый раз, когда вызывается запрос POST. Ответ POST в настоящее время хранится в состоянии RESTResponse. Поэтому, чтобы получить доступ к данным ответа за пределами диаграммы в реакции, я обычно вызываю {this.state.RESTresponse.total}. Я хочу иметь возможность использовать {this.state.RESTresponse.total} в качестве данных на моей диаграмме. Как я смогу это сделать? Было бы проще, если бы я не использовал два отдельных файла js для диаграммы и основного компонента? Благодарю вас!

Вот код, в котором вызывается диаграмма:

import {HorizontalBar} from "react-chartjs-2";
import {Row} from "reactstrap";

// Importing the chart data and options to be used in <HorizontalBar>
import {stackedChart} from "variables/charts.js";

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      RESTresponse: []
    };
  }  
  async onTodoChange(event){
    let updateJSON = {...this.state.RESTresponse, [event.target.name] : val}
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updateJSON)
    };
    const response = await fetch('/api/calculate', requestOptions);
    const body = await response.json();
    this.setState({RESTresponse : body });
}

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <HorizontalBar
              data={stackedChart.data}
              options={stackedChart.options}
            />
          </Row>
        </div>
      </>
    );
  }
}

А вот код, в котором определены данные и опции:

let stackedChart = {
  data: canvas => {
    return {
      datasets: [
        {
          label: ' Total Value',
          data: [10], //<--- I want to dynamically update this data value from the POST response
          backgroundColor: '#C4D156'
        }
      ]
    };
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: true,
      labels: {
        usePointStyle: true,
        borderWidth: 0,
        filter: function(legendItem, chartData) {
          if (legendItem.datasetIndex === 3) {
            return false;
          }
         return true;
         }
      }
    },
    tooltips: {enabled: false},
    hover: {mode: null},
    responsive: true,
    scales: {
      yAxes: [
        {stacked: true},
      ],
      xAxes: [{stacked: true,
        ticks: {
             display: false
        }
      },
      ]
    }
  }
};


module.exports = {
  stackedChart
};

person Anthony Desjardins    schedule 25.07.2020    source источник
comment
Где вы вызываете метод onTodoChange?   -  person Ozan Manav    schedule 25.07.2020
comment
Спасибо за ответ! Я вызываю метод onTodoChange в области ввода, которую вынул, чтобы очистить код. onTodoChange будет получать ответ POST всякий раз, когда редактируется форма ввода. Это вызываемая функция: name=a1 value={this.state.RESTresponse.a1} onChange={e =› this.onTodoChange(e)}   -  person Anthony Desjardins    schedule 25.07.2020


Ответы (1)


Когда data является функцией, вызывается ли она с узлом, на котором смонтирована диаграмма. Однако в настоящее время вы, похоже, не нуждаетесь в этом.

Объявить данные для получения данных ответа сервера.

  dataFactory: data => {
    return {
      datasets: [
        {
          label: ' Total Value',
          data,
          backgroundColor: '#C4D156'
        }
      ]
    };
  },

Затем вызовите его в методе рендеринга вашего компонента с данными, хранящимися в состоянии.

<HorizontalBar
  data={stackedChart.dataFactory(this.state.RESTresponse)}
  options={stackedChart.options}
/>
 
person Oluwafemi Sule    schedule 25.07.2020