ReactJs 中的 ApexCharts 条形图垂直类别逻辑？

Question

我在尝试弄清楚如何将正确的数据显示到正确的类别时遇到了问题。我的数据采用这种格式，来自 json API:

{
  "name" : "product1",
  "records": "5",
  "month" : "Jan",
},
{
  "name" : "product1",
  "records": "10",
  "month" : "Feb",
},
{
  "name" : "product1",
  "records": "20",
  "month" : "March",
},
{
  "name" : "product2",
  "records": "5",
  "month" : "Feb",
}

数据模型示例。

this.state = {
  barChart: { 
   options: {
      plotOptions: {
        xaxis: {
          categories: []
       }}}
        series: [{name: [], data: []}}

这是来自 apexcharts 的 ReactJs 中的状态我已经花了几天时间，我试图根据字母表对它进行排序：图表中显示的数据是错误的。我正在阅读文档，但没有弄清楚该怎么做，或者如何使逻辑正确。类别不能重复：[Jan, Feb, March] 并且数据[记录]在它自己的类别中必须是正确的。

Answer 1

以下代码将为每个产品创建一个系列对象。每个产品都有自己的数据数组。其中每个数字依次对应一个月。为该产品的 data-set 中未使用的月份添加了 0 值。

示例数据集：

let data = [{
  "name" : "product1",
  "records": "5",
  "month" : "Jan",
},
{
  "name" : "product1",
  "records": "10",
  "month" : "Feb",
},
{
  "name" : "product1",
  "records": "20",
  "month" : "Mar",
},
{
  "name" : "product2",
  "records": "5",
  "month" : "Feb",
},
{
  "name" : "product1",
  "records": "5",
  "month" : "May",
},
{
  "name" : "product2",
  "records": "5",
  "month" : "Jun",
}
]

这将创建 data-set 中使用的月份数组。没有重复。我们将使用它来映射每个产品在其特定月份的相应 data-values。

创建类别：

let months = data.map((item) => item.month).filter((item, index, array) => array.indexOf(item) == index)

创建系列：

const productTotals = data.reduce((obj, curr) => {
    if(!obj[curr.name]){
        obj[curr.name] = []
    }

    obj[curr.name][months.indexOf(curr.month)] = parseInt(curr.records)
    return obj
}, {})

const series = Object.entries(productTotals).map(([name, prodArr]) => {
    return {
        name: name,
        data: months.map((month, monthIndex) => {
            if(!prodArr[monthIndex]){
                return 0
            } else {
                return prodArr[monthIndex]
            }

        })
    }

})

然后只需使用您的新系列数据和类别更新属性即可。

this.state = {
  barChart: { 
   options: {
      plotOptions: {
        xaxis: {
          categories: [...months]
       }}}
        series: [...series]}

ReactJs 中的 ApexCharts 条形图垂直类别逻辑？

ApexCharts barchart vertical categories logic in ReactJs?

javascript

reactjs

apex

apexcharts

示例数据集：

创建类别：

创建系列：