Jquery 如何使用ChartJS呈现具有多个相关数据点的折线图

我对chartJS非常陌生，一直在玩弄它，但我遇到了这个挑战。使用下面的JSON数据，我希望能够创建一个图形，其中人员列表作为X轴，每个部分都将作为图例中的一个元素列出。每个部分都会在图表上显示自己的线条。节名称不是静态的，由来自API的传入JSON数据创建

我要提到的是，如果有更好的方式格式化JSON，也可以这样做，但基本上这个人有多个部分，每个部分中都有需要绘制的结果

JSON

我的代码：

$.ajax({
    url: "successteamboardoverview.php",
    method: "GET",
    contentType: "application/text",
    dataType: 'text',

    success: function(data) {

      var thejson = JSON.parse(data);
      var thePERSONarray = [];
      var thePERSON;
      var thesectionarray = [];
      var thesection;
      var theresultarray = [];
      var theresultfull = [];

      for(var i in thejson) {
      
        thePERSON =  thejson[i].PERSON;
        console.log(thePERSON);
        thePERSONarray.push(thejson[i].PERSON);
        thesectionarrayfull = thejson[i].Sections;
        console.log(thesectionarrayfull);
        testit = thesectionarrayfull.length;
        console.log(testit);
        for (t = 0; t < testit; t++) {
            thesectionname = thesectionarrayfull[t].Section;
            theresultsX = thesectionarrayfull[t].ResultsX;      
            
            theresultarray.push(thesectionarrayfull[t].ResultsX);
            console.log(thesectionname);
            console.log(theresultsX);
            if(thesectionarray.includes(thesectionname)){
                } else {
                    thesectionarray.push(thesectionname);
                    }
            }

        console.log(thesectionarray);
        console.log(theresultarray);
        testit = theresultarray.length;
        console.log(testit);
      }

      var chartdata1x = {
        labels: thePERSONarray,
        datasets : [
          {
            label: 'Results',
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: theresultarray
          },
          {
            label: thesectionarray,
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: thesectionarray
          },
        ]
      };

      var ctx1x = $("#mycanvas3");
        ctx1x.width = 400;
        ctx1x.height = 200;

      var payrollpie1 = new Chart(ctx1x, {
        type: 'line',
        data: chartdata1x,
        options: {
            responsive: false,
            maintainAspectRatio: true,
            legend: {
                display: true,
                position: 'right',
                align: 'start',
                labels: {
                    fontColor: 'black'
                    }
                }

            ,parsing: {
                xAxisKey: thePERSONarray,
                yAxisKey: thesectionarray
            }


            ,title: {
                display: true,
                fontSize: '16',
                fontColor: 'black',
                text: 'Status Board'
                }
             ,scales: {
                yAxes: [{
                  scaleLabel: { labelString: thePERSONarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
                ,xAxes: [{
                  scaleLabel: { labelString: thesectionarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
               },

            }
      });
      
      

      
      
    },
    error: function(data) {
        alert('Did not work');
      console.log(data);
    }
  });

$.ajax({
url:“successteamboardoverview.php”，
方法：“获取”，
contentType:“应用程序/文本”，
数据类型：“文本”，
成功：功能（数据）{
var thejson=JSON.parse（数据）；
var thePERSONarray=[]；
var thePERSON；
var thesectionarray=[]；
var部分；
var theresultarray=[]；
var theresultfull=[]；
for（JSON中的变量i）{
thePERSON=thejson[i]。PERSON；
控制台日志（个人）；
personarray.push（thejson[i].PERSON）；
thesectionarrayfull=thejson[i]。节；
console.log（sectionarrayfull）；
testit=sectionarrayfull.length；
控制台日志（testit）；
对于（t=0；t

这可能会有所帮助。或者，你能让你的代码像这样运行吗？我是在localhost上编写的，源数据也在localhost上，所以我不确定如何使JSFIDLE工作。建议？我已经在这里将此代码添加到JSFIDLE。这可能会有帮助。或者，你能让你的代码像这样运行吗？我是在localhost上编写的，源数据也在localhost上，所以我不确定如何使JSFIDLE工作。建议？我已经在这里将此代码添加到JSFIDLE。

$.ajax({
    url: "successteamboardoverview.php",
    method: "GET",
    contentType: "application/text",
    dataType: 'text',

    success: function(data) {

      var thejson = JSON.parse(data);
      var thePERSONarray = [];
      var thePERSON;
      var thesectionarray = [];
      var thesection;
      var theresultarray = [];
      var theresultfull = [];

      for(var i in thejson) {
      
        thePERSON =  thejson[i].PERSON;
        console.log(thePERSON);
        thePERSONarray.push(thejson[i].PERSON);
        thesectionarrayfull = thejson[i].Sections;
        console.log(thesectionarrayfull);
        testit = thesectionarrayfull.length;
        console.log(testit);
        for (t = 0; t < testit; t++) {
            thesectionname = thesectionarrayfull[t].Section;
            theresultsX = thesectionarrayfull[t].ResultsX;      
            
            theresultarray.push(thesectionarrayfull[t].ResultsX);
            console.log(thesectionname);
            console.log(theresultsX);
            if(thesectionarray.includes(thesectionname)){
                } else {
                    thesectionarray.push(thesectionname);
                    }
            }

        console.log(thesectionarray);
        console.log(theresultarray);
        testit = theresultarray.length;
        console.log(testit);
      }

      var chartdata1x = {
        labels: thePERSONarray,
        datasets : [
          {
            label: 'Results',
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: theresultarray
          },
          {
            label: thesectionarray,
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: thesectionarray
          },
        ]
      };

      var ctx1x = $("#mycanvas3");
        ctx1x.width = 400;
        ctx1x.height = 200;

      var payrollpie1 = new Chart(ctx1x, {
        type: 'line',
        data: chartdata1x,
        options: {
            responsive: false,
            maintainAspectRatio: true,
            legend: {
                display: true,
                position: 'right',
                align: 'start',
                labels: {
                    fontColor: 'black'
                    }
                }

            ,parsing: {
                xAxisKey: thePERSONarray,
                yAxisKey: thesectionarray
            }


            ,title: {
                display: true,
                fontSize: '16',
                fontColor: 'black',
                text: 'Status Board'
                }
             ,scales: {
                yAxes: [{
                  scaleLabel: { labelString: thePERSONarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
                ,xAxes: [{
                  scaleLabel: { labelString: thesectionarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
               },

            }
      });
      
      

      
      
    },
    error: function(data) {
        alert('Did not work');
      console.log(data);
    }
  });