Javascript Angular/JS-谷歌区域图表中的动态内容
我用它在图表中显示温度和日期。我需要显示的内容是动态的,应该在加载时填写。 我在Sails.js中使用Angular,每个温度都存储在一个对象batchTemps中,对象存储在一个具有数组的对象batchTempList中;内容 我需要使用batchTempList.contents填充面积图,但无法找到一种工作方式 以下是生成图表的静态数据示例:Javascript Angular/JS-谷歌区域图表中的动态内容,javascript,angularjs,charts,google-visualization,Javascript,Angularjs,Charts,Google Visualization,我用它在图表中显示温度和日期。我需要显示的内容是动态的,应该在加载时填写。 我在Sails.js中使用Angular,每个温度都存储在一个对象batchTemps中,对象存储在一个具有数组的对象batchTempList中;内容 我需要使用batchTempList.contents填充面积图,但无法找到一种工作方式 以下是生成图表的静态数据示例: data = google.visualization.arrayToDataTable([ ['Time', 'Temp C°'],
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],
}
]);
JSFIDLE与静态解决方案:
PS:在我的应用程序的早期版本中,我将Sails.js与EJS一起使用,并使用以下代码使其工作:
var data = google.visualization.arrayToDataTable([
['Time', 'Temp C°'],
<% _.each(brewery.temperatures, function(breweryTemp) { %>
['<%= breweryTemp.createdAt %>', <%= breweryTemp.temperature %>],
<% }); %>
]);
var data=google.visualization.arrayToDataTable([
[“时间”,“温度C°”,
['', ],
]);
但由于我切换到Angular,目前使用的是模板而不是.ejs文件,所以我无法使用它
提前感谢,,
任何帮助都将不胜感激。在构建数据表之前,请尝试构建阵列
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 (var i = 0; i < batchTempList.contents.length; i++) {
chartData.push(
[batchTempList.contents[i].createdAt, batchTempList.contents[i].temperature]
);
}
for(var i=0;i
请注意,AngularJS和AngularJS不一样。AngularJS指的是版本1.x,AngularJS指的是版本2+。你指的是哪个版本?@borislemke谢谢,没有注意到那个标签。我用的是Angular 1.3!非常感谢。我会查出来再回来的!:)工作起来很有魅力!根据您的编辑,我选择了forEach方式。为了确定,您介意看看这个JSFIDLE吗?使用console.log(JSON.stringify(batchTempList.contents))的输出代码>再一次,谢谢!好的,没问题。我会把它编辑成问题,如果这很酷的话?