Question

我有一个MongoDB，用于存储带有时间戳的湿度。这就是我的收藏品：

[{ "_id" : ObjectId("585db63541472bf7683eb3c5"), "datetime" : ISODate("2016-12-23T23:41:41.897Z"), "temperature" : 19, "humidity" : 23 }
{ "_id" : ObjectId("585db63a41472bf7683eb3c6"), "datetime" : ISODate("2016-12-23T23:41:46.927Z"), "temperature" : 19, "humidity" : 23 }
{ "_id" : ObjectId("585db63f41472bf7683eb3c7"), "datetime" : ISODate("2016-12-23T23:41:51.956Z"), "temperature" : 19, "humidity" : 23 }
{ "_id" : ObjectId("585db644483ab4f778a635bf"), "datetime" : ISODate("2016-12-23T23:41:56.991Z"), "temperature" : 19, "humidity" : 23 }
{ "_id" : ObjectId("585db64a483ab4f778a635c0"), "datetime" : ISODate("2016-12-23T23:42:02.032Z"), "temperature" : 19, "humidity" : 23 }]

我已成功使用此JSON数据绘制ChartJS的动态图表。

chart.js 代码

$(function() {
    $.ajax({
        type: "GET",
        url: "/api/humidity",
        cache: false,
        dataType: "json",
        success: function (result) {
            console.log(result);
            var labeldata = [];
            var chartData = [];
            for(var i =0; i < result.length; i++)
            {
                labeldata.push(result[i].when);
                chartData.push(result[i].message)
            }


            var ctx = document.getElementById("myChart").getContext("2d");
            var myChart = new Chart (ctx, {
                type : "line",
                data: {
                    labels: labeldata,
                    datasets: [
                        {
                            label: "Humidity",
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: "rgba(75,192,192,0.4)",
                            borderColor: "rgba(75,192,192,1)",
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "rgba(75,192,192,1)",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "rgba(75,192,192,1)",
                            pointHoverBorderColor: "rgba(220,220,220,1)",
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: chartData
                        },

                    ]
                }
            });
        }
    })
});

但是我想将带有时间间隔的下拉菜单绑定到我的图表。我对应该在哪里实现这一点感到困惑。我应该提一下，我每分钟收集一次数据。我可以用ChartJS实现这个目标吗？

我将不胜感激任何建议。

使用AngularJS以时间间隔显示ChartJS中的MongoDB数据

0 个答案: