ApexCharts barchart логика вертикальных категорий в ReactJs? - PullRequest
Новая
       30

ApexCharts barchart логика вертикальных категорий в ReactJs?

0 голосов
/ 24 мая 2019

У меня возникла проблема при попытке выяснить, как отображать правильные данные в правильной категории. Мои данные в этом формате из 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: []}}

Это состояние в ReactJs из apexcharts Я потратил пару дней, и я попытался отсортировать его по алфавиту: данные были неверно отображены на графике. Я читал документацию, но не понял, как это сделать, или как правильно понять логику. категории не могут повторяться так: [январь, февраль, март] и данные [записи] должны быть правильными в своей категории.

1 Ответ

2 голосов
/ 24 мая 2019

Следующий код создаст объект серии для каждого продукта. Каждый продукт будет иметь свой собственный массив данных. Где каждое число соответствует последовательно месяцу. Значение 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",
}
]

Это создает массив месяцев, которые использовались в наборе данных. Нет дубликатов. Мы будем использовать его для сопоставления соответствующих значений данных каждого продукта в конкретном месяце.

Создание категорий: 

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]}
...