循环数据集ChartJS Javascript

我正在从返回以下内容的API获取数据集数组：

[
"[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
"[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
"[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"
]

我需要在我的Chart JS Linechart中重复上述每个步骤,如下所示：

 var lineChartData = {
labels: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14','15', '16', '17', '18', '19', '20', '21','22', '23', '24', '25', '26', '27','28','29','30','31'],
datasets: [{
  label: 'My First dataset',
  fillColor: 'rgba(220,220,220,0.2)',
  strokeColor: 'rgba(220,220,220,1)',
  pointColor: 'rgba(220,220,220,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(220,220,220,1)',
  data: dataset[0]
}, {
  label: 'My Second dataset',
  fillColor: 'rgba(151,187,205,0.2)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(151,187,205,1)',
  data: dataset[1]
},
{
  label: 'My Third dataset',
  fillColor: 'rgba(151,187,205,0.2)',
  strokeColor: 'rgba(151,187,205,1)',
  pointColor: 'rgba(151,187,205,1)',
  pointStrokeColor: '#fff',
  pointHighlightFill: '#fff',
  pointHighlightStroke: 'rgba(151,187,205,1)',
  data: dataset[2]
}]

从API提取的数据集数量是可变的,因此我可能需要折线图上x个数据集.

如何在数据集中循环数组？

我想到的逻辑是：

var lineChartData = {
labels : [1,2,3..]
for(i=0;i<array.length;i++)
{
     datasets : [{
     data : array[i]}]
}

Nina帮助后的新更新代码：

var xmlhttp = new XMLHttpRequest();
var url = "http://www.autosys.xyz/api/v1/getAllEmpDailyData?clientid=132617";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {

  var lineChartData = { 
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], 
    datasets: [{ 
      label: 'My First dataset', 
      fillColor: 'rgba(220,220,220,0.2)', 
      strokeColor: 'rgba(220,220,220,1)', 
      pointColor: 'rgba(220,220,220,1)', 
      pointStrokeColor: '#fff', 
      pointHighlightFill: '#fff', 
      pointHighlightStroke: 'rgba(220,220,220,1)', 
      data: null }, 
      { 
        label: 'My Second dataset', 
        fillColor: 'rgba(151,187,205,0.2)', 
        strokeColor: 'rgba(151,187,205,1)', 
        pointColor: 'rgba(151,187,205,1)', 
        pointStrokeColor: '#fff', 
        pointHighlightFill: '#fff', 
        pointHighlightStroke: 'rgba(151,187,205,1)', 
        data: null }, 
        { 
          label: 'My Third dataset', 
          fillColor: 'rgba(151,187,205,0.2)', 
          strokeColor: 'rgba(151,187,205,1)', 
          pointColor: 'rgba(151,187,205,1)', 
          pointStrokeColor: '#fff', 
          pointHighlightFill: '#fff', 
          pointHighlightStroke: 'rgba(151,187,205,1)', 
          data: null }] },
    array = arr;

array.forEach(function (a, i) {
    lineChartData.datasets[i].data = JSON.parse(a);
});

console.log(lineChartData);

解决方法:

您可以使用循环(Array#forEach)并分配数组的已解析项目(JSON.parse).

var lineChartData = { labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], datasets: [] },
    array = ["[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]", "[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]", "[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"];

array.forEach(function (a, i) {
    lineChartData.datasets.push({
        label: 'Label ' + i,
        fillColor: 'rgba(220,220,220,0.2)',
        strokeColor: 'rgba(220,220,220,1)',
        pointColor: 'rgba(220,220,220,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke:
        'rgba(220,220,220,1)',
        data: JSON.parse(a)
    });
});

console.log(lineChartData);

标签：chart-js,arrays,javascript,jquery
来源： https://codeday.me/bug/20191026/1939752.html