Reactjs中的Chartjs-如何动态更新数据？

这是我第一次使用Chartjs，我在React方面也不是很专业。我正在尝试实现一个条形图，该条形图的数据可能来自使用用户输入提供的数字的计算器常量。这就是图表目前的工作方式。数据中的值是经过加密的，我不知道如何使它们成为动态的

  constructor(props) {
    super(props);

    this.state = {
            chartData:{},
      visitors: "",
      conversion: 4,
      value: "",

            smileeconversion: "",
            smileevalue: "",

            swcost: "",
            labourcost: "",
            roi: ""
    };
  }

    componentWillMount(){
    this.getChartData();
  }

      getChartData(){
    // Ajax calls here
    this.setState({
      chartData:{
        labels: ['Before', 'After'],
        datasets:[
          {
            label:'Population',
            data:[
              617594,
              181045,
            ],
            backgroundColor:[
              'rgba(255, 99, 132, 0.6)',
              'rgba(54, 162, 235, 0.6)',
              'rgba(255, 206, 86, 0.6)',
              'rgba(75, 192, 192, 0.6)',
              'rgba(153, 102, 255, 0.6)',
              'rgba(255, 159, 64, 0.6)',
              'rgba(255, 99, 132, 0.6)'
            ]
          }
        ]
      }
    });
  }

这是图表组件：

import React, {Component} from 'react';
import {Bar, Line, Pie} from 'react-chartjs-2';

class Chart extends Component{
  constructor(props){
    super(props);
    this.state = {
      chartData:props.chartData

    }
  }

  static defaultProps = {
    displayTitle:true,
    displayLegend: true,
    legendPosition:'right',
    location:'City'
  }

  render(){
    return (
      <div className="chart">
        <Bar
          data={this.state.chartData}
          options={{
            title:{
              display:this.props.displayTitle,
              text:'Return of investments',
              fontSize:25
            },
            legend:{
              display:this.props.displayLegend,
              position:this.props.legendPosition
            }
          }}
        />
      </div>
    )
  }
}

export default Chart;

 <Chart chartData={this.state.chartData} location="Massachusetts" legendPosition="bottom"/>

import React，{Component}来自'React'；
从'react-chartjs-2'导入{Bar，Line，Pie}；
类图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
chartData:props.chartData
}
}
静态defaultProps={
显示标题：正确，
是的，
legendPosition:'右'，
地点：'城市'
}
render（）{
返回(
)
}
}
导出默认图表；

及其父组件：

import React, {Component} from 'react';
import {Bar, Line, Pie} from 'react-chartjs-2';

class Chart extends Component{
  constructor(props){
    super(props);
    this.state = {
      chartData:props.chartData

    }
  }

  static defaultProps = {
    displayTitle:true,
    displayLegend: true,
    legendPosition:'right',
    location:'City'
  }

  render(){
    return (
      <div className="chart">
        <Bar
          data={this.state.chartData}
          options={{
            title:{
              display:this.props.displayTitle,
              text:'Return of investments',
              fontSize:25
            },
            legend:{
              display:this.props.displayLegend,
              position:this.props.legendPosition
            }
          }}
        />
      </div>
    )
  }
}

export default Chart;

 <Chart chartData={this.state.chartData} location="Massachusetts" legendPosition="bottom"/>

---

这是一种稍有不同的方法，但我认为它比您正在做的更简单：

停止使用状态

尝试将数组作为参数传递到函数中，然后直接将参数发送到图表数据对象，然后直接从函数内部启动图表（在这种情况下，我避免使用React state，因为它有延迟，chart.js希望立即启动）

下面是一个小例子：

let barChart;
let newLabels = ["Label1", "Label2", "Label3"];
let newData = ["Data1", "Data2", "Data3"];

createBarChart = (labels, data) => {

    let ctx = "bar_l1_chart";

    barChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: [labels],
            datasets: [{
                label: 'Sentiment',
                data: [data],
            }]
        },
    });
};
this.createBarChart(newLabels, newData);

现在只需更新“newLabels”或“newData”数组，然后重新调用该函数。一个很好的方法是使用React状态管理器，例如：

componentWillRecieveProps(newProps){
     if(newProps.labels && newProps.data) {
          if(barChart){barChart.destroy()};
          this.createBarChart(newProps.labels, newProps.data)
     }
}

---

在重新创建图表之前，还需要“销毁（）。希望这是有帮助的

就我所知，您只加载了一次图表数据。ComponentWillMount只调用一次。当用户更新一个输入字段时，你可以使用setstate，调用getChartData函数。你说的是“数据中的值是经过harcoded的，我不知道如何使它们成为动态的”。您是否在谈论数据：[617594181045，]，？这些动态数据从何而来？在AJAX调用中？如果是这样，我建议在页面顶部的搜索框中搜索“AJAX ReactJS”。看起来很多人都问过这个话题，并且得到了很好的答案。祝你好运@StephanHovius是的，这就是我的意思，如果我说的不对，很抱歉。@AndyTaton不是，我没有使用Ajax，应用程序的基本原理是它根据用户在输入中写入的数字计算投资回报。然后比较两个值，并用条形图进行说明。如何动态添加多个数据集？数据集：[{label:'情绪'，data:[数据]，}]我应该动态获取标签和数据吗？