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 with static solution：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]
  );
}

Angular / JS - Google Area Chart中的动态内容

1 个答案: