循环遍历数据并将其传递给图表
循环遍历数据并将其传递给图表
提问于 2019-08-21 15:09:29
我有一个数组的数据，我用它来绘制一个线图。我在用ApexCharts。
let testData = [
{
cell_id: 5833307,
datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
rsrq: ["108", "108", "108", "108", "109"]
},
{
cell_id: 2656007,
datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
rsrq: ["120", "119", "116", "134", "114"]
}
];
let datasetValue = [];
for( let x=0; x<testData.length; x++ )
{
datasetValue =
{
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: [
{
name: testData[x].cell_id,
data: testData[x].rsrq
}
],
xaxis: {
categories: testData[x].datetime,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
}
}
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);
chart.render();<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
因此，我使用我的JSON数组，在一个for循环中循环它来获得我的数据集。我定义了一个数组变量datasetValue，它分配循环数据并将它传递给我的图表实例：new ApexCharts(document.querySelector("#rssi-signal"), datasetValue);
正在发生的仅仅是传递最后一个数组对象，这意味着我缺少/没有传递一些东西来获取我的所有数据。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-08-21 15:18:18
通过对系列和类别进行分组来重构testData
let series = [];
let categories = [];
for (let x = 0; x < testData.length; x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories.concat(testData[x].datetime);
}
let testData = [{
cell_id: 5833307,
datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
rsrq: ["108", "108", "108", "108", "109"]
},
{
cell_id: 2656007,
datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
rsrq: ["120", "119", "116", "134", "114"]
}
];
let series = [];
let categories = [];
for (let x = 0; x < testData.length; x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories = categories.concat(testData[x].datetime);
}
var chart = new ApexCharts(document.querySelector("#signal"), {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: series,
xaxis: {
categories: categories,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
});
chart.render();<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Stack Overflow用户
发布于 2019-08-21 15:14:38
因为您在for循环之外声明一个数组。
let datasetValue = {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: [],
xaxis: {
categories: [],
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
};内部for循环您应该这样做
datasetValue.series.push(
{
name: testData[x].cell_id,
data: testData[x].rsrq
});
datasetValue.xaxis.categories.push(testData[x].datetime);您应该在数组中推送值，而不是在每次迭代中重新分配它。
Stack Overflow用户
发布于 2019-08-21 15:18:51
您要做的第一个错误是将"datasetValue“定义为数组变量。
datasetValue = yourdata; //wrong in case of pushing data into array您正在尝试将一个对象分配给数组变量，该变量仅包含由于循环和赋值而导致的最后结果。相反，使用数组的push方法将数据推送到数组中。
datasetValue.push(yourdata); //correct way to push data to array因此，将"datasetValue“定义为数组是没有用的。
为了实现您的目标，您可以使用以下循环
var datasetValue;
var series = [];
var categories = [];
for(let x=0; x<testData.length;x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories.concat(testData[x].datetime);
}
datasetValue = {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series,
xaxis: {
categories,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
};
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);
chart.render();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57594581
复制相关文章
相似问题
腾讯云开发者
