Làm thế nào để cấu hình flot để vẽ chuỗi thời gian bị thiếu trên trục y tại điểm 0?

Question

Tôi đang sử dụng flot (flot on github) để vẽ một đồ thị với các dữ liệu chuỗi thời gian sau:

[ 
    [1357171200000, 1], 
    [1357344000000, 1], 
    [1357430400000, 2], 
    [1357516800000, 2], 
    [1357689600000, 3], 
    [1357776000000, 1] 
] 

Như bạn có thể thấy có một số điểm trong đồ thị dưới Mà chương trình bán hàng cho các ngày nhất định. Phản hồi json của tôi không chứa số lượng/dữ liệu bán hàng trong những ngày không có bán hàng nào xảy ra. Ví dụ: ngày 04 tháng 1. Làm thế nào tôi có thể cấu hình flot để rút ra những ngày còn thiếu trên trục y tại điểm zero (vì không có bán hàng)? Như bạn có thể thấy trong hình ảnh flot không kết nối các điểm để không có điểm số không trong đồ thị.

Answer 1

Dưới đây là một giải pháp mà tạo ra một mảng mới thêm trong những ngày mất tích và thiết lập giá trị của họ bằng không :

/* create and return new array padding missing days*/ 
function newDataArray(data) { 
    var startDay = data[0][0], 
    newData = [data[0]]; 

    for (i = 1; i < data.length; i++) { 
    var diff = dateDiff(data[i - 1][0], data[i][0]); 
    var startDate = new Date(data[i - 1][0]); 
    if (diff > 1) { 
     for (j = 0; j < diff - 1; j++) { 
     var fillDate = new Date(startDate).setDate(startDate.getDate() + (j + 1)); 
      newData.push([fillDate, 0]); 
     } 
    } 
    newData.push(data[i]); 
    } 
    return newData; 
} 


/* helper function to find date differences*/ 
function dateDiff(d1, d2) { 
    return Math.floor((d2 - d1)/(1000 * 60 * 60 * 24)); 
} 

Cách sử dụng:

var data = [ 
    [1357171200000, 1], 
    [1357344000000, 1], 
    [1357430400000, 2], 
    [1357516800000, 2], 
    [1357689600000, 3], 
    [1357776000000, 1] 
]; 

var newData=newDataArray(data); 
/* pass newData to flot*/ 

DEMO: http://jsfiddle.net/LK2gD/3/

Answer 2

Vì vậy, bạn phải đếm hàng ngày. Sau đó, bạn có thể lặp qua từng mục nhập và tìm số ngày giữa mục nhập hiện tại và mục nhập tiếp theo, sau đó bạn sẽ chỉ cần điền vào mảng của bạn với 0.

Tốt hơn hết là sử dụng mảng không được lấp đầy và sau đó chỉ thêm số đếm cho ngày bạn có trong mảng hiện tại của mình, sau đó bạn sẽ không cần thực hiện bất kỳ kiểm tra nào vào ngày đó.

Bạn gian hàng ngày

var millisInDay = 1000*60*60*24; 

này sẽ cung cấp cho bạn số lượng gian hàng ngày

var intervals = parseInt(((lastDateInMillis - startDateInMillis)/ 
            millisInDay) + 1); 

Sau đó, khi bạn lặp qua mảng của bạn ngày

[[1357171200000, 1], [1357344000000, 1], [1357430400000, 2], 
[1357516800000, 2], [1357689600000, 3], [1357776000000, 1]] 

Kiểm tra trong đó khoảng là ngày và cập nhật số đếm trong mảng 'khoảng thời gian' ())

var interval = ((currentDateMillis - startDateInMillis)/millisInDay); 
counts[interval] += currentCount; 

Và sau đó bạn có thể chơi với index để lập bản đồ số với một ngày cụ thể:

function getEpochStartInterval(index){ 
    return startDateInMillis + (index * millisInDay); 
} 

function getEpochEndInterval(index){ 
    return startDateInMillis + ((index + 1) * millisInDay); 
}