ChartJS AJAX Javascript

我有一个AJAX响应，它将一些数据传递到Javascript页面。我将原始响应格式化为单个数组

数组1为

["option1","option2","option3"]

[ "["0.0","2.0","1.0","1.0","3.0"]","["1.0","2.0","11.0","11.0","12.0"]","["0.0","0.3","2.0","0.0","6.0"" ]

["2019-01-07 05:00:00","2019-01-07 05:30:00","2019-01-07 06:00:00","2019-01-07 06:00:00","2019-01-07 06:30:00"]

数组2为

["option1","option2","option3"]

[ "["0.0","2.0","1.0","1.0","3.0"]","["1.0","2.0","11.0","11.0","12.0"]","["0.0","0.3","2.0","0.0","6.0"" ]

["2019-01-07 05:00:00","2019-01-07 05:30:00","2019-01-07 06:00:00","2019-01-07 06:00:00","2019-01-07 06:30:00"]

数组3为

["option1","option2","option3"]

[ "["0.0","2.0","1.0","1.0","3.0"]","["1.0","2.0","11.0","11.0","12.0"]","["0.0","0.3","2.0","0.0","6.0"" ]

["2019-01-07 05:00:00","2019-01-07 05:30:00","2019-01-07 06:00:00","2019-01-07 06:00:00","2019-01-07 06:30:00"]

我想尝试使用这些数据生成一个chartjs折线图，但要注意的是，在前两个数组中通常会有更多的选项

X轴上的阵列3、Y轴上的阵列2和阵列1作为图例和图表中的项目

有人能给我一个起点吗？因为我似乎已经到了一个可以输出数据但无法使图表足够动态以获取数据的地步了

可以选择将前2个数组合并到JSON中形成

{
  "Labels": "option1",
  "Array": "["0.0","2.0","1.0","1.0","3.0"]"
},
{
  "Labels": "option2",
  "Array": "["1.0","2.0","11.0","11.0","12.0"]"
},
{
  "Labels": "option3",
  "Array": "["0.0","0.3","2.0","0.0","6.0"]"
}

如果我知道原始数组中有多少项，那么生成图表是没有问题的，但是我需要动态的，尽管日期范围是静态的

编辑

下面是我目前用来调用数据的脚本

function drawChart() {

  var jsonData = $.ajax({
    url: 'includes/private/test6.php',
    dataType: 'json',
  }).done(function (results) {

    var label = []; 
    var array = [];

    results.forEach(function(data) {
      label.push(data.Label);
      array.push(data.Array);
      //console.log(data.Label);
    });

    var temp = {
      labels : label,
      datasets : [{
                    data: array
      }]
    };

    var ctx = document.getElementById("chart").getContext("2d");
    var chart_vehicle = new Chart(ctx,temp);    
  });
}

drawChart();

在本例中，console.log（data.Label）不返回任何内容-我以前的版本是

$.ajax({
  type: 'GET',
  url: 'includes/private/test6.php',
  dataType: 'json',     
  success: function (data) {
      var label = [];
      var array = [];
    for(var i in data) {
    label[i] = data[i].Labels; 
    array[i] = data[i].Array; 
}

// used to correctly format the JSON
var names = label.slice(0, -1);  
var data = array.slice(0, -1); 

// Used to flip the array and return the first entry - Dates will always be the last thing returned.
var dates = JSON.parse(array.reverse(array)[0]); 

console.log(data);
console.log(names);
console.log(dates);

这可以正确地返回数据，但我仍然无法将数据动态地放入图表中

另一次编辑

我做了一些修改，读了很多书。这是我的小提琴，里面有我的JSON响应。没有生成图表，但我非常确定数据应该是正确的

---

好的。所以我不得不把你的代码颠倒过来

JSON格式和JSON类型错误

根据ChartJs，生成图表的正确格式如下

var config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'dataset - big points',
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                fill: false,
                borderDash: [5, 5],
                pointRadius: 15,
                pointHoverRadius: 10,
            }, {
                label: 'dataset - individual point sizes',
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                fill: false,
                borderDash: [5, 5],
                pointRadius: [2, 4, 6, 18, 0, 12, 20],
            },]
        }

    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };

第1期：您尝试的是

var config = {
      type: 'line',
      labels: XXdates,
      datasets: []
    }

请注意缺少的数据attr

第2期：数据格式必须为数字数组

eg: [  1,2,3,4,5]

但是你的数据是这样返回的

"[ "1", "2" ,"0" ]"

解决方案：解决上述问题后的工作代码

function drawChart() {

  var jsonData = $.ajax({
    url: 'https://api.myjson.com/bins/11poyc',
    dataType: 'json',
  }).done(function(results) {

    var label = [];
    var output = [];

    results.forEach(function(data) {
      label.push(data.Labels);
      output.push(data.Array);
    });

    var XXnames = label.slice(0, -1);
    var XXdata = output.slice(0, -1);

    var XXdates = JSON.parse(output.reverse(output)[0]);


        var data = {
            labels: XXdates,
        datasets: []
    }

    XXnames.forEach(function(XXa, i) {

        console.log(JSON.parse(XXdata[i]).map(Number));

      data.datasets.push({
        label: XXa,
        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(XXdata[i]).map(Number)
      });
    });

        var config = {
      type: 'line',
      data : data
    }

    var ctx = document.getElementById("chart").getContext("2d");
    var chart = new Chart(ctx, config);
  });
}

drawChart();

---

您在新代码中编写了“标签”。但是在你以前的文章中，你用“s”->标签写了。我想是因为console.log没有显示任何感谢。。。但我仍然无法正确输出数据。天啊！非常感谢你看这个。事实上，我很高兴我离得这么近。知道如何识别问题是我知识的不足之处！