javascript - 使用 chart.js 显示数组中的多个数据集

Question

我正在尝试显示关于一个国家/地区不同部门的人口增长的多折线图，但是当我从 PHP 获取 JSON 时，我无法迭代数组以获取年份和总数人口。这是我的代码:

$(document).ready(function(){

 $.ajax({

   url: "../assets/api/stats.php",

   data: "stat=birth&in=departement",

   type: "GET",

   success: function(data) {
      console.log(data);
      var departement = {
             Zone: []
      };

      var year = {
             Birth: []
      };

      var total = {
             Birth: []
      };

      var len = data.length;
      console.log(data.length);

      var lctx = $('#line-chart- departement');
      for (var j = 0; j < len; j++) {

     departement.Zone.push(data[j][0].departement);

     for (var i = 0; i < data.length; i++) {
       annee.Naissance.push(departement.Zone[i].annee);
       total.Naissance.push(departement.Zone[i].total);
     }

     var data = {
       labels: annee.Naissance,
       datasets: [{
         label: data[j],
         data: total.Naissance,
         backgroundColor: getRandomColor(),
         borderColor: "#3e95cd",
         fill: false,
         lineTension: 0,
         pointRadiues: 5
       }]
     };
     console.log();
     var chart = new Chart(lctx, {
       type: "line",
       data: data,
       options: {}
     });

   }
 },error: function(data) {
   //console.log(data)
 }
   });
   function getRandomColor() {

   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++) {
   color += letters[Math.floor(Math.random() * 16)];
 }

 return color;}
 });

还有我的数组

[

    {
        "Nord-Est": 
       [
            {
                "annee": "1995",
                "totalnaissance": "1"
            }
        ]
    },
    {
        "Ouest": 
        [
            {
                "annee": "1994",
                "totalnaissance": "2"
            },
            {
                "annee": "1995",
                "totalnaissance": "1"
            }
        ]
    },
    {
        "Nippes": 
        [
            {
                "annee": "1951",
                "totalnaissance": "1"
            },
            {
                "annee": "1987",
                "totalnaissance": "1"
            },
            {
                "annee": "1986",
                "totalnaissance": "1"
            },
            {
                "annee": "1992",
                "totalnaissance": "2"
            }
        ]
    },
    {
        "Sud-Est": 
        [
            {
                "annee": "1985",
                "totalnaissance": "1"
            }
        ]
    }
]

Answer 1

事实证明，这“远不止于此”。

• 因为我们需要所有年份作为 x 轴，所以我们需要遍历两次数据 - 一次获取所有年份，一次获取每年的数据。如果那一年的数据不可用，我们必须输入 null。否则 x 和 y 点会不匹配。
• 取出所有年份后，要按升序排列，我们需要按同样的顺序得到totalnaissance数据。
• 您已为 borderColor 指定了固定值 #3e95cd，但对于折线图，边框颜色是线条颜色。所以我改变了它。我还使 backgroundColor“透明”和 pointBackgroundColor 等于 borderColor。

我创建了一个 Pen 。

<canvas id="myChart" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var data = {
      Nippes: [
        {
          annee: "1951",
          totalnaissance: "1"
        },
        {
          annee: "1986",
          totalnaissance: "1"
        },
        {
          annee: "1987",
          totalnaissance: "1"
        },
        {
          annee: "1992",
          totalnaissance: "2"
        }
      ],
      "Nord-Est": [
        {
          annee: "1995",
          totalnaissance: "1"
        }
      ],
      Ouest: [
        {
          annee: "1994",
          totalnaissance: "2"
        },
        {
          annee: "1995",
          totalnaissance: "1"
        }
      ],
      "Sud-Est": [
        {
          annee: "1985",
          totalnaissance: "1"
        }
      ]
    };
var departments = [];
var annees = [];

for (var department in data) {
    if (data.hasOwnProperty(department)) {
        var departmentData = data[department];
        getYears(departmentData);
    }
}

annees.sort();

for (var department in data) {
    if (data.hasOwnProperty(department)) {
        var departmentData = data[department];//getDataForDepartment(i);
        var totalnaissanceData = getTotalNaissanceDataForDep(departmentData);

        var departmentObject = prepareDepartmentDetails(department, totalnaissanceData);
        departments.push(departmentObject);
    }
}

var chartData = {
    labels: annees,
    datasets : departments
};

var chart = new Chart(ctx, {
   type: "line",
   data: chartData,
   options: {}
 });




function getDataForDepartment(index){
    return data[i][Object.keys(data[i])[0]];
}

function getYears(departmentData){
    for (var j = 0; j< departmentData.length; j++){
        if (!annees.includes(departmentData[j].annee)){
            annees.push(departmentData[j].annee);
        }
    }
}

function getTotalNaissanceDataForDep(departmentData){
    var totalnaissanceData = [];
    for (var j = 0; j < annees.length; j++){
        var currentAnnee = annees[j];
        var currentTotalNaissance = null;
        for (var k = 0; k< departmentData.length; k++){
            if (departmentData[k].annee === currentAnnee){
                currentTotalNaissance = departmentData[k].totalnaissance;
                break;
            }
        }
        totalnaissanceData.push(currentTotalNaissance);
    }
    return totalnaissanceData;
}

function prepareDepartmentDetails(departmentName, totalnaissanceData){
    var dataColor = getRandomColor();
    return {
        label : departmentName,
        data : totalnaissanceData,
        backgroundColor: 'transparent',
        borderColor: dataColor,//"#3e95cd",
        pointBackgroundColor : dataColor,
        fill: false,
        lineTension: 0,
        pointRadius: 5
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>