Angular/JS - Google区域图表中的动态内容

我使用Google Charts Area Chart来显示图表中的温度和日期。我需要显示的内容是动态的，应该在加载时填写。我使用角与Sails.js ，每个温度被存储在对象batchTemps，并且对象被存储在对象batchTempList其具有阵列; 内容。Angular/JS - Google区域图表中的动态内容

我需要使用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 %>], 
    <% }); %> 
    ]);

但因为我切换到角，而目前使用的模板，而不是.ejs文件，我无法使用它。

在此先感谢，任何帮助将不胜感激。

来源

2017-06-01 Morten Amundsen

请注意，角度和AngularJS是不一样的。 AngularJS是指版本1.x，而Angular是指版本2+。你确切指的是哪个版本？ – borislemke

@borislemke谢谢，没有注意到这个标签。我正在使用Angular 1.3！ –

尝试建立该阵列之前，建立数据表...

EDIT

构建图表数据阵列...

如果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] 
); 
}

来源

2017-06-01 13:25:24 WhiteHat

谢谢！我会检查出来，回来！ :) –

工程就像一个魅力！根据你的编辑，我选择了for each方式。 –

只是可以肯定的，你介意看看这个JSFiddle吗？ https：// jsfiddle。net/85rb83eL/ –

Angular/JS - Google区域图表中的动态内容

回答

相关问题