Как динамически создавать и называть N рядов данных для ApexCharts, используя другие массивы? - PullRequest
Новая
       18

Как динамически создавать и называть N рядов данных для ApexCharts, используя другие массивы?

0 голосов
/ 23 апреля 2019

Я использую ApexCharts для отображения данных из базы данных, и она прекрасно работает, пока мне не придется создавать несколько рядов данных.Я получаю данные в виде нескольких массивов, например, так (примечание: я не получаю список фруктов, это для примера) 

var fruits = ["apple","apple","apple","apple","apple"]; // Name of the fruit
var dates = ["2019-04-01","2019-04-02","2019-04-03","2019-04-04","2019-04-05"];
var values = [14,9,17,5,11];

Куда фрукты [0] идут с датами [0] и значения [0] (считайте их строкой в ​​базе данных).

В этом случае у меня есть только один ряд данных для передачи в ApexCharts, и я могу сделать это так: 

var matchedData = [];

// I create nested arrays in matchedData, each array corresponding to a tuple, like so : matched[0] = [dates[0],values[0]]
for(let i = 0; i < fruits.length; i++) {
    date = new Date(dates[i]); // To transform the date string to Javascript timestamp
    matchedData[i] = [date.getTime(),values[i]];
}

var options = {
    chart: {
        type: 'line'
    },
    series: [{
        label: "Data",
        data: matchedData
    }],
    xaxis: {
        type: 'datetime'
    },
}

var chart = new ApexCharts(document.getElementById('chart'), options);
chart.render();

Но это работает только тогда, когда массив "fruits" содержит только один видфруктов и не разных видов.Поэтому, если мои массивы такие: 

var fruits = ["apple","banana","apple","banana","strawberry"];
var dates = ["2019-04-01","2019-04-02","2019-04-03","2019-04-04","2019-04-05"];
var values = [14,9,17,5,11];

Мне нужно динамически создать 3 массива, названных в честь фруктов (так, в данном случае, «яблоко», «банан» и «клубника»), каждый изих содержащие соответствующую дату и значение.Каждый массив будет выглядеть так: 

apple = [
            ["2019-04-01", 14], // I wrote the time in string for readability here but in reality it would be written in the JavaScript timestamp format
            ["2019-04-03", 17]
        ];

banana = [
            ["2019-04-02", 9], 
            ["2019-04-04", 5]
         ];

strawberry = [
                 ["2019-04-05",11]
             ];

И эти ряды данных будут передаваться в ApexCharts следующим образом: 

var options = {
        chart: {
            type: 'line'
        },
        series: [
            {
                label: "apple",
                data: apple
            },{
                label: "banana",
                data: banana
            },{
                label: "strawberry",
                data: strawberry
            }
        ],
        xaxis: {
            type: 'datetime'
        },
    }

var chart = new ApexCharts(document.getElementById('chart'), options);
chart.render();

Моя проблема заключается в следующем:

Iне знаю, сколько серий мне нужно будет создать до времени выполнения, я не знаю их имени и не знаю, как динамически передать их в ApexCharts (если есть N серий, мне нужно N {label /данные} предложения).

У меня есть начало решения для динамического создания массива для каждого фрукта, это выглядит так: 

for(let i = 0; i < fruits.length; i++) {

    if(fruits[i] in window) {
        date = new Date(dates[i]);
        window[fruits[i]].push([date.getTime(),values[i]]);
    } else {
        window[lines[i]] = [];
        date = new Date(dates[i]);
        window[lines[i]].push([date.getTime(),values[i]]);
    }

}

И затем я могу получить доступ к каждомумассив, но только если вы уже знаете, какие значения есть в массиве "fruits".

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Вы можете использовать следующий подход для группировки по фруктам. 

var fruits = ["apple","banana","apple","banana","strawberry"];
var dates = ["2019-04-01","2019-04-02","2019-04-03","2019-04-04","2019-04-05"];
var values = [14,9,17,5,11];

let result = fruits.reduce((a, f, i) => {
  (a.result[f] || (a.result[f] = [])).push([a.dates[i], a.values[i]]);
  return a;
}, {dates, values, result: {}}).result;

// now, you can get the apple info as follow:
console.log(JSON.stringify(result["apple"], null, 1));
console.log(JSON.stringify(result, null, 1));
.as-console-wrapper { min-height: 100%; }
0 голосов
/ 24 апреля 2019

Я нашел себя. Я использовал глобальный объект окна, как я говорил ранее, так: 

for(let i = 0; i < fruits.length; i++) {

    if(!(fruits[i] in window)) {
        window[fruits[i]] = [];
    }

    date = new Date(dates[i]);
    window[fruits[i]].push([date.getTime(),values[i]]);
}

Затем я создал массив, содержащий список каждого уникального имени из массива "fruits", используя эту функцию: 

var fruitsName = fruits.unique();

Array.prototype.unique = function() {
    return this.filter(function (value, index, self) {
        return self.indexOf(value) === index;
    });
}

И затем я перебрал массив уникальных имен, чтобы добавить каждую серию в мою диаграмму из ApexCharts, используя метод appendSeries (), например: 

for(let i = 0; i < fruitsName.length; i++) {
    chart.appendSeries({
        name: fruitsName[i],
        data: window[fruitsName[i]]
    });
}
...