jquery - 将数据添加到动态创建的 Chart.js 数据集

Question

我觉得我已经非常接近了，但我似乎无法理解最后一点。我正在尝试使用 JSON 文件中的动态数据集在 Chart.js 中创建折线图。

我的 JSON 如下:

{
  "source":"Google Trends",
  "keywords":
  [
    {
      "value":"Keyword 1",
      "data":
      [
        {
          "month":"Dec",
          "popularity":"10"
        },
        {
          "month":"Jan",
          "popularity":"35"
        }
      ]
    },
    {
      "value":"Keyword 2",
      data:
      [
        ...
      ]
    }
  ]
}

然后我有以下 jQuery:

var source = "Google Trends";
var trendDataset = [];
var trendData = [];

$.each(jsonFile, function(index, trends) {
  if (trends.source === source) {
    $.each(trends.keywords, function(index, keyword) {

      trendDataset[index] = {
        label: keyword.value,
        data: trendData,
        borderWidth: 1,
        backgroundColor: randomColor(),
        lineTension: 0
      }

    });
  }
});

这工作正常，它为 JSON 文件中的每个关键字创建一个新数据集。但我在填充这些数据集时遇到了困难。

我试图向它传递一个数据数组(trendData[])，其中填充了每个关键字的流行度数据。我知道我需要循环遍历每个关键字的数据数组，因此我在现有循环中添加了这个 $.each 循环:

$.each(keyword.data, function(index, data) {
  trendData.push(data.popularity);
});

总共创建了这个:

$.each(jsonFile, function(index, trends) {
  if (trends.source === source) {
    $.each(trends.keywords, function(index, keyword) {

      trendDataset[index] = {
        label: keyword.value,
        data: trendData,
        borderWidth: 1,
        backgroundColor: randomColor(),
        lineTension: 0
      }

      $.each(keyword.data, function(index, data) {
        trendData.push(data.popularity);
      });

    });
  }
});

显然，这是将所有关键词的所有流行度数据相加，创建一个大的趋势数据[]。将 trendData.push(data.popularity) 替换为 trendData[index] = data.popularity 是正确的做法，但同样，显然仅适用于最后一个关键字，因为它不断被覆盖。

如何为每个 trendDataset[] 创建单独的 trendData[]？

我想我在第二个 $.each 中需要类似的东西:

$.each(keyword.data, function(index, data) {
  trendData[index] = data.popularity;
  trendDataset[index].push(trendData);
});

但这给了我一个错误:trendDataset[index].push 不是一个函数

编辑:一步步看下去，就会发现这是行不通的。它循环访问第一个数组一次，创建第一个数据集。然后它循环访问第二个数组三次，然后该模式重复自身。

我以某种方式需要能够访问第一个数组中第二个数组的属性，如下所示:

trendDataset[index] = {
  data: trendData.data.popularity
}

但是如何..？

编辑2:我越想找到解决办法，我就越无能为力。每当我像这样设置后console.log trendData:

$.each(keyword.data, function(index, data) {
  trendData[index] = data.popularity;
});

console.log(trendData);

它向对象显示了 3 次正确的值，但打开后它只向我显示最后一次迭代的值？？？

Screenshot

Answer 1

我终于明白了。这比我想象的要容易得多，我不知道为什么我没有早点弄清楚这一点..

只需在第一个 $.each 循环中创建单独的数组并设置值..

var trendDataset = [];

$.each(trends.keywords, function(index, keyword) {
  // Create an Array for each data object
  trendData = [];
  trendLabels = [];
    $.each(keyword.data, function(index, data) {
      trendLabels[index] = data.month,
      trendData[index] = data.popularity
    });  
  // Push the array with data to another array
  trendDataset[index].data = trendData;
});