2016-02-09 8 views
5

क्या plotly.js में स्वचालित रूप से प्लॉट किए गए डेटा को फिट करने के लिए कुल्हाड़ियों को स्वत: स्केल करने के लिए कोई पैरामीटर है?Plotly.js autoscale

परिदृश्य: मैं नवीनतम 30 मिनट में तापमान (वाई-अक्ष) बनाम समय (एक्स-अक्ष) की साजिश कर रहा हूं।

समस्या: जब पृष्ठ लोड होता है, तो ग्राफ कुछ भी नहीं दिखाता है। मैं अक्ष को ठीक कर दूंगा, लेकिन एक्स-अक्ष को नवीनतम 30 मिनट दिखाने और हर मिनट अपडेट करने की आवश्यकता है। हालांकि, जब मैं 'ऑटोस्केल' या 'रीसेट एक्सिस' पर क्लिक करता हूं, तो ग्राफ पूरी तरह से डेटा फिट बैठता है!

प्रश्न: क्या उपयोगकर्ता 'ऑटोस्केल' पर क्लिक करने के बजाय पृष्ठ लोड होने पर स्वचालित रूप से "ऑटोस्केल" को साजिश सेट कर सकता है? यहाँ

एप्लिकेशन देखें: https://vast-fortress-23871.herokuapp.com/

उत्तर

4

वास्तव में एक मूर्खतापूर्ण हैक जोड़ने के लिए है:

document.querySelector('[data-title="Autoscale"]').click() 

यह स्वचालित रूप से लपेटकर बटन पर क्लिक करें होगा। एक बेहतर तरीका यह पता लगाने के लिए होगा कि बटन वास्तव में क्या कॉल कर रहा है और इसके बजाए कॉल करें।

+0

यह चालाक है, धन्यवाद। अगर सब कुछ विफल हो जाता है, तो मैं इसका इस्तेमाल करूंगा। – Matte3o

+0

@ Matte3o: चूंकि आप JQuery का उपयोग कर रहे हैं, इसलिए आप व्यापक ब्राउज़र समर्थन के लिए 'document.querySelector' के बजाय' $ 'का उपयोग कर सकते हैं। – damd

0

मुझे एक ही समस्या थी। आपके द्वारा लिंक किया गया कोड छोटा हो गया है, इसलिए मैं इसे पढ़ नहीं सकता (लेकिन नहीं), लेकिन यहां मैंने गलत किया है:

यदि plotly.newPlot() सभी डेटा लोड होने से पहले चलता है तो यह स्वतः नहीं होगा (क्योंकि इसमें कोई डेटा नहीं है और जांचने के लिए नहीं पता)।

जैसे

var plotdata = [x:[],y:[],type: 'scatter']; 
$.get('mydata.dat',(x) => {/*put parsed x into plotdata*/}); 
Plotly.newPlot('mydiv',plotdata,layout); 

टिप्पणी के बाद भूखंड बनाया गया था क्योंकि $.get() अतुल्यकालिक है कि plotdata आबादी वाले हो जाता है।

0

मैंने इस समस्या को रिलायआउट के साथ हल किया। बस xaxis और yaxis पर 'सत्य' पर autorange संपत्ति सेट करें। यह दोनों धुरी पर ऑटोस्केल होगा:

// To call when data is ready, after your page loads. 
Plotly.relayout(yourGraph, { 
    'xaxis.autorange': true, 
    'yaxis.autorange': true 
}); 
संबंधित मुद्दे