如何使用其他数组为 ApexCharts 动态创建和命名 N 个数据系列？

Question

我正在使用 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];

fruits[0] 与 dates[0] 和 values[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"、"banana" 和 "strawberry"），每个数组都包含相应的日期和价值。每个数组看起来像这样：

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();

我的问题如下：

我不知道在运行时之前我需要创建多少个系列，我不知道它们的名字，我也不知道如何将它们动态传递给 ApexCharts（如果有 N 个系列，我需要 N {label/data} 个子句）。

我已经开始为每个水果动态创建一个数组的解决方案，它看起来像这样：

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" 数组中的不同值。

Answer 1

您可以使用以下方法按水果分组。

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%; }

Answer 2

我找到了自己。我使用了 window 全局对象，就像我之前说的那样：

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

然后我在唯一名称数组上进行迭代，使用 appendSeries() 方法将每个系列从 ApexCharts 添加到我的图表中，如下所示：

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

如何使用其他数组为 ApexCharts 动态创建和命名 N 个数据系列？

How to dynamically create and name N data series for ApexCharts using other arrays?

javascript

arrays

dynamic

apexcharts