Question

我有2000多条记录存储在JSON文件中。我的任务是将这些数据加载到带有ajax的谷歌折线图。到目前为止，我可以成功加载，我的javascript调用如下：

 $( document ).ready(function() {
    $.ajax({
        url: 'assets/data/ntx1000.json',
        dataType: 'json',
        type: 'GET',
        success: function(data) {
            console.log(data);
            var activeData = data.Active;
            var OffData = data.OFF;
            var idleData= data.Idle;
            var dataRows = [];
            var time= 0;

            google.charts.load('current', {packages: ['corechart', 'line']});
            google.charts.setOnLoadCallback(drawLineColors);

            for(var i=0;i <activeData.length ; i++){
                dataRows.push(activeData[i]);
            }

            function drawLineColors() {
                var data = new google.visualization.DataTable();
                data.addColumn('number', 'Time');
                data.addColumn('number', 'Idle');
                data.addColumn('number', 'Off');
                data.addColumn('number', 'Active');

                for(var i=0;i <activeData.length ; i++){
                    time=time+0.01;
                    data.addRows([[time, idleData[i] , OffData[i], activeData[i]]]);
                }

                var options = {
                    hAxis: {
                        // title: 'Time'
                    },
                    vAxis: {
                        //title: 'Popularity'
                    },
                    colors: ['#1b53b2',
                        '#073b4c',
                        '#359C19'],
                    'legend':'bottom'
                };

                var chart = new google.visualization.LineChart(document.getElementById('consumption24Hour'));
                chart.draw(data, options);
            }
        },
        error:function(){
            console.log("error");
        }

    });

});

我的意图是每一秒，我想在图表中添加一条记录，我想从早上8点开始直到记录结束。目前，因为我不知道如何将time=time+0.01;添加到我的代码中。如何在谷歌图表中添加时间？以下是从数据中生成的图表。

Answer 1

我尝试使用谷歌图表，找到了一种我可以实施的方法。

$( document ).ready(function() {
$.ajax({
    url: 'assets/data/ntx1000.json',
    dataType: 'json',
    type: 'GET',
    success: function(data) {
        console.log(data);
        var activeData = data.Active;
        var OffData = data.OFF;
        var idleData= data.Idle;
        var dataRows = [];
        var time= 0;

        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(drawLineColors);

        for(var i=0;i <activeData.length ; i++){
            dataRows.push(activeData[i]);
        }

        function drawLineColors() {
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Month');
            data.addColumn('number', 'Idle');
            data.addColumn('number', 'Off');
            data.addColumn('number', 'Active');

            for(var i=0;i <activeData.length ; i++){
                time= new Date(2017, 10, 20, 8, 00, 01+i);
                // var time = new Date(2014, 2, 20, 8, 30);
                data.addRows([[time, idleData[i] , OffData[i], activeData[i]]]);
            }

            var options = {
                hAxis: {
                    // title: 'Time'
                    // format: 'H:M'
                },
                vAxis: {
                    //title: 'Popularity'
                },
                colors: ['#1b53b2',
                    '#073b4c',
                    '#359C19'],
                'legend':'bottom'
            };

            var chart = new google.visualization.LineChart(document.getElementById('consumption24Hour'));
            chart.draw(data, options);
        }
    },
    error:function(){
        console.log("error");
    }

});

}）;

希望它会帮助别人。

Google Line Chart增加10秒

1 个答案: