Логика вертикальных категорий столбчатой ​​диаграммы ApexCharts в ReactJs?

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


reactjs javascript apex apexcharts
person Mihail    schedule 24.05.2019    source источник
comment
Итак, каковы категории осей x и y? Вы пытаетесь создать временной ряд?   -  person Cool Guy    schedule 24.05.2019
comment
Категории моей оси X - это названия месяцев, а оси Y - это ряды: [данные] количество записей. Да, логика диаграммы взята из базовой гистограммы [apexcharts]   -  person Mihail    schedule 24.05.2019
comment
Понятно, вы думаете о создании чего-то вроде столбчатой ​​диаграммы с накоплением или линейной диаграммы, где каждая линия представляет собой отдельный продукт? Похоже, вам понадобится более одной серии объектов.   -  person Cool Guy    schedule 24.05.2019
comment
@ChristopherNgo просто базовая, столбчатая диаграмма, например: apexcharts. com / response-chart-demos / column-charts / basic, у меня есть несколько объектов с одной серией ... как вы можете видеть из модели json, есть два продукта, но один из них содержит данные для [ янв, фев, март] и другие за [фев] только.   -  person Mihail    schedule 24.05.2019
comment
@ChristopherNgo цените, спасибо   -  person Mihail    schedule 24.05.2019
comment
Позвольте нам продолжить это обсуждение в чате.   -  person Cool Guy    schedule 24.05.2019

Ответы (1)


arrow_upward
2
arrow_downward

Следующий код создаст объект серии для каждого продукта. У каждого продукта будет свой массив данных. Где каждое число последовательно соответствует месяцу. За месяц добавляется значение 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]}
person Cool Guy    schedule 24.05.2019
comment
ты легенда, работает отлично. если возникнут какие-либо вопросы, в будущем дам знать. - person Mihail; 24.05.2019
comment
@ Майкл спасибо :)! Это была большая проблема, поэтому я рад помочь! - person Cool Guy; 24.05.2019
comment
Привет, @Christopher, все еще работаю над проектом с графиками, сетками данных, и я пытаюсь решить проблему .. как лучше всего связаться с вами, чтобы задать вам пару вопросов? - person Mihail; 26.06.2019
comment
Привет, @Michael, это классный человек, надеюсь, проект идет хорошо. Вы можете связаться со мной по электронной почте, если хотите: [email protected] Задайте мне свои вопросы, и я посмотрю, смогу ли я помочь :) - person Cool Guy; 27.06.2019
comment
Привет, @Christopher, я отправил тебе вопрос по электронной почте. Спасибо - person Mihail; 27.06.2019