फ्लोट jQuery प्लगइन

Question

का उपयोग कर सही समय क्षेत्र के साथ टूलटिप प्रदर्शित करें ग्राफ में xaxis लेबल प्रदर्शित करते समय मुझे फ्लोट प्लगइन के साथ एक छोटी सी समस्या है। वे 'mode: "time"' हैं। वर्तमान में मैं टूलटिप फ़ंक्शन के साथ फ़्लोट का उपयोग करता हूं और टूलटिप में दिनांक और समय होता है। मैं जेएसओएन प्लगइन में आपूर्ति करता हूं जिसमें टाइमस्टैम्प होते हैं। बाद में मैं टाइमस्टैम्प को परिवर्तित करता हूं और मैं इसे टूलटिप में प्रदर्शित करता हूं। समस्या यह है कि ग्राफ में डेटा प्रदर्शित करते समय, टूलटिप्स के समय टाइमज़ोन के बीच अंतर के कारण प्लगइन द्वारा उत्पन्न xaxis लेबल से मेल नहीं खाते हैं। मेरे जेएसओएन टाइमस्टैम्प +2 जीएमटी हैं, लेकिन फ्लोट में एक्सएक्सिस लेबल +0 जीएमटी हैं। तो मुझे आश्चर्य है कि समय क्षेत्र या कुछ समान ऑफसेट सेट करने की संभावना है या नहीं।

मेरे JSON (AJAX द्वारा उत्पन्न)

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

मेरे टूलटिप समारोह

$(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); 
}); 

Flot विकल्पों

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 } 
}; 

लेकिन दुर्भाग्यवश timeZoneOffset काम नहीं करता है और मेरे पास अभी भी xaxis और टूलटिप्स के बीच अंतर है।

क्या आपके पास कोई विचार है कि मुझे अपनी समस्या का समाधान कैसे करना चाहिए?

Answer 1

यदि आप फ़्लोट समस्या डेटाबेस देखते हैं, तो issue 141 टाइमज़ोन को संबोधित करता है। Issue 484 आपके द्वारा उपयोग किए जाने वाले वाक्यविन्यास का सुझाव देते हुए इस मुद्दे में विलय कर दिया गया था।

documentation का कहना है:

आम तौर पर आप timestamps एक निश्चित समय क्षेत्र, आमतौर पर समय क्षेत्र जिसमें डेटा उत्पादन किया गया है के अनुसार प्रदर्शित करना चाहते हैं। हालांकि, फ्लोट हमेशा यूटीसी के अनुसार टाइमस्टैम्प प्रदर्शित करता है। के रूप में कोर जावास्क्रिप्ट के साथ ही वैकल्पिक समय क्षेत्र कि आगंतुक में है, जिसका अर्थ है कि टिक समय क्षेत्र और प्रत्येक आगंतुक के दिन के उजाले बचत के साथ अप्रत्याशित परिवर्तन होगा के अनुसार timestamps व्याख्या करने के लिए है यह है।

तो दिया जावास्क्रिप्ट में कस्टम समय क्षेत्रों के लिए कोई अच्छा समर्थन उपलब्ध न हो, तो आप इस सर्वर साइड का ख्याल रखना होगा।

तो सही समाधान अपने डेटा यूटीसी सर्वर साइड की तरह देखो (यहां तक ​​कि अगर यह नहीं है) बनाना है। यदि आप अपने डेटा स्रोत को बदल नहीं सकते हैं तो आप इसे प्रॉक्सी करने पर विचार करना चाहेंगे। सर्वर-साइड भाषाओं को टाइमज़ोन हेरफेर की अनुमति देनी चाहिए।

वैकल्पिक रूप से समस्या 141 का पालन करें और पैच या प्लगइन के लिए देखें।

Answer 2

आप timeZoneOffset के बजाय समय क्षेत्र इस्तेमाल करने की कोशिश कर सकते हैं। अपने विकल्पों को देखने के लिए की तरह:

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 } 
    }; 

मेरे flot संस्करण 0 है।7

Answer 3

यूटीसी मुहर, के लिए

उपयोग UTC समय कार्य:

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

और xaxis समय क्षेत्र को हटा दें।