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

Question

我想显示一个堆叠的条形图，其中显示了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个区域的所有三个参数赋值。我为每个标签的'data'赋了一个空数组。我必须为无法执行的每个数组执行this.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();

      }

Answer 1

您必须遍历数据。当您的状态始终排在同一顺序时（例如您的示例中的状态），我的解决方案就会起作用。如果不是，那么您必须执行其他检查。

https://jsbin.com/zunimifidi/1/edit?js,output

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)
}