javascript - Angular/JS - Google 面积图中的动态内容

Question

我正在使用Google Charts Area Chart用于在图表中显示温度和日期。我需要显示的内容是动态的，应该在加载时填写。 我将 Angular 与 Sails.js 结合使用，每个温度都存储在一个对象 batchTemps 中，并且这些对象存储在一个具有数组的对象 batchTempList 中； 内容。

我需要使用batchTempList.contents来填充面积图，但无法找出工作方法。

以下是使用静态数据生成图表的示例:

data = google.visualization.arrayToDataTable([
      ['Time', 'Temp C°'],
      ['2017-05-31 13:44:54',  20.5],
      ['2017-05-31 13:54:54',  21.7],
      ['2017-05-31 14:04:54',  22.0],
      ['2017-05-31 14:14:54',  21.3]
    ]);

我想从列表中检索数据，然后像上面的静态示例一样输入它。 batchTemps 对象具有 ID、温度和createdAt(记录日期)。

我尝试过但没有成功的示例:

data = google.visualization.arrayToDataTable([
      ['Time', 'Temp C°'],
      for (batchTemp in batchTempList.contents) {
                    ['batchTemp.createdAt', batchTemp.temperature],
                }
]);

JSFiddle 静态解决方案:http://jsfiddle.net/qphnyash/

PS:在我的应用程序的早期版本中，我将 Sails.js 与 EJS 结合使用，并使用以下代码使其工作:

var data = google.visualization.arrayToDataTable([
    ['Time', 'Temp C°'],
    <% _.each(brewery.temperatures, function(breweryTemp) { %>
    ['<%= breweryTemp.createdAt %>', <%= breweryTemp.temperature %>],
    <% }); %>
  ]);

但由于我切换到 Angular，并且当前使用模板而不是 .ejs 文件，因此我无法使用它。

提前致谢， 任何帮助将不胜感激。

Answer 1

在构建数据表之前尝试构建数组...

var chartData = [
  ['Time', 'Temp C°']
];

for (batchTemp in batchTempList.contents) {
  chartData.push(
    [batchTemp.createdAt, batchTemp.temperature]
  );
}

var data = google.visualization.arrayToDataTable(chartData);

编辑

构建图表数据数组...

如果 batchTempList.contents 是数组 []，而不是对象 {}，

你想使用forEach...

batchTempList.contents.forEach(function (batchTemp) {
  chartData.push(
    [batchTemp.createdAt, batchTemp.temperature]
  );
});

或常规for循环...

for (var i = 0; i < batchTempList.contents.length; i++) {
  chartData.push(
    [batchTempList.contents[i].createdAt, batchTempList.contents[i].temperature]
  );
}