Reactjs 如何为堆叠条形图数据集的不同标签（图例）赋值

我想显示一个堆叠条形图，显示5个区域的数据。每个区域有3种状态-“已完成”、“正在进行”和“正在等待”。我遇到了一个api，它给了我以下的响应-

{
  "Zone 1": [
    {
      "mtstatusName": "Completed",
      "count": 0
    },
    {
      "mtstatusName": "In Progress",
      "count": 0
    },
    {
      "mtstatusName": "Waiting",
      "count": 0
    }
  ],
  "Zone 2": [
    {
      "mtstatusName": "Completed",
      "count": 0
    },
    {
      "mtstatusName": "In Progress",
      "count": 1
    },
    {
      "mtstatusName": "Waiting",
      "count": 0
    }
  ],
  "Zone 3": [
    {
      "mtstatusName": "Completed",
      "count": 1
    },
    {
      "mtstatusName": "In Progress",
      "count": 0
    },
    {
      "mtstatusName": "Waiting",
      "count": 0
    }
  ],
  "Zone 4": [
    {
      "mtstatusName": "Completed",
      "count": 1
    },
    {
      "mtstatusName": "In Progress",
      "count": 1
    },
    {
      "mtstatusName": "Waiting",
      "count": 2
    }
  ],
  "Zone 5": [
    {
      "mtstatusName": "Completed",
      "count": 0
    },
    {
      "mtstatusName": "In Progress",
      "count": 0
    },
    {
      "mtstatusName": "Waiting",
      "count": 0
    }
  ]
}

我需要在条形图中显示每个区域的计数。图表上的每个区域表示已完成、正在进行和等待的值，具体取决于计数

早些时候，我提供了硬编码的数据，所以它是有效的。但现在我必须从这个json获取值。在这里附加我的代码。请告诉我如何为所有5个区域的所有三个参数赋值。我为每个标签的“数据”指定了空数组。我必须为这些阵列中的每个阵列执行此.setState操作，但我无法执行此操作

constructor(props) {
        super(props);
        this.state = {
            metricsAndStatus: {},
            zoneName:"",
            status: "",
            dataElements:{
                labels: ['Zone 1', 'Zone 2', 'Zone 3', 'Zone 4', 'Zone 5'],
                datasets: [
                {
                        data: [],
                        label: 'Completed',
                        backgroundColor: '#bad96b'
                },
                  {
                    data: [],
                    label: 'In Progress',
                   backgroundColor: '#8ad0f9',

                  },
                  {
                    data: [],
                    label: 'Waiting',
                    backgroundColor: '#ffda78'
                  }, 
                ]
              }
         }
    }
    triggerAssetMetricsData = () => {
        fetch('api ')//hitting api here
        .then(resp => resp.json())
        .then(response => {
            console.log( response[Object.keys(response)[0]][0].count)
            this.setState({
            metricsAndStatus:response,
            zoneName: Object.keys(response),
           })
         })
        ;
       }
        componentDidMount = () => {
        this.triggerAssetMetricsData();

      }

---

你必须循环浏览你的数据。当您的状态总是以相同的顺序出现时（就像您的示例中那样），我的解决方案就会起作用。如果没有，则必须执行附加检查

chartData.labels=Object.keys（数据）
for（设i=0；i

chartData.labels = Object.keys(data)

for (let i = 0; i < status.length; i++) {
  console.log(status[i])
  let newDataset = {}
  newDataset.label = status[i]
  newDataset.backgroundColor = colors[status[i]]
  newDataset.data = []
  for (let idx in data) {  
    let cData = data[idx]
    newDataset.data.push(cData[i].count)
  }
  chartData.datasets.push(newDataset)
}