循环遍历数据并将其传递给图表

Question

我有一组数据用于绘制折线图。我正在使用 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);

只传递了最后一个数组对象，这意味着我正在 missing/not 传递一些东西来获取我的所有数据。

Answer 1

因为你在 forloop 之外声明了一个数组

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

您应该将值压入数组而不是在每次迭代中重新分配它

Answer 2

通过对系列和类别进行分组来重构测试数据

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>

Answer 3

您尝试犯的第一个错误是将 "datasetValue" 定义为数组变量。

datasetValue = yourdata; //wrong in case of pushing data into array

由于循环和赋值，您正在尝试将对象分配给仅包含最后结果的数组变量。相反，使用数组的 push 方法将数据推送到数组中。

datasetValue.push(yourdata); //correct way to push data to array

所以，将"datasetValue"定义为数组是没有用的。

要实现您的 objective 您可以使用以下循环应用

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

Answer 4

我在 datasetValue 定义之后移动你的 for 循环以仅向其添加系列，并且还更改 xaxis

for( let x=0; x<testData.length; x++ )
{
    datasetValue.series.push({
        name: testData[x].cell_id,
        data: testData[x].rsrq
    })
}

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 = 
    { 
    chart: {
      height: 380,
      width: "100%",
      type: "line"
    },
    stroke: {
      curve: 'smooth',
      width: 1.5,
    },
    markers: {
      size: 4,
    },
    legend: {
      show: true,
      position: 'top'
    },  
    series: [
    ],
    xaxis: {
      categories: testData[0].datetime,
      title: {
        text: "Date"
      }
    },
    yaxis: {
      title: {
        text: "RSSI"
      }
    }
  }
  
for( let x=0; x<testData.length; x++ )
{
    datasetValue.series.push({
        name: testData[x].cell_id,
        data: testData[x].rsrq
      })
}
  
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);

chart.render();

<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

循环遍历数据并将其传递给图表

Looping through data and passing it to a chart

javascript

json

apexcharts