为什么我的谷歌图表看起来不对劲

时间:2017-05-30 10:26:14

标签: javascript html charts google-visualization

所以我试图按分钟显示一些统计数据,但是图表......看起来不对,或者我错了? enter image description here

我在这里有一个jsfiddle示例:https://jsfiddle.net/p0j5qfL9/1/

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

function load_page_data(zoom,action,time,entry_id){

    zoom = typeof zoom !== 'undefined' ? zoom : 'date';
    action = typeof action !== 'undefined' ? action : 'banner view';
    time = typeof time !== 'undefined' ? time : $('.actions_logs .sort_time').val();
    entry_id = typeof entry_id !== 'undefined' ? entry_id : '';
    rows = [];

    $.ajax({
        url: "/stats/get-stats",
        data: {zoom : zoom, action : action, time: time, entry_id : entry_id},
        async: false,
        success: function(data){
            if(data){
                var json = jQuery.parseJSON(data);
                $.each(json, function( index, value ) {
                    date = new Date(value.created);
                    rows.push([new Date(value.created),parseInt(value.total)]);
                });

                drawBasic(rows,action,zoom);
            }
        }
    });
}

function drawBasic(rows,action,zoom) {

    var data = new google.visualization.DataTable(rows);
    column_type = (zoom == 'minute' || zoom == 'hour') ? 'datetime' : 'date';
    data.addColumn(column_type, 'Time of Day');
    data.addColumn('number', action);


    data.addRows(rows);

    var options = {
        title: 'Action',
        hAxis: {
            title: 'Time',
            format: (column_type == 'datetime') ? 'yyyy/M/d HH:mm' : null
        },
        vAxis: {
            title: 'Hits'
        },
        pointSize: 5,
        legend: { position: 'top', alignment: 'end' },
        animation: {"startup": true}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    $('.loading-chart').remove();
    chart.draw(data, options);
}

2 个答案:

答案 0 :(得分:1)

您的数据未按任何顺序排序,因此这些行只会根据日期来回拉链。

在添加完毕后按数据日期排序将返回我认为您所追求的内容。

rows.sort((a, b) => a[0] - b[0]);

这个小提琴的第19行 - > https://jsfiddle.net/p0j5qfL9/1/ https://jsfiddle.net/p0j5qfL9/3/

编辑:哎呀,错误的链接。

答案 1 :(得分:0)

正如varbrad所说,你应该对你的数据数组进行排序。根据数组的顺序显示这些点。