Hiển thị chú giải công cụ với đúng múi giờ bằng cách sử dụng Flot jQuery plugin

Question

Tôi có một vấn đề nhỏ với plugin Flot khi hiển thị nhãn xaxis trong biểu đồ. Chúng là 'mode: "time"'. Hiện tại tôi sử dụng Flot với chức năng tooltip và chú giải công cụ chứa ngày giờ. Tôi cung cấp JSON cho plugin chứa dấu thời gian. Sau đó, tôi chuyển đổi dấu thời gian và hiển thị nó trong chú giải công cụ. Vấn đề là khi hiển thị dữ liệu trong biểu đồ, thời gian từ các chú giải công cụ không tương ứng với các nhãn xaxis được tạo bởi plugin do sự khác biệt giữa các múi giờ. Dấu thời gian JSON của tôi là +2 GMT, nhưng nhãn xaxis trong Flot là +0 GMT. Vì vậy, tôi tự hỏi nếu có một khả năng để thiết lập một bù đắp cho múi giờ hoặc một cái gì đó tương tự.

JSON My (tạo ra bởi AJAX)

[1300087800000,29], 
[1300088700000,39], 
[1300089600000,46], 
[1300090500000,53], 
[1300091400000,68], 
[1300092300000,95], 
... 

chức năng tooltip My

$(placeholder).bind("plothover", function (event, pos, item) { 
    $("#tooltip").remove(); 

    var x = item.datapoint[0].toFixed(2); 
    var y = item.datapoint[1].toFixed(2); 

    var currDate = new Date(Math.floor(x)); 
    var hour  = currDate.getHours(); 
    var minute  = String("") + currDate.getMinutes(); 

    var tooltip = hour + ":" + 
        ((minute.length < 2) ? "0" + minute : minute) + " " + 
        (Math.round(y * 100)/100) + "Wh" 
    showTooltip(item.pageX, item.pageY, tooltip); 
}); 

Các Flot tùy chọn

var plotOptions = { 
    lines: { show: true, lineWidth: 1 }, 
    points: { show: false, symbol: "cross" }, 
    xaxis: { 
     mode: "time", 
     tickLength: 5, 
     timeZoneOffset: (new Date()).getTimezoneOffset() 
    }, 
    selection: { mode: "x", color: "#BCBCBC" }, 
    grid:  { hoverable: true, clickable: false } 
}; 

nhưng tiếc là timeZoneOffset không hoạt động và tôi vẫn có sự khác biệt giữa xaxis và chú giải công cụ.

Bạn có ý tưởng nào về cách giải quyết vấn đề của mình không?

Answer 1

Nếu bạn xem cơ sở dữ liệu vấn đề nổi, issue 141 địa chỉ múi giờ. Issue 484 đề xuất cú pháp bạn sử dụng đã được hợp nhất vào vấn đề này.

Các documentation nói:

Thông thường bạn muốn timestamps được hiển thị theo múi giờ nhất định , thường là múi giờ trong đó các dữ liệu đã được sản xuất. Tuy nhiên, Flot luôn hiển thị dấu thời gian theo UTC. Nó phải là sự thay thế duy nhất với Javascript lõi là giải thích dấu thời gian theo múi giờ mà khách truy cập ở, có nghĩa là bọ chét sẽ thay đổi không thể đoán trước với múi giờ và tiết kiệm ban ngày của mỗi khách truy cập.

Vì vậy, do không có hỗ trợ tốt cho múi giờ tùy chỉnh trong Javascript, bạn sẽ phải quản lý phía máy chủ này.

Vì vậy, giải pháp chính xác là làm cho dữ liệu của bạn trông giống như giống như phía máy chủ UTC (ngay cả khi nó không phải là). Nếu bạn không thể thay đổi nguồn dữ liệu của bạn, bạn có thể muốn xem xét proxy nó. Ngôn ngữ phía máy chủ nên cho phép thao tác múi giờ.

Hoặc theo dõi sự cố 141 và xem các bản vá hoặc plugin.

Answer 2

Bạn có thể thử sử dụng múi giờ thay vì timeZoneOffset. các tùy chọn của bạn trông giống như:

var plotOptions = { 
    lines: { show: true, lineWidth: 1 }, 
    points: { show: false, symbol: "cross" }, 
    xaxis: { 
      mode: "time", 
      tickLength: 5, 
      timezone: "browser" // "browser" for local to the client or timezone for timezone-js 
      }, 
    selection: { mode: "x", color: "#BCBCBC" }, 
    grid:  { hoverable: true, clickable: false } 
    }; 

Phiên bản flot của tôi là 0.7

Answer 3

cho UTC timestamps, chức năng thời gian sử dụng UTC:

var hour = currDate.getUTCHours(); // instead of getHours() 
var minute = String("") + currDate.getUTCMinutes(); // instead of getMinutes() 

và loại bỏ múi giờ Xaxis.