Question

我有以下内容：

plot($('#pageviews'), 'line', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
  datasets: [
    { 
      fillColor: rgba("#404040", 0.25), 
      data: [20, 24, 28, 30, 26, 18, 16, 10] 
    }
  ]
});

我有一个网址，“/ data / stats / pageviews”，它返回JSON：

[ {“标签”：“1”，“数据”：2}， {“标签”：“2”，“数据”：20}， {“标签”：“4”，“数据”：20} ]

我尝试了以下内容：

$.ajax({
  url: '/data/stats/pageviews',
  dataType: 'json'
}).success(function (data) {

  plot($('#pageviews'), 'line', {
    labels: data.Labels,
    datasets: [
      { 
        fillColor: rgba("#404040", 0.25), 
        data: data.Data
      }
    ]
  });

});

这不起作用......我认为问题在于我如何使用数据。是吗？

谢谢你，米格尔

Answer 1

问题是使用data.Labels不会获取数据中所有Label个键的值，因为它们存储在数组中的各个项目中。因此，我们必须遍历data中的每个数组项，每个数组项都是一个对象，然后我们可以访问Labels和Data的值。这个代码的演示可以在这个小提琴上找到：http://jsfiddle.net/teddyrised/hHE2r/3/

var data = [ { "Labels": "1", "Data": 2 }, { "Labels": "2", "Data": 20 }, { "Labels": "4", "Data": 20 } ];

// Declare new arrays
var dataLabels = [],
    dataData = [];

// Loop through returned data
$.each(data, function(key, value){
    dataLabels.push(this.Labels);
    dataData.push(this.Data);
});

console.log(dataLabels);
console.log(dataData);

因此，为了将其集成到您的AJAX调用中，我们可以执行以下操作：

$.ajax({
    url: '/data/stats/pageviews',
    dataType: 'json'
}).success(function (data) {

    // Declare new arrays
    var dataLabels = [],
        dataData = [];

    // Loop through returned data
    $.each(data, function(key, value){
        dataLabels.push(this.Labels);
        dataData.push(this.Data);
    });    

    // Draw lot
    plot($('#pageviews'), 'line', {
        labels: dataLabels,
        datasets: [{
            fillColor: rgba("#404040", 0.25),
            data: dataData
        }]
    });

});

Answer 2

您可以调用ajax请求，然后根据请求返回的内容设置绘图参数，如下所示：

 $.ajax({
    url:"/data/stats/pageviews",
    dataType:'json'
    success:function(obj){
        plot($('#pageviews'), 'line', {
            labels: obj.Labels,
            datasets: [
             { 
                fillColor: rgba("#404040", 0.25), 
                data: obj.Data
             }
            ]
        });
    }
  });

返回的JSON对象必须采用以下格式：

{"Labels": ["1", "2", "3", "4", "5", "6", "7", "8"],
 "Data": [20, 24, 28, 30, 26, 18, 16, 10]
}

从URL获取Ajax数据并使用它

2 个答案: