Reactjs React图表不使用数据更新

我是react新手，希望在我的组件中显示图表，其中的数据应该通过API响应填充

我的API响应示例是：

{
    "result": 1,
    "data": [
        {
            "data1": "1272.00",
            "data2": "1183.00",
            "price": "131.00"
        },
        {
            "data1": "1328.00",
            "data2": "1468.00",
            "price": "132.00"
        },
        {
            "data1": "1829.00",
            "data2": "1445.00",
            "price": "133.00"
        },
        {
            "data1": "1089.00",
            "data2": "968.00",
            "price": "134.00"
        },
        {
            "data1": "16700.00",
            "data2": "20901.00",
            "price": "135.00"
        },
        {
            "data1": "804.00",
            "data2": "1110.00",
            "price": "136.00"
        },
    ]
}

我希望

price

在YAxis中，并且有多个数据，即XAxis上的

data1

和

data2

字段

React代码：（只实现一个）

import React，{Component}来自“React”；
从“/Sidebar”导入侧栏；
从“反应图表”导入{Chart}；
从“axios”导入axios；
常量qs=要求（“qs”）；
类Home扩展组件{
状态={
日期列表：[]，
图表数据：[]
};
componentDidMount（）{
这是.getDatesList（）；
}
getDatesList（）{
axios.get（“http://127.0.0.1:8000/dateslist/）然后（res=>{
如果（res.data.result==1）{
this.setState（{datelist:res.data.data}）；
}否则{
this.setState（{datelist:[]}）；
}
});
}
handleChange=事件=>{
var dateval=event.target.value；
axios
.邮政(`http://127.0.0.1:8000/pricedata/`，qs.stringify（{date:dateval}））
。然后（res=>{
如果（res.data.result==1）{
这是我的国家({
图表数据：[
{
标签：“罢工”，
数据：res.data.data
}
]
});
}否则{
this.setState（{chart_data:[]}）；
}
});
};
render（）{
返回(
{this.state.datelist.map（（date，i）=>(
{date}
))}
);
}
}
导出默认主页；

状态已更新，但不显示图表

注意：我已将图表库安装为-

npm I--save-react-chartjs-2 chart.js

我错过了什么？如何正确填充要显示的数据

---

提前感谢。

我查看了回复，发现您正在向图表传递数据，如下所示：

{
    label: "Strike",
    data: [
    {
        "data1": "1272.00",
        "data2": "1183.00",
        "price": "131.00"
    },
    {
        "data1": "1328.00",
        "data2": "1468.00",
        "price": "132.00"
    },
  ]
}

这显然是不正确的，在react charts文档中，您可以看到它以以下模式接受数据：

 [
    {
      label: "Series 1",
      data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
    },
    {
      label: "Series 2",
      data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
    }
  ]

因此，为了使代码正常工作，您需要操纵API调用的响应以匹配模式

可以通过更改以下代码行来完成此操作：

handleChange = event => {
    var dateval = event.target.value;
    axios
      .post(`http://127.0.0.1:8000/pricedata/`, qs.stringify({ date: dateval }))
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            chart_data: [
              {
                label: "Strike",
                data: res.data.data.map(Object.values)
              }
            ]
          });
        } else {
          this.setState({ chart_data: [] });
        }
      });
  };

---

但图表应该根据在selectbox中选择的值显示，因为我需要那个更改参数，而且我也尝试将代码放入构造函数中，但在screen@ReemaParakh，我已经更新了答案请看。@ReemaParakh好的，我已经再次更新了答案请看（数据：res.data.data.map（Object.values））谢谢，它真的很有帮助。但是它只显示了一个数据栏。我可以有2个栏吗？1个用于数据1，2个用于数据2（在Yaxis上）和price（在X轴上）。您正在使用react图表并安装了reat-chartjs-2。为了使用react图表，请使用npm I-S react图表从npm安装react图表。

handleChange = event => {
    var dateval = event.target.value;
    axios
      .post(`http://127.0.0.1:8000/pricedata/`, qs.stringify({ date: dateval }))
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            chart_data: [
              {
                label: "Strike",
                data: res.data.data.map(Object.values)
              }
            ]
          });
        } else {
          this.setState({ chart_data: [] });
        }
      });
  };